In the previous page we learned a little bit about Vectors and what they are (quick quiz: Do vectors have a position? No! That’s going to be important again in a minute, so pardon me while I harp on it). As I pointed out, you probably were using something as a vector even if you didn’t intend to by expressing the movement of some object in a game based on how far it moves on the X and Y axis each time it moves.

If that’s all a Vector was good for, what’s the point of them? Good question! Fortunately, that’s not all they’re good for. In this page we’re going to cover some simple vector basics, complete with little arrow diagrams and such, which point out things you can do with them. Like vectors themselves, even if you didn’t realize that you were using vectors to do something, these are things that you might have already realized are possible.

Reverse the direction of a vector

Lets say that you have a vector that points in some direction at some particular length and it represents a monster in a game running directly towards you so that it can give you a big, warm hug. However, you don’t like hugs, so you pull out an anti-hug device (i.e. pointy stick). Now the monster is scared of you and wants to run away instead. How do you make a vector that is the exact opposite direction?

Intuitively, you might think that if a monster was moving (for example) some amount up and to the right in order to get to you, it should move the same amount down and to the left to get away from you. Intuition to the rescue, that’s exactly how you do that!

Remembering always that vectors do not contain any actual position information, notice how simply reversing the sign of both the X and Y components (down instead of up, left instead of right, etc) that make up a vector cause it to flip directions. That’s handy!

Add vectors together

So now the monster is running away from your anti-hug stick. However, you have previously deployed a monster magnet (an item, not the band) that is designed to pull monsters towards itself and thus slow them down. You flick the switch on your handy magnet activation device (MAD) and it starts to pull on the monster. How does that affect how the monster is moving?

Thinking logically, you could say that first the monster should move to the position where its vector tells it that it should be (represented with the green vector), then the magnet pulls it closer to itself (represented with the red vector). Alternatively, you could say that first the magnet pulls the monster and then it walks.

In order to visualize a Vector Addition, you can arrange the two vectors in a head-to-tail fashion (because they of course have no position information) in order to better see what the final result of this would be if it was just a single vector:

Doing this in two steps, it is easy to see that the result of this operation is the same as moving first along one vector, and then along the other. Since a vector is just an offset from one location to another, we can easily derive the notion that to add vectors together, all you have to do is add up the components of each one:

Notice also that no matter which way you add these two vectors together, you still end up with the same result; much like in “regular” math, vector addition is commutative. That’s a fancy word that means “you get the same answer no matter what order you do things in”.

Subtracting vectors

Subtracting vectors works the way you would expect it to; subtract the components of each vector. This can be a bit harder to visualize in your head, though. What exactly does it look like to go to a position that’s not quite the end of one vector and not quite the end of the other? Here’s one way to think of it:

One way to perform a subtraction is to flip the sign of the value that you want to subtract and then add it instead:

So to visualize what a vector subtraction would look like, all you have to do is “flip the sign” of the vector that you are subtracting and then add them. Fortunately, thanks to some text I wrote a few minutes ago, we know that if you “flip the sign” of a vector, it retains its length but points in the opposite direction instead. Therefore, to visualize a vector subtraction, all you have to do is flip the direction of the second vector, arrange them head-to-tail with each other, and see what falls out.

We can see that if you subtract the red vector from the green vector, you end up with the orange vector; conversely if you subtract the green vector from the red vector, you end up with the blue one. Unlike addition, subtraction is NOT commutative; the order matters! You end up with a vector whose magnitude is correct, but the direction may be reversed if you “get the order wrong”.

This also shows that if you just draw the two vectors with their tails originating from the same point, the result of the vector subtraction is the vector between the heads of the two vectors. Here’s the same diagram as before, only with a brand new purple dashed line to illustrate this.

Of course, which end of this vector is the head and which is the tail depends on what order you go in.

Vector Scaling

For the last topic we will go over in this page of basics, lets talk about scaling a vector; i.e. make it longer or shorter while retaining its direction.This is useful for a variety of purposes: you could make the vector longer when something is moving faster or shorter when it should move slower, for example.

Once again, our friend intuition may be of help here. If my monster is moving in some direction and I want to get to a position exactly two times as fast, every time I would have moved one unit, I should move two instead. Similarly, if I want to move twice as slow, every time I would have moved one unit, I should instead move 1/2 a unit.

By drawing the vectors out, we can in fact see that simply multiplying both components of the vector by some quantity, we make them both grow the same amount. By remembering our basic trigonometry, we know that the direction of the vector (really the hypotenuse of a right triangle) is at some angle that is the ratio of the other two sides of the triangle. So, by modifying them both by the same amount, the ratio is maintained. This makes the magnitude of the vector change but keeps the direction the same.

Also remember that dividing by a number is the same as multiplying by it’s reciprocal  so this trick can be used to scale a vector down instead of up (e.g. to make it 1/2 as long).

The number that you multiply by here is called a scalar. On the whole, that’s not terribly important unless you’re a gigantic math nerd, in which case you would tend to think of a scalar as a value that only has a magnitude but does not have a direction (like a vector does, for example). I’ll also point out that just like a vector, a scalar has no position! However, that’s pretty obvious and I’m just saying that because It’s been a few paragraphs since I harped on the notion of a vector not having a position.

That’s is for the basics of vector math. In the next chapter, we move on to more complex uses for vectors, which is where they really begin to shine! You know, if you don’t already think that they’re pretty glossy.