Vectors

Vectors are the most crucial part of nearly any game, they are used for a lot of things. Some examples:

Location of the player
Rays (they are basically a position and direction)
Physics (for example the velocity of a bullet)

To define vectors more thoroughly we first have to define scalars which are just ordinary numbers like 1.0. These scalars have a magnitude but no direction. In contrast, vectors have both a magnitude and a direction. A vector is nothing more than a set of these scalars, for example (1.0, 2.0) is a 2D vector with the x component set to 1.0 and y set to 2.0.

Vectors come in many dimensions, in games we commonly use 2D, 3D and 4D variants. We’re going to look at a code example for a 3D vector, as all of the operations we are interested in are defined for the third dimension. We will explain all the vector operations in detail, for now try to follow along with the comments. Pick your favorite programming language below to follow along with the code:

python
cpp

import math

class Vector:
    def __init__(self, *args):
        # Find out from the given input how to set our values
        if len(args) == 0:
            self.values = [0,0,0]
        elif len(args) == 1:
            self.values = args[0]
        else: 
            self.values = list(args)
        # Make sure we have floating point values
        self.values = [float(x) for x in self.values]

# Setters for the properties: also make sure we have float values
    def setx(self, x): self.values[0] = float(x)
    def sety(self, y): self.values[1] = float(y)        
    def setz(self, z): self.values[2] = float(z)     
        
    # Define some properties so we can use Vector.x
    x = property(lambda self: self.values[0], setx)
    y = property(lambda self: self.values[1], sety)
    z = property(lambda self: self.values[2], setz)
	
    # Pretty print our values
    def __str__(self):
        return str(self.values)
    
    # Add another vector: just add the individual values
    def __add__(self, other):
        return Vector([self.values[i] + other.values[i] for i in range(3)]) 
    
    # Subtract another vector: call our add function but negate the values
    def __sub__(self, other):
        return self.__add__(-other)
    
    # Negate: invert all the values
    def __neg__(self):
        return Vector([x * -1 for x in self.values])
    
    # Multiply: call the dot product
    def __mul__(self, other):
        return self.dot(other)
        
    # The vector dot product, sum of the corresponding elements multiplied with each other
    def dot(self, other):
        result = 0.0
        for i in range(3):
            result += self.values[i] * other.values[i]
        return result
    
    # Remember Pythagoras?
    def length(self):
        # The dot product of a vector with itself returns the sum of all elements squared
        return math.sqrt(self.dot(self))
    
    # Create a unit vector from this vector (set the vector length to 1)
    def normalize(self):
        length = self.length()
        self.values = [x / length for x in self.values]

# The cross product is only defined for 3D vectors
    def cross(self, other):
        return Vector(self.y * other.z - self.z * other.y, self.z * other.x - self.x * other.z, self.x * other.y - self.y * other.x)

v = Vector(1, 2, 3)
v.x = 4
v += Vector(0, 0, 1)
print("Vector v: " + str(v))
print("Negate operation: " + str(-v))

print("length of v: " + str(v.length()))
print("dot product of v with itself: " + str(v * v))
v.normalize()
print("v normalized: " + str(v))
print("length of v: " + str(v.length()))

x = Vector(1, 0, 0)
y = Vector(0, 1, 0)
z = Vector(0, 0, 1)
print("Parallel dot product: " + str(x * x))
print("Perpendicular dot product: " + str(x * y))
print("Cross product of x and y: " + str(x.cross(y)))
print("Cross product of y and x: " + str(y.cross(x)))

#include <math.h>
#include <stdio.h>

// Define the struct with the 3 scalars
struct Float3
{
    Float3(float x, float y, float z) : x(x), y(y), z(z) {}
    Float3(float a) : x(a), y(a), z(a) {}
    Float3() : x(0), y(0), z(0) {}
    float x, y, z;
};

