Game Design: Intro to Vector Projections Part I
These days, we take a lot of things for granted. In terms of website design, we expect pages to look a certain way, and we forget that there is a lot of code behind simple functionality. For games, we expect game components to react a certain way (eh, eh, see what I did there?) that reflect what would happen in the natural world. We expect a character to be able to jump and fall, a ball to bounce in a predictable direction, sound to be softer or louder depending on where we are in relation to something else, etc…
In a past project, my partner and I decided to experiment with a simple bounce game. Along the way, we learned a lot about vanilla javascript, rails as an API, canvas, and collision data. I decided to dig into the uses of vector projection in game applications, but if you’d like to learn more about collision data, you can check out my partner’s blog.
Let’s get started.
Problem: We want a ball to hit a block and to bounce off at the expected, reflected angle.
A ball is moving in a certain direction and we want it to switch direction after making contact with a block. This sounds like vectors!
WHAT IS A VECTOR?
A vector looks a bit like a line segment or ray, but it has two important properties — direction and magnitude (size). A two-dimensional vector can be written as <a,b> or ai+bj. If shown graphically, the result is a vector that starts at the origin and ends at point (a,b).
DIRECTION & MAGNITUDE
Let’s say you have the vector <4,4>. For every 4 spaces that it moves to the right, it also moves up 4 spaces.
You can describe the direction like this, or you can use the angle it makes with the x-axis, which you can find by using basic trig functions.
To find the magnitude (length), we’re actually using a formula related to the pythagorean theorem.
ANGLE BETWEEN VECTORS
Let’s say that we had a block that we hit straight on. In this example, the block is represented by a <2,-2> vector (imagine the endpoint starting at the origin).
Here, it makes sense just from looking at it that the ball would simply switch direction and the new vector would be <-4, -4> (again, imagine moving the starting point at the origin). Instead of going up 4 for every 4 it goes to the right, it will now go down 4 for every 4 it goes to the left. This is because the vector is hitting the block at a 90 degree angle.
To find the angle between two vectors, we can use the following formula.
Here, when we “multiply” two vectors (the left side of the above equation), we are actually finding their dot product, which means that we multiply corresponding parts and add them together. The |a| and |b| represent the magnitude of each vector.
For our example,
If we plug these values into the previous equation, we get:
Then, we can isolate cos(x) and solve for x:
Thus, we’ve proven our angle is 90 degrees.
ORTHOGONAL/NORMAL VECTORS
OK, so how does this help us find the direction that we need to go after hitting a block at a different angle? For that, we need to use vector projections.
As a prerequisite to vector projections, we also need to be able to find an orthogonal/normal vector of the block (a fancy way of saying we need to find a vector that is perpendicular to the block).
In order for two vectors to be perpendicular, their dot product must equal 0. In the above example, where the two vectors formed 90 degrees, the vectors are orthogonal. Going back to middle school algebra, two lines are perpendicular if their slopes are opposite reciprocals (ex: 2 and -1/2). Since slope is represented by “rise over run”, and vectors really represent how far something goes to the left/right and up/down, we can use this to easily find the direction of an orthogonal vector.
Ex. Let’s say we have a vector that is <4,5>. The “slope” of this vector would be 5/4, so the “slope” of the perpendicular (orthogonal) vector would be -4/5. We can represent this as the vector <5, -4>
VECTOR PROJECTIONS
A vector projection finds the vector that is going in the same direction as the original vector, but is scaled down to where it hits the normal vector that connects with the second vector.
In the example above, vector a is being projected onto vector b, which results in vector a1. In the equation below, b̂ indicates a unit vector in the direction of b.
Phew — that was a lot to take in! I’ll be writing a brief summary as to how you can incorporate these vectors into your game design in my next blog, Game Design: Intro to Vector Projections Part II!
