This cheat sheet will list several common geometrical problems found in games, and how to solve them with vector math.

Complete list of basic vector operations

But first, a little review.

For this, I assume that you have a vector class readily available. This is mostly 2D-focused, but everything works the same for 3D, except for differences concerning vector product, which I will assume to return just a scalar in the 2D case, representing the “z” axis. Any case that only applies to 2D or 3D will be pointed out.

Strictly speaking, a point is not a vector – but a vector can be used to represent the distance from the origin (0, 0) to the point, and so, it is perfectly reasonable to just use vectors to represent positions as if they were points.

I expect the class to give you access to each of the components, and to the following operations (using C++ style notation, including operator overloading – but it should be easy to translate to any other language of your choice). If a given operation is not available, you can still do it manually, either by extending the class or creating a “VectorUtils” class. The examples below are usually for 2D vectors – but 3D is usually simply a matter of adding the z coordinate following the pattern of x and y.

• Vector2f operator+(Vector2f vec): Returns the sum of the two vectors. (In a language without operator overloading, this will probably be called add(). Similarly for the next few ones.)
  a + b = Vector2f(a.x + b.x, a.y + b.y);
• Vector2f operator-(Vector2f vec): Returns the difference between the two vectors.
  a – b = Vector2f(a.x – b.x, a.y – b.y);
• Vector2f operator*(Vector2f vec): Returns the component-wise multiplication of the vectors.
  a * b = Vector2f(a.x * b.x, a.y * b.y);
• Vector2f operator/(Vector2f vec): Returns the component-wise division of the vectors.
  a / b = Vector2f(a.x / b.x, a.y / b.y);
• Vector2f operator*(float scalar): Returns the vector with all components multiplied by the scalar parameter.
  a * s = Vector2f(a.x * s, a.y * s);
  s * a = Vector2f(a.x * s, a.y * s);
• Vector2f operator/(float scalar): Returns the vector with all components divided by the scalar parameter.
  a / s = Vector2f(a.x / s, a.y / s);
• float dot(Vector2f vec): Returns the dot product between the two vectors.
  a.dot(b) = a.x * b.x + a.y * b.y;
• float cross(Vector2f vec): (2D case) Returns the z component of the cross product of the two vectors augmented to 3D.
  a.cross(b) = a.x * b.y – a.y * b.x;
• Vector3f cross(Vector3f vec): (3D case) Returns the cross product of the two vectors.
  a.cross(b) = Vector3f(a.y * b.z – a.z * b.y, a.z*b.x – a.x*b.z, a.x*b.y – a.y*b.x);
• float length(): Returns the length of the vector.
  a.length() = sqrt(a.x * a.x + a.y * a.y);
• float squaredLength(): Returns the square of the length of the vector. Useful when you just want to compare two vectors to see which is longest, as this avoids computing square roots
  a.squaredLength() = a.x * a.x + a.y * a.y;
• float unit(): Returns a vector pointing on the same direction, but with a length of 1.
  a.unit() = a / a.length();
• Vector2f turnLeft(): Returns the vector rotated 90 degrees left. Useful for computing normals. (Assumes that y axis points up, otherwise this is turnRight)
  a.turnLeft = Vector2f(-a.y, a.x); 
• Vector2f turnRight(): Returns the vector rotated 90 degrees right. Useful for computing normals. (Assumes that y axis points up, otherwise this is turnLeft)
  a.turnRight = Vector2f(a.y, -a.x);
• Vector2f rotate(float angle): Rotates the vector by the specified angle. This is an extremely useful operation, though it is rarely found in Vector classes. Equivalent to multiplying by the 2×2 rotation matrix.
  a.rotate(angle) =  Vector2f(a.x * cos(angle) – a.y * sin(angle), a.x * sin(angle) + a.y * cos(angle));
• float angle(): Returns the angle that the vector points to.
  a.angle() = atan2(a.y, a.x);

Simple cases – warming up

Case #01 – Distance between two points

You probably know that this is done with the Pythagorean theorem, but the vectorial way is simpler. Given two vectors a and b:

float distance = (a-b).length();

Case #02 – Alignment

