2D Vector Tutorial - Part 3, Vectors and Angles 1

So far we have looked at the following:

Part 1 - Vectors
Part 2 - Vector Normalisation

Here in Part 3 we are going to depart a little from just talking directly about vectors, because I want to explore the relationship between normalised vectors and angles.

If youre not familiar with what we've looked at so far, go and have a read of the previous parts first, then come back.

So, where to start?

Angles, Circles, Sine and Cosine

Lets look at how you draw a circle in 2D on a screen. We shall be using degrees as the unit of measure for our angles, as I don't want to confuse folks with talking about doing stuff in radians.

As you probably know, a dircle can be divided into 360 parts - each part is called a degree. When measuring we start at 0 degrees, and move clockwise around the circle.

The first thing to note is that within GL Basic (and Blitz if I recall correctly), 0 degrees is directly to the right of the centre of the circle - not directly above as you would probably expect. So everything we do from now on will be on that basis.

Ok, lets make a circle and give it a centre point (the origin) on screen at (x and y) of 100,100.
Lets also give it a radius (the distance from the centre to the edge) of 50 pixels (fig 1).

fig 1

Now, knowing that 0 degrees is directly to the right of the origin point, lets draw a line from the origin to the edge (fig 2).

fig 2

Looks remarkably like a vector, doesnt it?

However, we dont have the same information we used in part 1, so we can't calculate the vector components in the same way.

We know the following:

Ox = 100 (centre point of the circle on the x axis)
Oy = 100 (centre point of the circle on the y axis)
Magnitude = 50 (the radius of the circle, distance from the centre to the edge)
Angle = 0

We dont know the end point on the x or y axes though.

As humans, we could work it out simply by looking at the diagram and saying "hey, the vector is to the right, so lets add our radius to the x axis only and get the end point."

A computer can't do that without you telling it how to. So, how do we tell it how to do that?

By using Sine and Cosine functions.

To find the end point of our vector we need to use the magnitude of the vector and the angle its pointing in, and add the result to the origin point coordinates.

What you need to note here is that the result on the X axis is found using the Cosine of the angle, and the result of the Y axis is found using the Sine of the angle.

We can use the following formula to do this:

X = Magnitude * Cosine (Angle)
Y = Magnitude * Sine (Angle)

Lets substitute some of our figures into those formula. (Use a scientific calculator or the calculator on Windows in scientific mode to get these)

X = 50 * Cosine ( 0 )
    = 50 * 1
    = 50

Y = 50 * Sine ( 0 )
    = 50 * 0
    = 0

And if we add those to our origin point coordinates, we get our endpoint coordinates.

Ex = Ox + X
     = 100 + 50
     = 150

Ey = Oy + Y
     = 100 + 0
     = 100

And if we subtract the origin point coordinates from the end point coordinates (as we did in part 1), we get the the vector components as follows:

X = 50
Y = 0
Magnitude = 50

In other words, if we know the magnitude and the angle, we can work out the difference between the origin and end points on the X and Y axes without working out the endpoint and sutbracting the origin point.

which means:

X = Ex - Ox is the same as X = Magnitude * Cosine (Angle)

Y = Ey - Oy is the same as Y = Magnitude * Sine (Angle)

So we now have two ways of getting that information.

What happens if we normalise it? Remember that to normalise a vector using the above components we need to divide by the magnitude, as follows:

Nx = X / Magnitude
      = 50 / 50
      = 1

Ny = Y / Magnitude
      = 0 / 50
      = 0

Now thats interesting. Our nomalised vector component on each axis is the same as the Cosine & Sine of the angle the vector is pointing in.

Nx = 1 is the same as Cosine (0)
Ny = 0 is the same as Sine (0)

Another Example

Taking our example we have been working with previously in parts 1 and 2, we know the following:

Origin point on X axis (Ox) = 100

Origin point on Y axis (Oy) = 100

End point on X axis (Ex) = 50

End point on Y axis (Ey) = 50

X = -50

Y = -50

Magnitude 70.71067812

Normalised : 

Nx = -0.7071067812

Ny = -0.7071067812

Nmagnitude = 1

fig 3

If we measure that angle (clockwise from 0 degrees, which is pointing right) we know the angle is 225 degrees.

fig 4

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

the same as :

Nx = -0.7071067812

Ny = -0.7071067812

Try a few others out for yourself to get the hang of it.

Now, unfortunately its a bit harder to convert back to angles, so we will cover that in the next part.

Continued in Part 4, Vectors and Angles 2