How to convert x,y coordinates to an angle?

Question

Microsoft provide an excellent SVG gradient maker so IE9 can also have "CSS3" gradients (click Custom).

I currently utilise their logic for my Fireworks and Dreamweaver extensions to convert gradients to SVG, but I only know how to do it for standard top, bottom, left, right directions. If you enter an angle, I don't do the conversion, because I'm not sure how I would convert x1, x2, y1, y2 to CSS3 angle degrees.

The gradient generator provides values like this: x1="0%" y1="0%" x2="56.262833675564686%" y2="68.29999651227678%"

I'm not great with mathematics or trigonometry, so could somebody help me out? I'd also like to use the same math in a Sass mixin to do a similar thing, if possible.

Solution 1

If you get deltaX and deltaY from your coordinates then Math.atan2 returns the arctangent of the quotient of its arguments. The return value is in radians.

var deltaX = x2 - x1;
var deltaY = y2 - y1;
var rad = Math.atan2(deltaY, deltaX); // In radians

Then you can convert it to degrees as easy as:

var deg = rad * (180 / Math.PI)

Edit

There was some bugs in my initial answer. I believe in the updated answer all bugs are addressed. Please comment here if you think there is a problem here.

Solution 2

The currently accepted answer is incorrect. First of all, Math.tan is totally wrong -- I suspect Mohsen meant Math.atan and this is just a typo.

However, as other responses to that answer state, you should really use Math.atan2(y,x) instead. The regular inverse tangent will only return values between -pi/2 and pi/2 (quadrants 1 and 4) because the input is ambiguous -- the inverse tangent has no way of knowing if the input value belongs in quadrant 1 vs 3, or 2 vs 4.

Math.atan2, on the other hand, can use the xy values given to figure out what quadrant you're in and return the appropriate angle for any coordinates in all 4 quadrants. Then, as others have noted, you can just multiply by (180/Math.pi) to convert radians to degrees, if you need to.

Solution 3

Instead of using Math.tan function You should use Math.atan2:

Here is an example of use:

deltaX = x2 - x1;
deltaY = y2 - y1;
deg = Math.atan2(deltaY, deltaX)*180.0/Math.PI;

and this will return a degree from <-180;180>.

Comments

[Matt Stow]

Sorry, that means nothing to me :( Delta is the difference between two values? The grdient generator provides values like this: x1="0%" y1="0%" x2="56.262833675564686%" y2="68.29999651227678%" I'm assuming it's not as simple as Math.tan((56.262833675564686-0)/(68.29999651227678-0)) as that results in 1.0798259764224096 :-\

[Waleed Amjad]

deltaX would be x2-x1 and deltaY would be y2-y1. Your answer is correct however it is in radian units, you forgot to multiply by (180 / Math.PI) to get your answer in degrees

[Matt Stow]

Thank you very much to all of you :)

[Phrogz]

You should use Math.atan2 instead.

[pasx]

Using atan2 you should take into account the function discontinuity, see my answer below

[MNie]

It isn't correct answer, You should use atan2 instead of tan.

[Matt]

I see this answer has been edited (it used to say Math.tan instead of Math.atan2), but it still isn't quite right. The coordinates should be in the order (y,x) instead of (x,y)... seems silly to me too, but that's JavaScript for you. See here for documentation on Math.atan2 or my own answer for a bit more detail.

[Timothée HENRY]

I guess you meant: * (180 / Math.PI)

[bzeaman]

@tucson He could've, but it doesn't matter.

[Chris Maes]

while this is a nice widget, this doesn't add anything to any of the answers... nor does it answer the question...

[Chris Maes]

and what does this add to any of the existing answers?

[Erhard Dinhobl]

"The amount of code per answer increases with the amount of answers a stackoverflow question has" ("so-ed-1"-theorem). "The code quality decreases with the amount of answers a stackoverflow question has" ("so-ed-2"-theorem) - sorry for my sarcasm

[macrocosme]

deltaX=((a)**2)**0.5 is equivalent to deltaX = a... " **2)**0.5 " cancel each other out... What is the point?

[Imran Bughio]

What if I know the angle but want to find out the deltaX & deltaY?

[Adam Pietrasiak]

It has nothing to do with question.

[sebhaase]

It should be (180 / Math.PI);

[زياد]

@macrocosme I think he want to remove the negative value ((-1)**2)**0.5 == 1. Anyway i think it's a wrong answer.