Monday, 27 April 2015

2D Vector Tutorial - Part 4, Vectors and Angles 2

In the previous tutorial, we looked at:

  • How we can turn an angle and magnitude to a vector
  • How a normalised vector's X an Y components are the same as the Cosine and Sine of the angle of the direction its pointing in.

Now, we're going to look at doing the reverse - finding the angle when we know the X and Y vector components.

Finding the Angle
Given we now know that a normalised vector's X an Y components are the same as the Cosine and Sine of the angle of the direction its pointing in, do we really need to know the angle? We can pass the vector components to other functions to replicate the vector, which is quicker than working it all out again.

Well, occasionally we may - for example if we are providing directional feedback via a bearing to a player, theyre not going to know what what way theyre going if we say "-0.707,-0.707". They will have an idea if we say "225 degrees"

Now, finding the angle isn't as easy as finding the vector components for X and Y. We can't simply use an inverse Sine function (the opposite of Sine function) on its own, as that will only give us the angle of the right angled triangle we are working with, not the total angle for our direction.

Yeah, that sounds confusing.

Try this:

  • look up the Cosine of 45 degrees
  • look up the Cosine of 315 degrees

Interestingly, they give us the same answer: 0.7071067812

This is because:

Cosine values run from +1 to 0 to -1, and back again
Sine values run from 0 to +1, then down to -1, then back to 0

Test a few angles out between 0 and 359 degrees and see for yourself.

Now, lets go back our previous example:

We know this is an angle of 225 degrees (fig 1).

fig 1

It is also an angle of 45 degrees moving up and left, measured from the X axis (fig 2)

fig 2

So, how can we get the total angle? I've found this method to be relatively straightforward and not too math heavy.


The first thing to note is that when you find the X or Y component of a vector, the resulting figure will either be positive or negative.

This effectively gives us four quadrants (fig 3).

fig 3

Each quadrant runs slightly different ranges of X an Y values, as follows:

Quadrant 1
X runs from 1 to 0
Y runs from 0 to 1

Quadrant 2
X runs from 0 to -1
Y runs from 1 to 0

Quadrant 3
X runs from -1 to 0
Y runs from 0 to -1

Quadrant 4
X runs from 0 to 1
Y runs from -1 to 0

Finding the Quadrant

So to find our quadrant, simply look at the normalised X and Y components of our vector and get whether each is positive or negative (known as the sign).

Using our previous example:

fig 4

Nx is negative
Ny is negative

This puts us in Quadrant 3 (top left)

Getting our Quadrant Angle

The next thing to do is convert the Nx and Ny values to positives (known as an absolutes), and find the inverse function of each, which will give us an angle between 0 and 90 degrees. 
Remember that the inverse function will convert from the Cosine or Sine value, to an angle.


Nx = -0.7071067812
Ny = -0.7071067812

making them absolute gives us

Nx = 0.7071067812
Ny = 0.7071067812

Using your scientific calculator find the angle using inverse functions: 

  • for the x axis this would be Acos (value), ArcCosine (value) or Cos-1(value)
  • for the y axis this would be Asin (value), ArcSine (value) or Sin-1(value)

You should find that the angle for both the x and y components will be the same.

Angle = Cos-1(Nx)
Angle = Sin-1(Ny)

substituting our values:

Angle = Cos-1(0.7071067812)
Angle = Sin-1(0.7071067812)

In both cases the angle is 45 degrees.

You could include a selfcheck in your code at this point to make sure that both angles are the same before proceeding.

Try a few other values to see for yourself it works.

Getting the Total Angle

Each quadrant has a slightly different formula associated with it, which will give us the total angle.

Also, given that the inverse function of either of x or y components gives us the same angle, we can simplify things and only use one - it doesnt matter which, but use the same throughout so you don't get confused.

Here I'll be using the inverse function result from the x component (Cos-1).


Quadrant 1
Total Angle = Cos-1(Nx)

Quadrant 2
Total Angle = 180 - (Cos-1(Nx))

Quadrant 3
Total Angle = ((Cos-1(Nx)) - 180) + 360

Quadrant 4
Total Angle = 360 - (Cos-1(Nx))

Lets continue with our example from above.

Nx = -0.7071067812
Ny = -0.7071067812

as both values are negative, we know this puts us in Quadrant 3.

The formula for Quadrant 3 is:

Total Angle = ((Cos-1(Nx)) - 180) + 360
                     = ((Cos-1(0.7071067812)) - 180) + 360
                     = ((45) - 180) + 360
                     = (-135) + 360
                     = 225 degrees

To do a quick double check, find the Cosine and Sine of 225 degrees.

Cosine (225) = -0.7071067812
Sine (225) = -0.7071067812

which is the same as our Nx and Ny values (the normalised x and y components of our example vector)

In Summary:

  • get the normalised x and y components of the vector
  • find the quadrant using the signs of the x and y components of the vector
  • make the x and y components of the vector positive (absolute)
  • get the inverse function of each component ( Cos-1 and Sin-1 ) to get the angle
  • apply the relevant formula for the quadrant you're in to get the total angle

Hopefully that makes some sense!

Next we will be looking at Dot Products

Continued in Part 5, Dot Products (coming soon)

No comments:

Post a Comment