// Negate: simply return the inverse of all components
inline Float3 operator-(const Float3 &a)
{
    return Float3(-a.x, -a.y, -a.z);
}
// Subtract: subtract all components individually
inline Float3 operator-(const Float3 &a, const Float3 &b)
{
    return Float3(a.x - b.x, a.y - b.y, a.z - b.z);
}
// Add: add all components individually
inline Float3 operator+(const Float3 &a, const Float3 &b)
{
    return Float3(a.x + b.x, a.y + b.y, a.z + b.z);
}
// Multiply: multiply all components individually
inline Float3 operator*(const Float3 &a, const Float3 &b)
{
    return Float3(a.x * b.x, a.y * b.y, a.z * b.z);
}
// Divide: divide all components individually
inline Float3 operator/(const Float3 &a, const Float3 &b)
{
    return Float3(a.x / b.x, a.y / b.y, a.z / b.z);
}
// The vector dot product, sum of the corresponding elements multiplied with each other
inline float Dot(const Float3 &a, const Float3 &b)
{
    return a.x * b.x + a.y * b.y + a.z * b.z;
}
// Remember Pythagoras?
inline float Length(const Float3 &a)
{
    // The dot product of a vector with itself returns the sum of all elements squared
    return sqrtf(Dot(a, a));
}
// Create a unit vector from this vector (set the vector length to 1)
inline Float3 Normalize(const Float3 &a)
{
    float len = 1.0f / Length(a);
    return Float3(a.x * len, a.y * len, a.z * len);
}
// The cross product is only defined for 3D vectors
inline Float3 Cross(Float3 a, Float3 b)
{
    return Float3(a.y*b.z - a.z*b.y, a.z*b.x - a.x*b.z, a.x*b.y - a.y*b.x);
}

int main()
{
    Float3 v = Float3(1, 2, 3);
    v.x = 4;
    v = v + Float3(0, 0, 1);
    printf("Vector v: (%.2f, %.2f, %.2f)\n", v.x, v.y, v.z);
    Float3 n = -v;
    printf("Negate operation: (%.2f, %.2f, %.2f)\n", n.x, n.y, n.z);

printf("length of v: %.2f\n", Length(v));
    printf("dot product of v with itself: %.2f\n", Dot(v, v));
    v = Normalize(v);
    printf("v normalized: (%.2f, %.2f, %.2f)\n", v.x, v.y, v.z);
    printf("length of v: %.2f\n", Length(v));
    
    Float3 x = Float3(1, 0, 0);
    Float3 y = Float3(0, 1, 0);
    Float3 z = Float3(0, 0, 1);
    printf("Parallel dot product: %.2f\n", Dot(x, x));
    printf("Perpendicular dot product: %.2f\n", Dot(x, y));
    Float3 c = Cross(x, y);
    printf("Cross product of x and y: (%.2f, %.2f, %.2f)\n", c.x, c.y, c.z);
    c = Cross(y, x);
    printf("Cross product of y and x: (%.2f, %.2f, %.2f)\n", c.x, c.y, c.z);
};

For both programming language we’re using something called operator overloading. This simply means that we’re implementing what should happen when we call an operator for the class. For example in Python we use _add_ to define what happens when we use the + operator on a vector. In C++ the same thing can be done by defining the operator+ function.

The first couple of operator overloads we wrote are the simple operations:

Add
Subtract
Negate

In the following example we make one vector $a$ and one vector $b$. We can then use these vectors to create a new vector $a+b$. By using $-b$ we can also create $a-b$. In the following example we will draw out all these vectors to form two triangles. Tweak the values of $a$ and $b$ in the editor to get a different result!

Length

The length of a vector can be calculated using Pythagoras theorem. Since all of the components are their own axis, we can always form a right-angled triangle. To calculate the length we need to get all the components squared. In the code example above we’ve used the dot product as a tool for this. As we will see in the next section, the dot product returns the product of the components. So if we use the dot product of a vector with itself, we have the sum of all components squared. Finally taking the square root of the resulting value will leave us with the length.

Normalize

Normalizing is a very common operations on vectors. The idea is that we set the magnitude or length of the vector exactly to one. That will leave us with a vector that only has direction. We call this resulting vector a unit vector. We can easily get this unit vector by dividing every component by the length of the vector.

Dot product

The dot product is defined by adding the products of the individual components of the two vectors as follows:

$$a \cdot b = a_x b_x + a_y b_y + a_z b_z$$

The resulting value will be a scalar. The most important property to know about the dot product is that we can use it to determine the angle between two vectors. We can use the following definition use the dot product to get an angle:

$$a \cdot b = |a| |b| cos \theta$$

In this second formula we see that the dot product results in the magnitude of both vectors multiplied by the cosine of the angle (in radians). We can make this property really useful to just retrieve the angle if we have two unit vectors. In this case the magnitude of both vectors is equal to $1$ so we’re left with only the cosine of the angle. In the next example we’ll see this relationship illustrated by moving a vector.

#include <stdio.h>
#include "Drawing.h"
#include "Input.h"
#include "canvas_main.h"

float rad = 0;
int w = 500;
int h = 500;
Canvas c(w, h);

void DrawLineWithText(Float2 p1, Float2 p2, const char* text, const char* color, Float2 offset)
{
    DrawLine(c, p1, p2, color, 3);
    DrawText(c, (p1 + p2) / 2 + offset, text, color);
}

