Skip to content

Instantly share code, notes, and snippets.

@conorbuck
Created May 5, 2012 22:51
Show Gist options
  • Save conorbuck/2606166 to your computer and use it in GitHub Desktop.
Save conorbuck/2606166 to your computer and use it in GitHub Desktop.
JavaScript: Find the angle between two points
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;
@Dan-Traian
Copy link

Thank you!

@Extex101
Copy link

Extex101 commented May 7, 2021

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

@seamuskills
Copy link

very useful!

@Oman395
Copy link

Oman395 commented Sep 7, 2021

THANK YOU!!!

@modellking
Copy link

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

@arteuspw
Copy link

thank you so much <3

@lortonx
Copy link

lortonx commented Feb 6, 2023

Omg thank you!!!

@drewbaker
Copy link

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

@timjuedemann
Copy link

timjuedemann commented May 12, 2023

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));
}

@drewbaker
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment