Of vital importance in 3D games, but also very important for a variety of purposes in 2D gaming, Vector math is another one of those branches of Geometry that you may or may not remember from math class (or Physics class). If you’re like me, you remember that they look like little arrows and that they’re probably important, but if someone was to ask you to help them with something vector related, you would excuse yourself to go to the bathroom and then slide out the window and run away. OK, maybe that’s just me.

Vector math is a big enough topic that in the interests of minimizing eye glazing as much as possible, we’re going to break this down into smaller, more manageable chunks. In this first page, we’ll cover some simple vector basics.

Geometrically, a vector is a quantity that has two properties: a direction and a length (aka magnitude). If you were to draw a picture of one, it would look like an arrow. This is something that we’re probably all familiar with even if we don’t realize that what we’re looking at is a vector.

The first thing to really drive home here is that vectors do not convey any positional information. Although we’ve drawn the vectors on a grid, the position means nothing; all three of these vectors are equal. When you see an image of a vector, it’s probably an explanatory image meant to illustrate something that is happening. In that case it is often easier to follow what’s going on if the vector is drawn in a position that makes things clearer, but that does not mean that it actually has a position.

Always remember: A Vector has only a direction and a length (magnitude). The three vectors are equal because they all have the same length and are pointing at the same angle.

The proper way to represent a vector is via a column matrix. However, that would require a whole other discussion about matrices and the math of them, which takes away from our game development time. So instead, we’re going to represent our vectors in a manner that makes them look like a point, because that makes them appear as if they have a position, even though they don’t. Laziness Math is awesome!

For the vectors above, we would represent them as:

The “correct” way is the column vector, represented in the square brackets. The more common way is the second form. Here the superscript T indicates that this is actually a column matrix that is being represented as a row matrix and that it should be Transposed when you work with it; however, unless you’re a rigid math nerd, you’ll probably forget to do that all the time. I know I do.

So, what do the values of a vector actually mean, then? Looking closer, what we’re actually seeing is a displacement from one point to another. This is probably something that you’re familiar with even if you don’t realize that this is a vector. This thing is moving FROM one place TO another place. 

If you’ve ever done anything game related with something that moves (even something as simple as Pong), you’ve used a vector without realizing it. Do you have variables named xSpeed and ySpeed that say how much the ball moves? Those are the two parts of a 2D vector! This is also why we tend to write a vector out as a point; it’s an offset of some amount on the X-axis and another amount on the Y-axis. This is also the reason that we tend to visualize a vector as starting at the origin point.

So how do you determine from an X and a Y value what the properties of a vector are? Remember a little thing called the Pythagorean Theorem and Trigonometry? You might notice that the arrow of a vector looks a little bit like the hypotenuse of a right triangle, with the X component showing how wide the base is and the Y value showing how tall it is.

Given this, it should be pretty easy to determine the properties of the vector:

• The length/magnitude of the vector is calculated using the distance formula (i.e. pythagoras)
• The direction can be calculated using the tangent function of the two parts of the vector (i.e. trigonometry)

As shown in the image, knowing that the X displacement (green arrow) is 4 and the Y displacement (red arrow) is 3, we can do a little math and determine that the vector v_b has a magnitude of 5 and a direction of ~36.87°. Neat! I’ve left the actual math of that as an exercise to you. Make sure I’m not lying. (Also, don’t allow your inherent knowledge of 3-4-5 triangles to prejudice you).

It’s important to remember at this juncture that the tangent function has some caveats in this case:

• The tangent ratio is undefined for vertical lines (if you forget why, check back on the trigonometry page)
• The sign of the values factors into the ratio and thus the angle but the tangent function doesn’t take that into account. For example, if this vector was facing in the other direction (-4, -3) the ratio would still be 0.75.

The solution here is to pay attention to when the X value is 0 and to the sign of the values to make sure you calculate the angle correctly. A pro tip is that if your language/tool/library has an atan2 function, it does that for you; instead of giving it the calculated tangent ratio, you give it the two values and it does all the heavy lifting for you.

Pop quiz time! What properties does a vector have?

If you said “Why kind math nerd, it has both a defined length and it points in a direction, but it most certainly does not convey any position information whatsoever even though we often refer to the two numeric components of it as an X and Y value much like we would a point!” Then congratulations, you passed the quiz! Also you might have some personality quirks. I bet we’d get along famously!

That’s all for the basics of vectors! Normally I would put some potential uses for this knowledge in an actual game development context, but at this point they’re the same as the ones we’ve already covered; it’s just a different way to think about how far apart two things are and what angle they are from each other.

Up next, even more vector math!