void DrawCosineGraph(Float2 offset, Float2 size)
{
    c.beginPath();
    c.setStrokeStyle("yellow");
    float x2 = offset.x;
    float y2 = offset.y + size.y;
    c.moveTo(x2, y2);
    for (int i = 0; i < 51; i++)
    {
        float radians = i / 50.0f * 2 * PI;
        float x = i / 50.0f * size.x;
        float y = cosf(radians) * 0.5f * size.y;
        c.lineTo(offset.x + x, offset.y + size.y * 0.5f + y);
        x2 = x;
        y2 = y;
    }
    c.stroke();
}

void setup() {}

void loop(double t, double dt)
{
    rad += dt;
    
    ClearCanvas(c, w, h, "rgb(35, 36, 37)");
    // Draw some axes +
    DrawLine(c, Float2(0, 150), Float2(w, 150), "gray", 1);
    DrawLine(c, Float2(w*0.5f, 0), Float2(w*0.5f, h), "gray", 1);
    DrawLine(c, Float2(0, 300), Float2(w, 300), "gray", 5);
    DrawLine(c, Float2(0, 400), Float2(w, 400), "gray", 1);
    DrawCosineGraph(Float2(0, 310), Float2(500, 180));
    
   	// Our vectors
    Float2 center = Float2(250, 150);
    Float2 a = Float2(75, 0);
    Float2 b = Float2(cosf(rad), sinf(rad)) * 75;
    float d = Dot(Normalize(a), Normalize(b));
    
    Float2 p1 = center;
    Float2 p2 = p1 + a;
    Float2 p3 = p1 + b;
    
    DrawLineWithText(p1, p2, "a", "green", a * 0.7f);
    DrawLineWithText(p1, p3, "b", "red", b * 0.7f);
    DrawDisc(c, center, 7, "black");
    
    c.setStrokeStyle("white");
    c.beginPath();
    c.arc(center.x, center.y, 55, b.y < 0 ? -acosf(d) : 0, b.y < 0 ? 0 : acosf(d));
    c.stroke();
    
    char degrees[4];
    std::snprintf(degrees, 4, "%.0f", acosf(d) * 180 / PI);
    DrawText(c, center + Float2(55, -20), degrees, "white");
    
    float x = acosf(d) / PI;
    p1 = Float2(250 + 250 * (b.y > 0 ? -x : x), 400);
    p2 = Float2(p1.x, p1.y - 90 * d);
    char buffer[6];
    std::snprintf(buffer, 6, "%.2f", d);
    DrawLineWithText(p1, p2, buffer, "white", (p2 - p1) * 0.6f);
}

Cross product

Unlike the dot product, the cross product returns a vector instead of a scalar. The resulting vector $v$ is perpendicular to both input vectors $a$ and $b$:

$$a \times b = (a_y b_z - a_z b_y\;, a_z b_x - a_x b_z\;, a_x b_y - a_y b_x)$$

This property is why the cross product is used most often: to create a perpendicular vector. Similar to the dot product, the magnitude of the resulting vector is scaled according to the length of the input vectors:

$$|a \times b| = |a| |b| sin \theta$$

There are a couple of important edge cases to account for: when $a$ and $b$ are completely parallel or inverse, the resulting vector will be (0, 0, 0).

#include <stdio.h>
#include "Drawing.h"
#include "Input.h"
#include "canvas_main.h"

float rad = 0;
int w = 500;
int h = 500;
Canvas c(w, h);
Camera camera(Float3(2.5f), Float3(0, 0, 0), Float2(w, h), 50);

void setup() {}

