Building a 2D Vector Type

Distance

As we covered earlier, the distance formula lets us calculate the distance between two points or, equivalently, two vectors:

If we have two vectors, $A$ and $B$, the distance between them can be calculated as follows:

This is the geometric equivalent of constructing a right-angled triangle from our two input vectors, and then calculating the length of the hypotenuse of that triangle:

Let’s add this as a function to our struct:

1// Vec2.h
2// ...
3
4struct Vec2 {
5  // ...
6
7  float GetDistance(const Vec2& Other) const {
8    return std::sqrt(
9      std::pow(x - Other.x, 2) +
10      std::pow(y - Other.y, 2)
11    );
12  }
13};

Scalar Multiplication and Division

To multiply a vector by a scalar (a simple number, like an int or a float), we just multiply every component by that scalar. For example, multiplying a vector by $2$ looks like this:

A math expression like $2 \times A$ is typically abbreviated to just $2A$.

The geometric effect of scalar multiplication of a vector is to return a vector that has the same direction, but a different length:

The most natural way to allow our Vec2 objects to be multiplied by scalars is to overload the * and / operators, allowing us to write expressions like SomeVector * 2. We covered operator overloading in more detail in our introductory course:

Operator Overloading

This lesson introduces operator overloading, a fundamental concept to create more intuitive and readable code by customizing operators for user-defined types

Let’s use this to allow Vec2 objects to be multiplied by a float, or other scalar types that are convertible to a float:

1// Vec2.h
2// ...
3
4struct Vec2 {
5  // ...
6
7  Vec2 operator*(float Multiplier) const {
8    return Vec2 {
9      x * Multiplier,
10      y * Multiplier
11    };
12  }
13};

Scalar division works in the exact same way. We need to add a check to ensure we’re not trying to divide by zero. Depending on our needs, we may want to implement some appropriate error handling or reporting in this scenario. For now, we’ll just return a {0, 0} vector if someone tries to divide by zero using this operator:

1// Vec2.h
2// ...
3
4struct Vec2 {
5  // ...
6
7  Vec2 operator/(float Divisor) const {
8    if (Divisor == 0.0f) {
9      return Vec2{0, 0};
10    }
11
12    return Vec2 {
13      x / Divisor,
14      y / Divisor
15    };
16  }
17};

Compound Assignment: *= and /=

Let’s implement the compound assignment versions of scalar multiplication: *= and scalar division: /=.

For example, if we have a vector A whose current value is {1, 2}, an expression like A *= 2 should update the value to be {2, 4}.

An additional important point is that these operators should return a reference to the vector. This is to allow the operations to be used in more complex expressions:

1#include <iostream>
2#include "Vec2.h"
3
4int main() {
5  Vec2 MyVec{1, 2};
6  (MyVec *= 4) /= 2;
7  std::cout << MyVec.x << ", " << MyVec.y;
8}

12, 4

As such, we’ll set the return type of our operator to be a Vec2&, which is a reference to a Vec2. We’ll return the reference to the vector our operator was called on using the this pointer:

1// Vec2.h
2// ...
3
4struct Vec2 {
5  // ...
6
7  Vec2& operator*=(float Multiplier) {
8    x *= Multiplier;
9    y *= Multiplier;
10    return *this;
11  }
12};

We covered the this operator and compound assignment operators in more detail in our introductory course:

The this Pointer

Learn about the this pointer in C++ programming, focusing on its application in identifying callers, chaining functions, and overloading operators.

Let’s implement the /= operator in the same way. Again, we’ll add a check to ensure we’re not trying to divide by zero:

1// Vec2.h
2// ...
3
4struct Vec2 {
5  // ...
6
7  Vec2& operator/=(float Divisor) {
8    if (Divisor == 0.0f) {
9      return *this;
10    }
11    
12    x /= Divisor;
13    y /= Divisor;
14    return *this;
15  }
16};

1// The left operand cannot be const as this function
2// modifies it
3Vec2& operator*=(Vec2& Left, float Right) {
4  // Modify Left
5}
6
7// This function does not modify the left operand so
8// we should mark it as const
9Vec2 operator*(const Vec2& Left, float Right) {
10  // Return a new vector
11}

Unary Negation

The operators we’ve overloaded so far are binary - that is, they take two operands, a left and a right. A unary operator takes only a single operand. The increment (++) and decrement (--) operators are likely to be the unary operators you’re most familiar with.

However, the most important unary operator for vectors is the simple -, sometimes called the unary negation operator. We’re likely familiar with how this works with simple numbers. For example, if x is the integer 10, the expression -x will return -10.

Unary negation also applies to vectors - we simply return a vector with every component negated. Visually, we can imagine it returning a vector with the same magnitude, but in the opposite direction:

Let’s add it to our struct:

1// Vec2.h
2// ...
3
4struct Vec2 {
5  // ...
6
7  Vec2 operator-() const {
8    return Vec2 {-x, -y};
9  }
10};

Addition and Subtraction

For vector addition and subtraction, we simply add or subtract the corresponding components:

Visually, addition is like attaching the "start" of one vector to the "end" of the other, and then returning the new vector generated by that combination:

