Jump to content

  • Log In with Google      Sign In   
  • Create Account

How does tan work exactly?

Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
6 replies to this topic

#1 littletray26   Members   -  Reputation: 267


Posted 27 March 2013 - 11:51 PM

So I've been looking for a way to get a sprite to rotate and face my cursor, and I came across this:


You wan't a sprite to point towards the mouse pointer?

If that is the case you would probably need a algorithm to calculate it. It would depend on the location of the sprite as much as of the mouse pointer.

Let´s say the rotation 0 is straight up then that should be the case when it has the same X as mouse and Y is bigger.

The math here would be, assuming:

pos is position of sprite
mouse is position of mouse

DeltaY = mouse.Y - pos.Y
DeltaX = mouse.X - pos.X

rotation = tan^-1(DeltaY / DeltaX)


Now I understand that it works, but I'm wondering if one of you fine people can help me understand why it works. I'm not that great at  math, but I take every chance I can to improve. I need to understand the concept behind tan, and inverse tan, so I can apply it to any other problems I might face that would require it.


Thanks smile.png


Just to clarify, I know what tan is. Tan = opposite / adjacent. I know you feed tan the angle, and it returns o/a but why is o/a needed? What is it used for? and I don't know what inverse tan is at all.

Edited by littletray26, 28 March 2013 - 01:11 AM.

The majority of Internet Explorer users don't understand the concept of a browsing application, or that there are options.
They just see the big blue 'e' and think "Internet". The thought process usually does not get much deeper than that.

Worms are the weirdest and nicest creatures, and will one day prove themselves to the world.

I love the word Clicky :)


#2 Aressera   Members   -  Reputation: 1311


Posted 28 March 2013 - 01:24 AM

You're better off not using any trig functions and using transformation matrices instead, try this:

Vector2 v = (mousePosition - spritePosition).normalize();
Vector2 w = { v.y, -v.x };

Matrix2x2 m =
v.x, w.x
v.y, w.y


This should produce proper rotation if your sprite has a rotation of 0 degrees when facing down the X axis. Swap the columns if 0 degrees is facing down the Y axis. You can then take that matrix and use it for the upper-left 2x2 section of a standard 4x4 identity transformation matrix to get a matrix that can be sent to graphics hardware.


What it's doing is computing the rotated x axis (the vector v), then computing a vector perpendicular to v (the vector w) using the 'perp' product (2D cross product analogue). This forms the basis for a rotated coordinate system which can be directly converted to matrix form.


As for your original question, the inverse tangent is a way of computing one of the acute angles of a right triangle with a hypotenuse slope of (DeltaY / DeltaX), where DeltaX and DeltaY are the lengths of the legs of the right triangle. If you invert the expression, inv_tan(DeltaX / DeltaY) gives you the other acute angle. Basically it converts a slope (Dy/Dx) to an angle relative to the X axis. The regular tangent does the opposite, converts an angle to a slope (rise over run).

Edited by Aressera, 28 March 2013 - 01:26 AM.

#3 turch   Members   -  Reputation: 590


Posted 28 March 2013 - 08:05 AM

ok, so tan(angle x) = opp / adj

In the image below, tan(x) = 2/1


tan^-1 is the inverse of tan, so if you have the angle, tan(angle) gives you the ratio, and if you have the ratio, tan^-1(ratio) gives you the angle.

In the image below, tan^-1(2/1) = ~1.107 rads (~63.5 deg)





So you have the setup in the image below. Subtracting the position of the image from the mouse gives you the length of the two sides. You then divide them to get the ratio, and pass that to tan^-1 to get the angle (in radians).




The sin and cos formulas work the same but are used when you have the hypotenuse and one of the shorter sides.


There's also sin^-1 and cos^-1, they are also known as arcsine, arccosine, and arctan (asin/acos/atan).

#4 Álvaro   Crossbones+   -  Reputation: 11891


Posted 28 March 2013 - 08:22 AM

It should be mentioned that the slope doesn't contain the information as to which side the mouse is on, right or left. So when you take the atan(slope) you'll get the same answer for two opposite sides. Then there is the issue of dividing by zero if the line is vertical. There is a function atan2 to which you pass the two coordinates before dividing them and that one does return the correct angle in all cases.

The paragraph above doesn't mean that I condone using angles for these kinds of things. You should use vectors (the way Aressera described), or complex numbers (which are almost the same thing but make it easier to do rotations).

#5 Steve_Segreto   Crossbones+   -  Reputation: 1470


Posted 28 March 2013 - 10:15 PM

First you get some sun, then you get a tan :)

#6 Crowley99   Members   -  Reputation: 178


Posted 29 March 2013 - 06:58 PM

First you get some sun, then you get a tan :)

Tsk, tsk. Don't you know that puns about trigonometry are a sin? Why? 'Cos I said so!

#7 Paradigm Shifter   Crossbones+   -  Reputation: 5132


Posted 29 March 2013 - 08:22 PM

Sinh a light (talking hyperbolics there, sorry). I prefer the old "What's purple and commutes? An Abelian grape!" joke myself though.

"Most people think, great God will come from the sky, take away everything, and make everybody feel high" - Bob Marley

Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.