JavaScript: Find the angle between two points

angle-between-points.js

var p1 = {
	x: 20,
	y: 20
};

var p2 = {
	x: 40,
	y: 40
};

// angle in radians
var angleRadians = Math.atan2(p2.y - p1.y, p2.x - p1.x);

// angle in degrees
var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;

Thank you!

thank you very much, simple and efficient

Big thanks

Thanks you for this useful snippet.

Thank u!

was using for a design tool here, if you need the angle adjusted by all quadrants (between 0º and 360º) the correct function is:

const angle = (anchor, point) => Math.atan2(anchor.y - point.y, anchor.x - point.x) * 180 / Math.PI + 180;

const a = {
	x: 20,
	y: 20
};

const p = {
	x: 0,
	y: 0
};

angle(a, p); // 225

// angle in degrees, from example, same data
angleDeg = Math.atan2(a.y - p.y, a.x - p.x) * 180 / Math.PI; // 45

as pointed on Stack Overflow by jk.

var user = {
    x: 13.046136,
    y: 80.181772
};

var driver = {
    x: 13.045650,
    y: 80.182865
};

Math.atan2(user.y - driver.y, user.x - driver.x) * 180 / Math.PI + 180

angle will be -66.02778421483718 somewhere between (270deg - 315deg) if apply some condition i can get to know the exact angle.

in your calculation, the angle will be returned 113.97221578516282
so it was failed on negative values.

+∞

Thanks!

Thanks!

Massive thanks!!!!!

@adius stfu

Thanks

Thank you!

How about the pitch and yaw between 2 3D vectors?
Been trying to figure it out for 3 days now 😕

very useful!

THANK YOU!!!

How about the pitch and yaw between 2 3D vectors? Been trying to figure it out for 3 days now 😕

@Extex101

1. think of both as being at origin;
2. force them into the plane along 2 axis (set the last dimension to 0, because length is irrelevant) (which one depends on whether you want pitch yaw or roll and your coordinate system);
3. solve using 2D trigonometry (just the angle between these)

alternatively you could use a framework that uses these values to store rotation anyway, but beware of gimbal lock

thank you so much <3

Omg thank you!!!

Would love a version of this that has 0 degrees at due north if anyone knows how to do that...

Would love a version of this that has 0 degrees at due north if anyone knows how to do that...

@drewbaker

There are probably more elegant solutions to this but I achieved the desired behavior in p5.js using its map function which maps a value from one number range to another with the following syntax map(value, min1, max1, min2, max2)

My updated getAngle() function looks like this:

function getAngle(x1, y1, x2, y2){
  var a = Math.atan2(y2 - y1, x2 - x1) * (180 / Math.PI) + 90;
  a = (a < 0) ? map(a, -90, 0, 270, 360) : a;
  return a;
}

The map() function (always handy to have around) works like this under the hood:

function map(value, min1, max1, min2, max2) {
  return min2 + (max2 - min2) * ((value - min1) / (max1 - min1));
}

Thanks @timjuedemann but I actually wrote a function for this eventually that allows you to change where zero is, and even calculates distance from cursor to the element too.

Check it out here: https://github.com/funkhaus/fuxt/blob/master/utils/angleDistanceToCursor.js