The order of the operands doesn’t matter for vector addition, as $A + B$ will have the same result as $B + A$:

For subtraction, we position the "start" of our two vectors together, and then construct and return the result of comparing their two "ends".

The operand order does matter for subtraction. $A - B$ and $B - A$ will have the same magnitude but will point in opposite directions. In other words, if $A - B = C$, then $B - A = -C$

Let’s add addition and subtraction to our struct:

1// Vec2.h
2// ...
3
4struct Vec2 {
5  // ...
6
7  Vec2 operator+(const Vec2& Other) const {
8    return Vec2 {
9      x + Other.x,
10      y + Other.y
11    };
12  }
13
14  Vec2 operator-(const Vec2& Other) const {
15    return Vec2 {
16      x - Other.x,
17      y - Other.y
18    };
19  }
20};

Compound Assignment: += and -=

We can implement the compound assignment variations of addition and subtraction in the normal way:

1// Vec2.h
2// ...
3
4struct Vec2 {
5  // ...
6
7  Vec2& operator+=(const Vec2& Other) {
8    x += Other.x;
9    y += Other.y;
10    return *this;
11  }
12
13  Vec2& operator-=(const Vec2& Other) {
14    x -= Other.x;
15    y -= Other.y;
16    return *this;
17  }
18};

Commutative Operations

A commutative operation is one where the order of operands does not matter. For example, we usually think of multiplication as commutative, as $A \times B$ is equivalent to $B \times A$.

This is true of basic numbers, but multiplication is not commutative for all types and, by default, C++ assumes that the operators we define are not commutative.

As such, our previous overloading of the * operator supports Vec2 * float expressions, but it doesn’t support float * Vec2.

1#include "Vec2.h"
2
3int main() {
4  Vec2 A{1.0, 2.0};
5  A * 2.0;
6  2.0 * A; 
7}

1error C2677: binary '*': no global operator found which takes type 'Vec2' (or there is no acceptable conversion)

When working with vectors, it happens to be the case that scalar multiplication is commutative - that is Vec2 * float and float * Vec2 are equivalent. So, we can implement the float * Vec2 variation using the same logic we had for Vec2 * float.

Given that the left operand will be a float, we’re overloading the * operator for the float type rather than for the Vec2 type. As such, this overload cannot be a Vec2 member function - rather, we need to define a free function.

But even though we can’t define it as part of the Vec2 struct, we’d want it close to our existing Vec2 code to keep our project organized. In this case, we’ll define it in the Vec2.h header file, right after the Vec2 struct:

1// Vec2.h
2// ...
3
4struct Vec2 {
5  // ...
6};
7
8inline Vec2 operator*(float M, const Vec2& V) {
9  return Vec2{V.x * M, V.y * M};
10}

Advanced: The inline Keyword

In the previous example, we’re fully defining a free function within a header file. This can be a problem once that header file is included in multiple source files, as we’d then have duplicate definitions of this function in those source files. We can solve this by applying the inline keyword to our function definition.

The inline keyword allows duplicate definitions of a function or variable as long as those definitions are identical. In this context, the definitions within our source files will be identical, as they all come from the same header file via #include directives.

Functions defined within a struct or class definition are implicitly inline, so we don’t need to apply this keyword to our Vec2 methods.

We cover the inline keyword in more detail in our advanced course:

Internal and External Linkage

A deeper look at the C++ linker and how it interacts with our variables and functions. We also cover how we can change those interactions, using the extern and inline keywords

Reusing Operators

When we’re adding a full suite of operators to our custom types, there are usually opportunities to make our lives easier by writing some operators in terms of other, existing operators.

Commutative operations are the prime candidates for this. For example, if Vec2 * float is equivalent to float * Vec2, we can fully implement one of them, and then have the other simply call that implementation by reordering the operands. So, our previous function can be simplified to this:

1// Vec2.h
2// ...
3
4struct Vec2 {
5  // ...
6};
7
8inline Vec2 operator*(float M, const Vec2& V) {
9  // Before:
10  return Vec2{V.x * M, V.y * M};
11  
12  // After:
13  return V * M;
14}

There are more opportunities to apply similar techniques. For example, let’s imagine we’re trying to implement the binary - operator, to support expressions such as A - B. We can rewrite this A - B expression into an equivalent expression that does not use the binary - operator.

For example, we can write it using binary + operator and unary - operator instead:

This is useful if our custom type already has the binary + operator and unary - operator, as we can now reuse them to create our binary - operator:

1// Vec2.h
2// ...
3
4struct Vec2 {
5  // ...
6
7  Vec2 operator-(const Vec2& Other) const {
8    // Before:
9    return Vec2 {
10      x - Other.x,
11      y - Other.y
12    };
13    
14    // After:
15    return *this + (-Other);
16  }
17};

We can take similar shortcuts with other operators. For example, A -= B is equivalent to A += (-B), so our -= operator can be written as:

1// Vec2.h
2// ...
3
4struct Vec2 {
5  // ...
6
7  Vec2& operator-=(const Vec2& Other) {
8    // Before:
9    x -= Other.x;
10    y -= Other.y;
11    return *this;
12    
13    // After:
14    return *this += (-Other);
15  }
16};

