I’ve been doing a lot of matrix and graphics programming for the first time in my career and it’s been tough. So I’m killing two birds with one stone here: creating a reference that even I can follow, and learning the material by teaching it.

👩‍🏫 Basic math

Here’s a quick referesher on the basics of trigonometry and linear algebra that you will need to understand. Skip to Rotation if you still remember all this.

Trig

The important aspects of trig for our purposes can be summarized in the following 3 diagrams.

The most important takeaway is that $\cos\theta$ and $\sin\theta$ are equal to $x$ and $y$ respectively when $r=1$ (the unit circle). This means that for any polar coordinates $(r, \theta)$, the cartesian coordinates are $x = r\cos\theta$ and $y=r\sin\theta$.

Linear algebra

Matrix multiplication is most of what we need. Let’s do a simple 2x2 x 1x2 matrix.

$$\begin{bmatrix} 1 & 2 \\ 3 & 4 \end{bmatrix} \times \begin{bmatrix} 10 \\ 11 \end{bmatrix}$$

First we do the dot product of the first row with the first column of the second ($\vec{a}\cdot\vec{b}$).

$$1 * 10 + 2 * 11 = 32$$

Then the dot product of the second row with the first column.

$$3 * 10 + 4 * 11 = 74$$

This gives us a final result.

$$\begin{bmatrix} 1 & 2 \\ 3 & 4 \end{bmatrix} \times \begin{bmatrix} 10 \\ 11 \end{bmatrix} = \begin{bmatrix} 32 \\ 74 \end{bmatrix}$$

Check out this animation for another explanation.

Identity matrix

One more important concept is the identity matrix. The identity matrix will result in the same matrix when multiplied, so it’s a good starting point to not change things you don’t want changed with multiplying matrices together.

Identity matrices always have 1s down the diagonal, so the identity matrix for 2D transforms is:

$$\begin{bmatrix} 1 & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{bmatrix}$$

🔄 Rotation

Everybody starts with Translation, but I’m starting with rotation because that’s more interesting. Once you have rotation down, translation is a 🍰.

The goal is to express $(x', y')$ as a function of:

• The original position $(x, y)$
• An angle $θ$
• A point that we’re rotating around. For this exercise we will start rotating around the origin $(0, 0)$

We can define x and y in terms of their polar coordinates, ie. their rotation ($\alpha$) around the origin from $(0, 0)$

$$x = r\cos(\alpha) \\ y = r\sin(\alpha)$$

And we can define $(x', y')$ in terms of their differences from x & y.

$$x' = r\cos(\alpha - \theta) \\ \downarrow \\ x' = r\cos\alpha\cos\theta + r\sin\alpha\sin\theta \\$$ $$y' = r\sin(\alpha - \theta) \\ \downarrow \\ y' = r\sin\alpha\cos\theta - r\cos\alpha\sin\theta$$

Now… look at x and y and the expanded x', y'. You can see a simple substition to get:

$$x' = x\cos\theta + y\sin\theta \\ y' = y\cos\theta - x\sin\theta$$

This can be represented in matrix form as:

$$\begin{bmatrix} x' \\ y' \end{bmatrix} = \begin{bmatrix} \cos\theta & -\sin\theta \\ \sin\theta & \cos\theta \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix}$$

Rotating around a point other than the origin

This only get slightly more complicated if we rotate around a point other than the origin. Let’s call the point to rotate around $(x_c, y_c)$

$$x' = (x - x_c)\cos\theta - (y - y_c)\sin\theta + x_c \\ y' = (x - x_c)\sin\theta + (y - y_c)\cos\theta + y_c$$

That can be expressed in matrix form as well, of course (with some new concepts we haven’t seen yet…)

$$\begin{bmatrix} x' \\ y' \\ 1 \end{bmatrix} = \begin{bmatrix} \cos\theta & -\sin\theta & x_c(1 - \cos\theta) + y_c\sin\theta\\ \sin\theta & \cos\theta & y_c(1 - \cos\theta) - x_c\sin\theta \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \\ y \\ 1 \end{bmatrix}$$

