2D Vector Tutorial - Part 1, Vectors

OK, I promised I'd put one together, so while its fresh in my mind - here goes.

While going through learning this myself, I found the many definitions to be confusing, and difficult to translate into what I wanted / could understand. Everything I found was really heavy on what looked like incomprehensible formula and mathematical jargon, so I'll try and unpick things and present them in as simple a way as I can.

Assumptions:

Note that this does assume some familiarity withpythagoras theorem, square roots and squaring numbers. If you're not familiar, you may wan't to brush up on those topics first. 

It also uses 2D co-ordinates that assume the top left corner of a screen is 0 , 0 ( Zero on the X axis, Zero on the Y axis). This is the case in languages such as GL Basic and the Blitz family, I'm not familiar with others, so you may have to tweak things to suit whatever language you are using.

So, first off:

What is a Vector?

The mathmatical definition is as follows:

a quantity (such as velocity) that has size and direction

a vector

This is represented by an arrow - the length being the quantity (also known as the length, size or magnitude), and the way its pointing is the direction.

Yeah, that helps a little, but how does it translate into doing stuff in 2D in a computer game?

I tend to think of these vector components as follows:

Magnitude - the total length of the vector as an absolute (positive) number.

Direction - this is represented by two variables.

• X - The length of the vector on the horizontal axis (left / right)
• Y - The length of the vector on the vertical axis (up / down)

vector components

It should be noted that these variables (x and y) can be positive or negative in value.

This gives us a vector that consists of 3 component parts.

Finding Vector components in 2D

So, how do we actually find the three component parts of our vector?

We need two things, a start point (or origin point), and an end point.

Both the origin and end points of our vector will have x and y coordinates, and we can use these to find the direction (X and Y), and Magnitude.


Getting The Direction

Lets have a vector that starts at coordinates ( x , y ) 100,100 on screen, and finishes at 50,50. (fig 1)

fig 1

This gives us 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

To get our vector lengths on each axis, we simply subract the origin point value from the endpoint value, so we get the following (fig 2):

X = Ex - Ox . Using values X = 50 - 100, which results in X = -50

Y = Ey - Oy . Using values Y = 50 - 100, which results in Y = -50

fig 2

This not only tells us the length of the vector in each axis, but its direction as well.

In our example the direction is up and left from the origin point, as noted by the negative values of X and Y.

• Negative values on the X axis mean we are moving left.
• Negative values on the Y axis mean we are moving up.
• Positive values on the X axis mean we are moving right.
• Positive values on the Y axis mean we are moving down.

We now have the direction of our vector, and need to find its total length (the Magnitude).

Getting The Direction

To find the Magnitude of our vector we need to use pythagoras theorem.

From our previous calculations, we already have the vector lengths we need in the x and y axes, and using these gives us a right angled triangle (fig 2).

We can now use these values in pythagoras theorem, like so:

Vector Magnitude = √ ( X² + Y² )

This means that the total vector length is equal to the square root of X squared added to Y squared.
( √ is the mathematical symbol for square root, ² is the symbol for squaring a value. )

It can be simplified a little further, as squaring a value simply means multiplying it by itself, which gives us the following:

Magnitude = √ ( (X * X) + (Y * Y) )

Using our values above this gives us:

Magnitude = √ ( (-50 * -50) + (-50 * -50) )

                  = √ ( (2500) + (2500) )

                  = √ ( 5000 )

                  = 70.7107 rounded to 4 places

Note that the values in brackets are calculated individually first.

So, our vector has the following three components to describe it (fig 3):

X = -50

Y = -50

Magnitude = 70.7107

fig 3

This is how we will calculate our vector components to use later.


Continued in Part Two - Normalising Vectors