We can also rewrite our GetDistance() function in terms of the binary - operator and the GetLength() method. This a bit less obvious and may require some consideration.

The key realization is that getting the distance between two vectors is equivalent to subtracting one from the other, and getting the length of this new vector. So, the distance between $A$ and $B$ is equivalent to the length of $A - B$:

Applying this logic to our GetDistance() function might look like this:

1// Vec2.h
2// ...
3
4struct Vec2 {
5  // ...
6  
7  
8  float GetDistance(const Vec2& Other) const {
9    // Before:
10    return std::sqrt(
11      std::pow(x - Other.x, 2) +
12      std::pow(y - Other.y, 2)
13    );
14    
15    // After:
16    return (*this - Other).GetLength();
17  }
18};

It’s useful to be on the lookout for when operators or methods can be written in terms of operators and methods we already have. This is particularly helpful when writing operators and methods that are more complicated, as reusing existing functionality can significantly reduce the amount of code we need to write and maintain.

Overloading the << Operator

Finally, let’s allow our Vec2 objects to easily be streamed to the console, using the << operator. We covered this topic in more detail in our beginner course:

Overloading the << Operator

Learn how to overload the << operator, so our custom types can stream information directly to the console using std::cout

The key point is that, in an expression like std::cout << MyVector, the std::cout object is the left operand rather than our vector. As such, rather than overloading the << operator for our Vec2 type, we instead need to overload it for std::cout's type, which is std::ostream:

1// Vec2.h
2#pragma once
3#include <iostream>
4// ...
5
6struct Vec2 {
7  // ...
8};
9
10inline std::ostream& operator<<(
11  std::ostream& Stream, const Vec2& V
12) {
13  Stream << "{ x = " << V.x
14    << ", y = " << V.y << " }";
15  return Stream;
16}

Let’s see our overload in action:

1#include <iostream>
2#include "Vec2.h"
3
4int main() {
5  Vec2 MyVec{1, 2};
6  std::cout << MyVec;
7}

1{ x = 1, y = 2 }

Complete Vec2 Struct

With all our changes in place, our Vec2 struct looks as follows. We’ll reuse this type regularly through the remaining lessons, so it’s helpful to have a complete version:

1#pragma once
2#include <iostream>
3#include <cmath>
4
5struct Vec2 {
6  float x;
7  float y;
8
9  float GetLength() const {
10    return std::sqrt(x * x + y * y);
11  }
12
13  float GetDistance(const Vec2& Other) const {
14    return (*this - Other).GetLength();
15  }
16
17  Vec2 operator*(float Multiplier) const {
18    return Vec2{x * Multiplier, y * Multiplier};
19  }
20
21  Vec2 operator/(float Divisor) const {
22    if (Divisor == 0.0f) { return Vec2{0, 0}; }
23
24    return Vec2{x / Divisor, y / Divisor};
25  }
26
27  Vec2& operator*=(float Multiplier) {
28    x *= Multiplier;
29    y *= Multiplier;
30    return *this;
31  }
32
33  Vec2& operator/=(float Divisor) {
34    if (Divisor == 0.0f) { return *this; }
35
36    x /= Divisor;
37    y /= Divisor;
38    return *this;
39  }
40
41  Vec2 operator+(const Vec2& Other) const {
42    return Vec2{x + Other.x, y + Other.y};
43  }
44
45  Vec2 operator-(const Vec2& Other) const {
46    return *this + (-Other);
47  }
48
49  Vec2& operator+=(const Vec2& Other) {
50    x += Other.x;
51    y += Other.y;
52    return *this;
53  }
54
55  Vec2& operator-=(const Vec2& Other) {
56    return *this += (-Other);
57  }
58
59  Vec2 operator-() const {
60    return Vec2{-x, -y};
61  }
62};
63
64inline Vec2 operator*(float M, const Vec2& V) {
65  return V * M;
66}
67
68inline std::ostream& operator<<(
69  std::ostream& Stream, const Vec2& V) {
70  Stream << "{ x = " << V.x
71    << ", y = " << V.y << " }";
72  return Stream;
73}

Summary

Vector mathematics forms the foundation of computer graphics, game physics, and simulation. In this lesson, we've built a complete Vec2 struct capable of representing positions, movements, and forces in a 2D space.

Through operator overloading, we've created an intuitive interface that allows vector operations to be written with natural syntax like addition and multiplication. Key takeaways:

• Vectors are useful for representing positions, movements, directions, and forces in game development
• The Vec2 struct uses operator overloading to provide intuitive syntax for vector operations
• Vector operations include addition, subtraction, scalar multiplication, and finding lengths/distances
• Properly implementing const correctness can make our code more robust and reduce the probability we introduce bugs in the future
• Reusing operators by implementing some in terms of others reduces code duplication
• The inline keyword helps us avoid duplicate definition errors when implementing free functions in headers
• Overloading stream operators enables easy debugging by allowing vectors to be printed

With our Vec2 implementation complete, we now have a tool that will serve as the foundation for the graphics and physics systems we'll develop throughout the rest of the course.