void loop(double t, double dt)
{
    ClearCanvas(c, w, h, "rgb(35, 36, 37)");
    DrawLine(c, camera.Project(Float3(-3, 0, 0)), camera.Project(Float3(3, 0, 0)), "gray", 1);
    DrawLine(c, camera.Project(Float3(0, -3, 0)), camera.Project(Float3(0, 3, 0)), "gray", 1);
    DrawLine(c, camera.Project(Float3(0, 0, 0)), camera.Project(Float3(0, 0, 3)), "gray", 1);
    DrawLine(c, camera.Project(Float3(0, 0, 0)), camera.Project(Float3(1, 0, 0)), "gray", 3);
    DrawLine(c, camera.Project(Float3(0, 0, 0)), camera.Project(Float3(0, 1, 0)), "gray", 3);
    DrawLine(c, camera.Project(Float3(0, 0, 0)), camera.Project(Float3(0, 0, 1)), "gray", 3);
	DrawText(c, camera.Project(Float3(1.2f, 0, 0)), "x", "gray");
	DrawText(c, camera.Project(Float3(0, 1.2f, 0)), "y", "gray");
	DrawText(c, camera.Project(Float3(0, 0, 1.2f)), "z", "gray");
    
    rad += dt;
    if (Input::mouseX != 0 || Input::mouseY != 0)
    {
        Float2 pos = Float2(Input::mouseX / w, Input::mouseY / h) * (PI / 2);
        Float3 t = Float3(1, 1, sinf(pos.y));
        Float3 cameraPos = Float3(
            t.x * cosf(pos.x) - t.y * sinf(pos.x),
            t.x * sinf(pos.x) + t.y * cosf(pos.x),
            t.z);
       	cameraPos *= 2.5f;
        camera.SetPosition(cameraPos);
    }
    
    Float3 a = Float3(cosf(rad), sinf(rad), 0);
    Float3 b = Float3(0, 1, 0);
    Float3 cross = Cross(a, b);
    
    DrawLine(c, camera.Project(Float3(0)), camera.Project(a), "green", 3);
    DrawLine(c, camera.Project(Float3(0)), camera.Project(b), "red", 3);
    DrawLine(c, camera.Project(Float3(0)), camera.Project(cross), "blue", 3);
    DrawText(c, camera.Project(a * 1.1f), "a", "green");
	DrawText(c, camera.Project(b * 1.1f), "b", "red");
	DrawText(c, camera.Project(cross * 1.1f), "c", "blue");
    char buffer[5];
    std::snprintf(buffer, 5, "%.2f", Length(cross));
    DrawText(c, Float2(260, 260), buffer, "white");
}

That’s most of the practical stuff you should know about vector math that you need regularly in games. Below is an example of the 2D vector library being used in C++ for all the editors above:

 1#include <math.h>
 2
 3struct Float2
 4{
 5    Float2(float x, float y) : x(x), y(y) {}
 6    Float2(float a) : x(a), y(a) {}
 7    Float2() : x(0), y(0) {}
 8    float x, y;
 9};
10
11inline Float2 operator-(const Float2 &a)
12{
13    return Float2(-a.x, -a.y);
14}
15inline Float2 operator-(const Float2 &a, const Float2 &b)
16{
17    return Float2(a.x - b.x, a.y - b.y);
18}
19inline Float2 operator-(const Float2 &a, const float b)
20{
21    return Float2(a.x - b, a.y - b);
22}
23inline Float2 operator-(const float a, const Float2 &b)
24{
25    return Float2(a - b.x, a - b.y);
26}
27inline Float2 operator+(const Float2 &a, const Float2 &b)
28{
29    return Float2(a.x + b.x, a.y + b.y);
30}
31inline Float2 operator+(const Float2 &a, const float b)
32{
33    return Float2(a.x + b, a.y + b);
34}
35inline Float2 operator+(const float a, const Float2 &b)
36{
37    return Float2(a + b.x, a + b.y);
38}
39inline Float2 operator*(const Float2 &a, const Float2 &b)
40{
41    return Float2(a.x * b.x, a.y * b.y);
42}
43inline Float2 operator*(const Float2 &a, const float b)
44{
45    return Float2(a.x * b, a.y * b);
46}
47inline Float2 operator*(const float a, const Float2 &b)
48{
49    return Float2(a * b.x, a * b.y);
50}
51inline Float2 operator/(const Float2 &a, const Float2 &b)
52{
53    return Float2(a.x / b.x, a.y / b.y);
54}
55inline Float2 operator/(const Float2 &a, const float b)
56{
57    return Float2(a.x / b, a.y / b);
58}
59inline Float2 operator/(const float a, const Float2 &b)
60{
61    return Float2(a / b.x, a / b.y);
62}
63inline void operator-=(Float2 &a, Float2 b)
64{
65    a.x -= b.x;
66    a.y -= b.y;
67}
68inline void operator+=(Float2 &a, Float2 b)
69{
70    a.x += b.x;
71    a.y += b.y;
72}
73inline void operator*=(Float2 &a, Float2 b)
74{
75    a.x *= b.x;
76    a.y *= b.y;
77}
78inline void operator/=(Float2 &a, Float2 b)
79{
80    a.x /= b.x;
81    a.y /= b.y;
82}
83inline float Dot(const Float2 &a, const Float2 &b)
84{
85    return a.x * b.x + a.y * b.y;
86}
87inline float Length(const Float2 &a)
88{
89    return sqrtf(Dot(a, a));
90}
91inline Float2 Normalize(const Float2 &a)
92{
93    float len = 1.0f / Length(a);
94    return Float2(a.x * len, a.y * len);
95}

2024-11-22

Vectors

Length

Normalize

Dot product

Cross product