The Intuition Behind Rotation Matrices

If you’re a game developer then you’ve probably, at some point, had to make an object spin. In your quest to rotate said object, you’ve undoubtedly come across the following matrix:

\begin{bmatrix} \cos(\theta) & -\sin(\theta) \\ \sin(\theta) & \cos(\theta) \end{bmatrix}

In this article, I’ll be diving into how exactly this matrix functions. I’ll be discussing the 2D rotation matrix but, as you’ll see, the 3D rotation matrix works in the exact same way and doesn’t require any new mathematical knowledge to be able to create or understand it.

To understand what the matrix is doing, we first need to understand what an actual point in 2D space represents. Consider the point (5, 3). As we know, this point represents a displacement of 5 units in the x-direction and 3 units in the y-direction.

But what exactly are the x and y directions?

Whenever you specify a point in space, it is always in the context of a coordinate system whose axes are represented by basis vectors. A 2D coordinate system is represented by two basis vectors (one for x and one for y), a 3D coordinate system is represented by three basis vectors (one for x, one for y, and one for z), etc. Typically when dealing with coordinates, we don’t think about the basis at all. This is because we usually default to using the standard basis – the basis where the x-axis is represented by the vector (1, 0) and the y-axis is represented by (0, 1).

To get the actual location of a point in a given coordinate system, we multiply each component of the point by the basis vector representing the corresponding axis. So for the point (5, 3) in the standard basis, we’d multiply 5 by (1, 0) and 3 by (0, 1). This gives us (5, 3) – the exact same point we had before.

But what if we were using a different basis? What if, say, the x and y axes were rotated by 30 degrees counter-clockwise?

diagram1

In this case, the x and y components of (5, 3) represent a displacement of 5 units along the rotated x axis and 3 units along the rotated y-axis. To calculate the resulting point, we multiply the components of (5, 3) by the new basis vectors. This would give us the value of (5, 3) rotated 30 degrees around the origin!

Why? Because if you rotate a coordinate system, everything inside of it gets rotated as well:

diagram3

Multiplying the components of (5, 3) by the rotated basis vectors tells you what (5, 3) in the new, rotated coordinate system resolves to in the original coordinate system with the standard basis.

This is essentially what the rotation matrix is doing – it’s rotating the x and y axes that you are using to interpret the point. When you perform the multiplication, you’re using the rotated basis vectors to calculate what the same coordinates in the rotated coordinate system represent in the original coordinate system (via displacement of x and y units along the respective basis vectors).

Let’s take a look at the rotation matrix again:

\begin{bmatrix} \cos(\theta) & -\sin(\theta) \\ \sin(\theta) & \cos(\theta) \end{bmatrix}

The columns of the matrix represent the x and y axes, respectively, of the rotated space. When you multiply the matrix by a point, the result is actually equivalent to multiplying each component by the corresponding basis vector (in the formula below (x_0, y_0) is the rotated basis vector for the x-axis and (x_1, y_1) is the rotated basis vector for the y-axis):

\begin{bmatrix} x_0 & x_1 \\ y_1 & y_1 \end{bmatrix} \begin{bmatrix} 5 \\ 3 \end{bmatrix} = 5\begin{bmatrix}x _0 \\ y_0 \end{bmatrix} + 3\begin{bmatrix}x_1 \\ y_1 \end{bmatrix}

This is equivalent to moving 5 units in the new x-direction and 3 units in the new y-direction.

Anyway, all of this begs the question: why does the rotation matrix represent the axes of the rotated space?

This question can be answered by some simple trigonometry. Recall these trigonometric identities for right triangles:

\sin(\theta) = \frac{opposite}{hypotenuse}

\cos(\theta) = \frac{adjacent}{hypotenuse}

We can apply these identities to figure out the new vectors for the x and y axes. As you can see below, the rotated vector for the x-axis is at (\cos(30), \sin(30)) and the rotated vector for the y-axis is at -(\sin(30), \cos(30)) .

diagram2

o is opposite, a is adjacent. The denominator is 1 because the basis vectors are unit vectors (they have a magnitude of 1).

We now know the basis vectors for the rotated coordinate system. As we saw before, these vectors become the columns of the rotation matrix. And when you multiply the rotation matrix by a vector representing a point that you want to rotate, it is equivalent to multiplying each component of that point by the corresponding basis vector (due to the properties of matrix multiplication), giving you the rotated point.

So your final matrix for rotating by 30 degrees counter-clockwise around the origin is:

\begin{bmatrix} \cos(30) & -\sin(30) \\ \sin(30) & \cos(30) \end{bmatrix}

Multiplying by this matrix is equivalent to interpreting the multiplied point in a rotated coordinate system. You’re basically answering the question, “what would the point (5, 3) in this rotated coordinate system represent in the standard basis?”

3D rotation works the exact same way, except you also factor in the z-axis when creating your matrix and figuring out your basis vectors. And other transformations, such as scaling and translation, can be thought of in a similar way – you’re essentially modifying the coordinate system that you’re using to interpret your positions. So scaling by 2 is the same as doubling the basis vectors, resulting in x and y vectors of (2, 0) and (0, 2),  and then interpreting all points as displacements of (x, y) units along these new axes.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s