That seems complicated! The easier way to express this is to first move our frame our reference (translate) and then rotate around the origin of that frame of reference using the standard rotation matrix we derived above.

That brings us to Translation.

↗️ Translation

Compared to what we just went through with Rotation, Translation is easy. You just add the change ($\Delta$) in $x$ and $y$ and you get a new $x'$ and $y'$.

$$x' = x + \Delta x \\ y' = y + \Delta y$$

In matrix form:

$$\begin{bmatrix} x \\ y \end{bmatrix} + \begin{bmatrix} \Delta x \\ \Delta y \end{bmatrix} = \begin{bmatrix} x + \Delta x \\ y + \Delta y \end{bmatrix} = \begin{bmatrix} x' \\ y' \end{bmatrix}$$

That’s all there is to it… until you want to both rotate and translate.

🔢 2D Transform via Linear Algebra

We can express both rotation and translation (as well as scale and shear) using a 2D Transformation matrix.

To do this, we tack our translation matrix $\begin{bmatrix} \Delta x \\ \Delta y \\ 1 \end{bmatrix}$ as a column onto our rotation matrix.

Before we get into it, let’s recognize that this intuitively makes sense. If you have a matrix with 3 columns, you need 3 rows to do multiplication. We’re trying to end up with $x' = \Delta x + x$, so a 3x3 identity matrix with $\Delta x$ in the last column will do just that.

$$\begin{bmatrix} 1 & 0 & \Delta x \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{bmatrix} \times \begin{bmatrix} x \\ y \\ 1 \end{bmatrix} \\ \downarrow \\ 1 * x + 0 * y + 1 * \Delta x \\ \downarrow \\ x + \Delta x$$

That just expresses the dot product of the first row, but the other two rows are just the identity and will result in $\begin{bmatrix} x + \Delta x \\ y \\ 1 \end{bmatrix}$.

Ok, so let’s take a look at a full transformation matrix with rotation and translation.

$$\begin{bmatrix} x' \\ y' \\ 1 \end{bmatrix} = \begin{bmatrix} \cos\theta & -\sin\theta & \Delta x \\ \sin\theta & \cos\theta & \Delta y \\ 0 & 0 & 1 \end{bmatrix} \times \begin{bmatrix} x \\ y \\ 1 \end{bmatrix}$$

That’s all there is to it. Given a rotation of $\theta$ and translation of $(\Delta x, \Delta y)$, you can use that matrix to apply both at the same time and get the correct $(x', y')$¹.

Wrapping up

This isn’t comprehensive. There’s a lot more but Gemini can help you out with additional details. Some additional one-off notes for reference are below.

Full transformation matrix

A full matrix with all 4 factors — translation $(t_x, t_y)$, rotation $\theta$, scale $(s_x, s_y)$, and shear $(sh_x, sh_y)$ — is

$$\begin{bmatrix} s_x\cos\theta - sh_y s_x \sin\theta & sh_x s_y \cos\theta - s_y \sin\theta & t_x \\ s_x\sin\theta + \sh_y s_y \sin\theta & sh_x s_y \sin\theta + s_y \cos\theta & t_y \\ 0 & 0 & 1 \end{bmatrix}$$

This is typically applied Scale → Shear → Rotate → Translate, which appears reversed when doing matrix multiplication.

$$P' = (T \cdot R \cdot Sh \cdot S) \cdot P$$

Footnotes

1. We glossed over non-origin rotation before learning about translation and then didn’t mention it. Briefly, a rotation around a non-origin point without translating would be done by first applying a translation ($T$) to the point, applying the simple rotation matrix ($R$) and then applying the inverse of $T$ to move it back, ie $P' = (T^{-1}\cdot R \cdot T) \cdot P$ ↩