Sometimes, you want to align an image by its center. Sometimes, by its top-left corner. Or sometimes, by its top-center point. More generally, you can do alignment using a vector whose two components go from 0 to 1 (or even beyond, if you’d like), giving you full control of alignment.

// imgPos, imgSize and align are all Vector2f
Vector2f drawPosition = imgPos + imgSize * align

Case #03 – Parametric Line Equation

Two points define a line, but it can be tricky to do much with this definition. A better way to work with a line is its parametric equation: one point (“P0″) and a direction vector (“dir”).

Vector2f p0 = point1;
Vector2f dir = (point2 - point1).unit();

With this, you can, for example, get a point 10 units away by simply doing:

Vector2f p1 = p0 + dir * 10;

Case #04 – Midpoint and interpolation between points

Say you have vectors p0 and p1. The midpoint between them is simply (p0+p1)/2. More generally, the line segment defined by p0 and p1 can be generated by varying t between 0 and 1 in the following linear interpolation:

Vector2f p = (1-t) * p0 + t * p1;

At t = 0, you get p0; at t = 1, you get p1; at t = 0.5, you get the midpoint, etc.

Case #05 – Finding the normal of a line segment

You already know how to find the direction vector of a line segment (case #03). The normal vector is a 90 degree rotation of that, so just call turnLeft() or turnRight() on it!

Projections using the Dot Product

The dot product has the incredibly useful property of being able to compute the length of a vector’s projection along the axis of another. To do this, you need the vector that you’ll project (“a“) and a unit vector (so make sure that you call unit() on it first!) representing the direction (“dir“). The length is then simply a.dot(dir). For example, if you have a = (3, 4) and dir = (1, 0), then a.dot(dir) = 3, and you can tell that this is correct, because (1, 0) is the direction vector of the x axis. In fact, a.x is always equivalent to a.dot(Vector2f(1, 0)), and a.y is equivalent to a.dot(Vector2f(0, 1)).

Because the dot product between a and b is also defined as |a||b|cos(alpha) (where alpha is the angle between the two), the result will be 0 if the two vectors are perpendicular, positive if the angle between them is less than 90, and negative if greater. This can be used to tell if two vectors point in the same general direction.

If you multiply the result of that dot product by the direction vector itself, you get the vector projected along that axis – let’s call that “at” (t for tangent). If you now do a – at, you get the part of the vector that is perpendicular to the dir vector – let’s call that “an” (n for normal). at + an = a.

Case #06 – Determining direction closest to dir

Say that you have a list of directions represented as unit vectors, and you want to find which of them is the closest to dir. Simply find the largest dot product between dir and a vector in the list. Likewise, the smallest dot product will be the direction farthest away.

Case #07 – Determining if the angle between two vectors is less than alpha

Using the equation above, we know that the angle between two vectors a and b will be less than alpha if the dot product between their unit vectors is less than cosine of alpha.

bool isLessThanAlpha(Vector2f a, Vector2f b, float alpha) {
    return a.unit().dot(b.unit()) < cos(alpha);
}

Case #08 – Determining which side of a half-plane a point is on

Say that you have an arbitrary point in space, p0, and a direction (unit) vector, dir. Imagine that an infinite line goes by p0, perpendicular to dir, dividing the plane in two, the half-plane that dir points to, and the half-plane that it does not point to. How do I tell whether a point p is in the side pointed to by dir? Remember that dot product is positive when the angle between vectors is less than 90 degrees, so just project and check against that:

bool isInsideHalfPlane(Vector2f p, Vector2f p0, Vector dir) {
    return (p - p0).dot(dir) >= 0;
}

Case #09 – Forcing a point to be inside a half-plane

Similar to the case above, but instead of just checking, we’ll grab the projection and, if less than 0, use it to move the object -projection along dir, so it’s on the edge of the half-plane.

Vector2f makeInsideHalfPlane(Vector2f p, Vector2f p0, Vector dir) {
    float proj = (p - p0).dot(dir);
    if (proj >= 0) return p;
    else return p - proj * dir;
}

Case #10 – Checking/forcing a point inside a convex polygon

A convex polygon can be defined to be the intersection of several half-planes, one for each edge of the polygon. Their p0 is either vertex of the edge, and their dir is the edge’s inner-facing normal vector (e.g., if you wind clockwise, that’d be the turnRight() normal). A point is inside the polygon if and only if it’s inside all the half-planes. Likewise, you can force it to be inside the polygon (by moving to the closest edge) by applying the makeInsideHalfPlane algorithm with every half-plane. [ops, this actually only works if all angles are >= 90 degrees]

Case #11 – Reflecting a vector with a given normal

Pong-like game. Ball hits a sloped wall. You know the ball’s velocity vector and the wall’s normal vector (see case #05). How do you reflect it realistically? Simple! Just reflect the ball’s normal velocity, and preserve its tangential velocity.

Vector2f vel = getVel();
Vector2f dir = getWallNormal(); // Make sure this is a unit vector
Vector2f velN = dir * vel.dot(dir); // Normal component
Vector2f velT = vel - velN; // Tangential component
Vector2f reflectedVel = velT - velN;

For more realism, you can multiply velT and velN by constants representing friction and restitution, respectively.

Case #12 – Cancelling movement along an axis

Sometimes, you want to restrict movement in a given axis. The idea is the same as above: decompose in a normal and tangential speed, and just keep tangential speed. This can be useful, for example, if the character is following a rail.

Rotations

Case #13 – Rotating a point around a pivot

If used to represent a point in space, the rotate() method will rotate that point around the origin. That might be interesting, but is limiting. Rotating around an arbitrary pivot vector is simple and much more useful – simply subtract the pivot from it, as if translating so the origin IS the pivot, then rotate, then add the pivot back:

Vector2f rotateAroundPivot(Vector2f p, Vector2f pivot) {
    return (pos - pivot).rotate(angle) + pivot;
}

Case #14 – Determining which direction to turn towards

Say that you have a character that wants to rotate to face an enemy. He knows his direction, and the direction that he should be facing to be looking straight at the enemy. But should he turn left or right? The cross product provides a simple answer: curDir.cross(targetDir) will return positive if you should turn left, and negative if you should turn right (and 0 if you’re either facing it already, or 180 degrees from it).

Other Geometric Cases

Here are a few other useful cases that aren’t that heavily vector-based, but useful:

Case #15 – Isometric world to screen coordinates

Isometric game. You know where the (0, 0) of world is on the screen (let’s call that point origin and represent it with a vector), but how do you know where a given world (x, y) is on the screen? First, you need two vectors determining the coordinate base, a new x and y axes. For a typical isometric game, they can be bx = Vector2f(2, 1) and by = Vector2f(-2, 1) – They don’t necessarily have to be unit vectors. From now, it’s straightforward:

Vector2f p = getWorldPoint();
Vector2f screenPos = bx * p.x + by * p.y + origin;

Yes, it’s that simple.

Case #16 – Isometric screen to world coordinates

Same case, but now you want to know which tile the mouse is over. This is more complicated. Since we know that (x’, y’) = (x * bx.x + y * by.x, x * bx.y + y * by.y) + origin, we can first subtract origin, and then solve the linear equation. Using Cramer’s Rule, except that we’ll be a little clever and use our 2D cross-product (see definition at the beginning of the article) to simplify things:

Vector2f pos = getMousePos() - origin;
float demDet = bx.cross(by);
float xDet = pos.cross(by);
float yDet = bx.cross(pos);
Vector2f worldPos = Vector2f(xDet / demDet, yDet / demDet);

And now you don’t need to do that ugly find-rectangle-then-lookup-on-bitmap trick that I’ve seen done several times before.

Length

Like we’ve discussed on the previous post, the length (or magnitude) of a vector is the square root of the sum of the squares of its components. So, if you have a 3D vector, its length is sqrt(x²+y²+z²). It is often represented by writing the vector inside ||s, that is, the length of vector v is said to be |v|.

For example, if we have the vector (4,2,4), we have:

length((4,2,4)) = |(4,2,4)| = sqrt(4²+2²+4²) = sqrt(36) = 6

Application example: If you have two points, you can find the vector between them and take its length to find the distance between the points.

Multiplication by scalar

You can multiply a vector by a scalar number (that is, a real number), which results in multiplying each component of the vector by that number. For example:

(0,-2,5) * 2 = (0,-4,10)

When you multiply a vector by a scalar, its direction is unchanged, but its length is multiplied by the scalar – for that reason, this operation is also called “scaling” the vector.

Application example: If you have an object moving with a vector representing its speed, you can adjust the speed without adjusting the direction by scaling the vector.

Normalization

By combining the two previous operations, we can “normalize” a vector. A vector is said to be normalized when its length is equal to 1. Since we can multiply any vector (except for (0,0,0)) by a scalar and therefore change its length to anything we want, we can normalize any vector by multiplying it by the inverse of its length.

In other words:

n = v * (1/|v|)

For convenience, many classes implementing vectors will define a “division by scalar” operator, so you could often just do this:

n = v/|v|

Application example: If you want a vector that represents a direction without a length, you usually want to use normalized vectors. It turns out, this is extremely common, and you will encounter normalized vectors very often.

Dot Product

Possibly the single most interesting operation on vectors, the dot product is very simple and versatile. It takes two vectors and returns a scalar number as the result, according to the following formula:

(a,b,c) . (d,e,f) = a*d + b*e + c*f

So, for example:

(2,-6,-10) . (1, 0, -1) = 2*1 + (-6)*0 + (-10)*(-1) = 2 + 10 = 12

It also has a different interpretation. Given two vectors v1 and v2, and let α be the angle between the two vectors, the dot product can be defined as:

v1 . v2 = |v1| * |v2| * cos(α)

This means that the angle between the two vectors can be determined like this:

α = arc cos( (v1 . v2) / (|v1| * |v2|) )

The formula above can easily be derived by isolating α on the previous equation. If the two vectors are normalized, then their lengths are one, and the dot product is simply the cosine of the angle between them.

One consequence of the cosine relationship is that the dot product can be used to determine the relative facing of two vectors. Let d be the dot product between two NORMALIZED vectors. Then:

v = 1: the two vectors face the exact same direction
0 < v < 1: the two vectors face roughly the same direction
v = 0: the two vectors are perpendicular
-1 < v < 0: the two vectors face roughly opposite directions
v = -1: the two vectors face exactly opposite directions

If you’re not interested in v=1 and v=-1 cases, then there is no need for the vectors to be normalized.

Applications: finding angles between vectors, projecting vectors into specific axes, determining whether a vector is facing the right direction, neutralizing a vector along a given axis, etc

Cross product

Similar to the dot product, but instead of taking two vectors and producing a scalar, the vector product takes two vectors and produces a third vector. It is defined as follows:

(a,b,c) x (d,e,f) = (b*f-c*e, c*d-a*f, a*e-b*d)

Similar to the dot product, the cross product also has an angular relationship,

|v1 x v2| = |v1| * |v2| * sin(α)

It’s important to note that while the dot product is also defined for 2D vectors, the cross product is only defined for 3D vectors. However, since it has useful properties even for 2D, a pseudo vector product can be defined for 2D vectors as follows:

(a,b) x’ (c,d) = a*d-b*c

This results in a scalar that is identical to what the “z” component of the result of extending the multiplication to 3D: (a,b,0) x (c,d,0) = (0,0,z)

A very important property of the cross product is that the cross between two vectors ALWAYS results in a vector that is perpendicular to the two original vectors (unless one of them was null). This makes the vector product extremely useful for calculating surface normal vectors – assuming that you can find three points on the surface, you can create the vectors v1 = (A-B) and v2 = (A-C), then n = v1 x v2, n’ = n/|n|.

An interesting use for the cross product (in particular, the 2D version) is that it indicates which direction a vector must rotate in order to face the same direction as the other vector, by taking the shortest path. Simply take the cross product between “current facing” and “desired facing” vectors, and the sign of the number (i.e. whether it’s negative or positive) will tell you which way to turn.

Applications: Finding normal vectors, finding turn directions, calculating torque, etc

These operations are some of the most basic things you can do with vectors. They will allow you to perform more complicated and interesting computations using vectors, so make sure that you understand them. We will use them very often in following lessons.

The fifth article in this series is now available here.

Points

First, consider two points, A and B. A is located at (1, 2), and B is located at (4, 3) (If you are unfamiliar with the cartesian plane, points are represented as coordinate pairs in the form (x,y), so (1, 2) means that A is at x=1 and y=2), as shown in the following picture:

As we’ve mentioned in the previous post, positions in space can be represented as vectors. So we would have a vector A and a vector B, each representing one of the points in the figure. But points are not the SAME as vectors! A vector should always be thought of as a “delta”, it’s merely an increment. Without a reference, it’s meaningless as a position. For points, we adopt the point (0,0) as our origin (represented by the letter O), so all points can be represented as a vector from the origin. Drawing our vectors as arrows, we get this:

Consider it for a moment. If we have O=(0,0), and we add a vector A=(1,2) to it, you’ll get the point (0+1, 0+2) = (1,2), which is exactly our original point A. However, vector A by itself is merely an increment of 1 in x and an increment of 2 in y… As such, we could also represent it as:

This might all sound confusing, but don’t worry, it’ll eventually “click” into place! If you don’t fully understand the concept now, don’t worry about it.

Addition and Subtraction

What if you took vector B and subtracted A from it? From our previous lesson, we know that B – A is simply (B.x – A.x, B.y – A.y), so, given that B = (4, 3) and A = (1, 2), B-A = (3, 1). Let’s call that vector “C”. If we do A + C, we should naturally get B back: (1, 2) + (3, 1) = (4, 3). If you remember that we said that vectors are merely offsets, then this means that we can represent C as the vector that takes “A” and turns it into “B”, as in the following picture:

If you look to the axes, you’ll see that vector C (the orange vector) spans x from 1 to 4, meaning that its x component is 3 (4-1), and y from 2 to 3, meaning that its y component is 1 (3-2).

Length and Distances

The geometrical representation of vectors leads to a very intuitive way to understand one of their most important operations, length. The length of a vector (or magnitude) is simply its geometrical length! Take vector B, for example. It has a x component of 4, and a y component of 3. How can we get its length? The pythagorean theorem solves that for us: we simply take the square root of the sum of its squared components. For a 2D vector, length = sqrt(x²+y²). For a 3D vector, length = sqrt(x²+y²+z²), and so forth.

For example, the length of vector B is sqrt(3²+4²) = sqrt(25) = 5.

One immediate use for the length operation is to find distances. Say that you want to find the distance between points A and B. You subtract one from the other (order doesn’t matter), and take its length. In C++, that would look as simple as:

float distance = (a-b).length();

The reason why the order of the subtraction doesn’t matter is that (A-B) results in the opposite vector of (B-A), that is, a vector with the same length, but opposite direction. A-B results in (-3,-1), and B-A in (3,1). Both have a length of sqrt(10).

Motivation: The Ugly Code

Consider that you want to simulate some simple physics, such as an object accelerating in 3D space. We’re going to use the formulas Δs = vâ‚€t + ½·a·t² and Δv = a·t (where s is the position, vâ‚€ is the speed at the start, a is the acceleration, and t is the elapsed time). You might declare the object as something like this:

class PhysicsObject {
  public:
    float pos_x, pos_y, pos_z; // Position
    float vel_x, vel_y, vel_z; // Velocity
    float imass; // The inverse of the mass (1/m)

    void addImpulse(float force_x, float force_y, float force_z, float t) // t is time, in seconds
    {
        float halft2 = 0.5f * t * t;

        float accel_x = force_x * imass;
        float accel_y = force_y * imass;
        float accel_z = force_z * imass;

        pos_x += vel_x * t + accel_x * halft2;
        pos_x += vel_y * t + accel_y * halft2;
        pos_x += vel_z * t + accel_z * halft2;

        vel_x += accel_x * t;
        vel_y += accel_y * t;
        vel_z += accel_z * t;
    }
};

Not very pretty – there’s a lot of redundancy – whatever you do for one axis, you do for the other two. If only there was a way to do that all at once…

Enter vectors: The Pretty Code

Here’s the same code, but this time using a hypothetical 3d vector class:

class PhysicsObject {
  public:
    vector3f pos; // Position
    vector3f vel; // Velocity
    float imass; // The inverse of the mass (1/m)

    void addImpulse(vector3f force, float t) // t is time, in seconds
    {
        vector3f accel = force * imass;
        pos += vel * t + accel * (0.5f * t * t);
        vel += accel * t;
    }
};

Much shorter, isn’t it? You now have half as many lines to write, test and debug. Not only that, but they’re also simpler, and you avoid a whole class of “copy-paste but oops forgot to change a letter in one place” bugs. So, after all, what ARE these vectors? How do they work?

P.S.: If you’re using a language which does not allow you to define your own operators, the code above will get quite uglier… Java, I’m looking at you.

Defining vectors

If you go check Euclidean Vector at Wikipedia, you’ll see that it’s defined as a geometric object that has magnitude (length) and direction. For our purposes, while important to remember that definition, we’ll think of vectors as an n-tuple of a given type. In the example about, we have a 3-tuple (“a triple”) of floats. In other words, our definition would be something like this:

class vector3 {
  public:
    float x, y, z;

    inline vector3 operator + (const vector3 &param) const
    {
        return vector3(x + param.x, y + param.y, z + param.z);
    }

    inline vector3& operator += (const vector3 &param)
    {
        x += param.x;
        y += param.y;
        z += param.z;
        return *this;
    }

    inline vector3 operator * (float param) const
    {
        return vector3(x * param, y * param, z * param);
    }

    // Lots of other methods here
};

Basically, all it does (so far) is take basic arithmetic operators and apply them to 3 values, instead of just one. When you add two vectors, it adds each component – x to x, y to y and z to z. There’s also the “scale” operator, which is the multiplication by a scalar (a scalar is a non-vectorial number, like a float). When you multiply a vector by a scalar, you simply multiply all components by it. So, if you want to make your vector twice as big, just multiply it by 2.

That’s it! That’s the basic idea! Whenever you have two or more points and always want to perform the same set of operations on them, use a vector! In fact, most properties that apply to scalar numbers will also work here… If you happen to know that you need to multiply velocity by time to get a change in position, you can do that with vectors in just the same way you would with scalars.

When should you use vectors like this? Whenever it makes sense. If you’re passing along two or three values which all represent the same point, do yourself a favor and pack them in a vector. Not only will it be much harder to accidentally mix up stuff, your code will be shorter. Even if they aren’t a POSITION, they might still be represented by a vector – for example, the size of a rectangle is a vector where x is the width and y is the height. That way, if you have a vector representing the starting position of the rectangle, and a vector representing its size, you can easily find its ending position by adding them up.

But vectors are far more powerful than this. On the next article, we’ll explore other common operations done on them, such as length, normalization, dot product and cross product. You wouldn’t believe me if I told you just how damn useful those can be.

But don’t despair! Even though I say “math”, what you ACTUALLY need is geometry. Luckily for us, geometry is probably the easiest part of mathematics! Now, I’m not saying that discrete mathematics, algebra and calculus are useless for writing games (or other sorts of programs), but geometry is the bread and butter of video game programmers.

An interesting thing that I did notice is that, despite my previous assertion, many game programmers do not actually know much geometry! This means that they’ll often do things in extremely laborious, buggy and verbose ways, when it could very easily be done with some basic grasp of geometry. For example, if you want to place several objects along an arc of circle, you COULD do it through trial and error, or place it in an image editing program (like Photoshop) and copying the coordinates, but it will be much easier if you simply use a parametric equation.

So I intend to write a few posts to explain, as clearly as I can, some topics that are important to game programming. These are the topics that I intend to cover:

• Vectors
• Parametric Equations
• Vector bases
• Basic Trigonometry
• Matrices
• Complex Numbers
• Quaternions

While there are many basic and in-depth tutorials of all of the above topics on the Internet, explanations as to why the matter to game programmers and how to use them seem to be scarce, or left as an exercise to the reader. My goal is to make those topics easy to understand and put into use.