Every frame of a video game moves thousands of points: the camera pans, a character turns, a door swings on its hinge. Turning, stretching, flipping, and shearing are linear maps, so a matrix does each of them. But the most common move of all, sliding something from one place to another, is not linear. This page fixes that with one extra coordinate, and then every move a game needs is a single matrix, chained by multiplication.
Every frame of a video game moves thousands of points. Turns, stretches, flips, and shears are matrices, from the Geometry page. But the simplest move of all, sliding, is not. The fix is to look at the plane from one dimension up, sitting in space as the floor $z = 1$. There, sliding becomes a shear of space, and a $3 \times 3$ matrix can do it.
Here is the move every game needs, with a name.
For a fixed vector $t$, the translation by $t$ is the map $x \mapsto x + t$: it slides every point by $t$.
It looks harmless, but it fails the first test a linear map has to pass.
A translation by $t \neq 0$ is not a linear map, so no matrix $A$ has $Ax = x + t$ for every $x$.
Every linear map sends $0$ to $0$ (Null Space & Range), but the translation sends $0$ to $t \neq 0$. And $x \mapsto Ax$ is linear for every matrix $A$. $\blacksquare$
This is a short visual argument, not a formal proof. Every move a matrix makes keeps the origin where it is: the grid bends, but $0$ stays put. A slide drags the origin along with everything else, as in the figure at the top. So no matrix can slide.
The full proof is in the n version.
Doubling fails too, which is easy to check by hand.
Let $S$ slide the plane by $(2, 1)$. Show by computing that $S(2x) \neq 2S(x)$ for $x = (1, 0)$.
$S(2x) = S(2, 0) = (4, 1)$, but $2S(x) = 2(3, 1) = (6, 2)$. The slide gets added once, not twice, so doubling the input doesn't double the output.
The trick is to stop drawing the plane by itself. Put it in space as the floor $z = 1$, so the point $(x, y)$ sits at $(x, y, 1)$.
The homogeneous coordinates of the point $(x, y)$ of the plane are $(x, y, 1)$. More generally, any $(a, b, c)$ with $c \neq 0$ is a homogeneous coordinate vector for the point $(a/c, \ b/c)$.
A slide of the floor is now a move of space that keeps the origin of space fixed: a shear.
In homogeneous coordinates, the translation of $\R^n$ by $t$ is the $(n + 1) \times (n + 1)$ matrix $\begin{pmatrix} I & t \\ 0 & 1 \end{pmatrix}$, and a linear map with matrix $A$ is $\begin{pmatrix} A & 0 \\ 0 & 1 \end{pmatrix}$. For the plane:
$$\begin{pmatrix} 1 & 0 & t_1 \\ 0 & 1 & t_2 \\ 0 & 0 & 1 \end{pmatrix}\begin{pmatrix} x \\ y \\ 1 \end{pmatrix} = \begin{pmatrix} x + t_1 \\ y + t_2 \\ 1 \end{pmatrix}.$$Multiply in blocks: $\begin{pmatrix} I & t \\ 0 & 1 \end{pmatrix}\begin{pmatrix} x \\ 1 \end{pmatrix} = \begin{pmatrix} x + t \\ 1 \end{pmatrix}$ and $\begin{pmatrix} A & 0 \\ 0 & 1 \end{pmatrix}\begin{pmatrix} x \\ 1 \end{pmatrix} = \begin{pmatrix} Ax \\ 1 \end{pmatrix}$. In both cases the last coordinate stays $1$, so the point stays on the lifted copy of $\R^n$ and its first $n$ coordinates are the slid or moved point. $\blacksquare$
In homogeneous coordinates, the slide of the plane by $(t_1, t_2)$ is the $3 \times 3$ matrix below, and a move with $2 \times 2$ matrix $A$ is $A$ in the top-left corner with $0, 0, 1$ around it:
$$\begin{pmatrix} 1 & 0 & t_1 \\ 0 & 1 & t_2 \\ 0 & 0 & 1 \end{pmatrix}\begin{pmatrix} x \\ y \\ 1 \end{pmatrix} = \begin{pmatrix} x + t_1 \\ y + t_2 \\ 1 \end{pmatrix}.$$This is a visual argument (with one multiplication to check it). The matrix is a shear of space: it keeps the origin, tilts the $z$-axis over toward $(t_1, t_2, 1)$, and slides each horizontal floor sideways by its height times $(t_1, t_2)$. The floor at height $1$ slides by exactly $(t_1, t_2)$, as in the figure below.
The full proof is in the n version.
Here it is in space: the shear tilts the $z$-axis and slides the floor $z = 1$ along itself.
So the matrices for every move of a game look like this, with the slide in the last column and the ordinary $2 \times 2$ matrix in the corner.
Write the $3 \times 3$ matrices for: a slide by $(1.5, 0.5)$; a turn by $90^\circ$ about the origin; scaling by $2.5$ sideways and $0.75$ up and down; the reflection across $y = x$.
Only the slide uses the last column. The others are their familiar $2 \times 2$ matrices, padded with a $1$ in the corner.
Why must the corner be $1$, and why did the definition allow any $c \neq 0$? Because a projector at the origin shining through the screen $z = 1$ sends a whole line of points to the same spot.
So $(3, 6, 3)$ and $(1, 2, 1)$ name the same point $(1, 2)$: divide by the last coordinate. Graphics hardware uses exactly this division to draw perspective, where farther things look smaller.
Now every move is a matrix, so a chain of moves is a product, exactly as on the Composition page.
If moves $M_1, M_2, \ldots, M_k$ of the plane (slides and $2 \times 2$ moves) are done in that order, the whole chain is the single $3 \times 3$ matrix $M_k \cdots M_2M_1$, with the first move on the right.
Each $M_i$ is a linear map of $\R^3$ that keeps the plane $z = 1$, so doing them in order is the composition $M_k \circ \cdots \circ M_1$, whose matrix is the product with $M_1$ on the right (the matrix of a composition). $\blacksquare$
This is a visual argument, not a formal proof. Each $3 \times 3$ matrix is a move of space that keeps the floor $z = 1$ on itself, and doing moves of space in a row is multiplying their matrices, newest on the left (the Composition page). The floor just comes along for the ride.
The full proof is in the n version.
That's the whole reason games use this: a camera that pans and turns at the same moment is one matrix, multiplied once, and then applied to every point, instead of two separate operations on every point.
Find the matrix of "slide by $(2, -1)$, then turn $90^\circ$ counterclockwise", and of the same two moves in the other order.
Slide first means the slide goes on the right:
$$\begin{pmatrix} 0 & -1 & 0 \\ 1 & 0 & 0 \\ 0 & 0 & 1 \end{pmatrix}\begin{pmatrix} 1 & 0 & 2 \\ 0 & 1 & -1 \\ 0 & 0 & 1 \end{pmatrix} = \begin{pmatrix} 0 & -1 & 1 \\ 1 & 0 & 2 \\ 0 & 0 & 1 \end{pmatrix}.$$The other order:
$$\begin{pmatrix} 1 & 0 & 2 \\ 0 & 1 & -1 \\ 0 & 0 & 1 \end{pmatrix}\begin{pmatrix} 0 & -1 & 0 \\ 1 & 0 & 0 \\ 0 & 0 & 1 \end{pmatrix} = \begin{pmatrix} 0 & -1 & 2 \\ 1 & 0 & -1 \\ 0 & 0 & 1 \end{pmatrix}.$$Same turn in the corner, different last column: when the slide happens first, the turn carries it along, from $(2, -1)$ to $(1, 2)$.
That last column is where the mistakes live.
The slide goes in the last column, never the bottom row, and the bottom row is always $0, 0, 1$. When a slide comes before a turn or a stretch, don't copy the slide into the answer: the later move changes it. Multiply the matrices and let the product sort it out.
Your turn. Type the matrix row by row, like 1, 0, 2; 0, 1, 1; 0, 0, 1.
Loading practice engine...
A $2 \times 2$ matrix can only turn about the origin. A door turns about its hinge. Chaining fixes that too.
To do a move $A$ about the point $p$ instead of the origin, slide $p$ to the origin, do $A$, and slide back:
$$\begin{pmatrix} I & p \\ 0 & 1 \end{pmatrix}\begin{pmatrix} A & 0 \\ 0 & 1 \end{pmatrix}\begin{pmatrix} I & -p \\ 0 & 1 \end{pmatrix} = \begin{pmatrix} A & p - Ap \\ 0 & 1 \end{pmatrix}.$$Multiply the last two first: $\begin{pmatrix} A & 0 \\ 0 & 1 \end{pmatrix}\begin{pmatrix} I & -p \\ 0 & 1 \end{pmatrix} = \begin{pmatrix} A & -Ap \\ 0 & 1 \end{pmatrix}$, and then $\begin{pmatrix} I & p \\ 0 & 1 \end{pmatrix}\begin{pmatrix} A & -Ap \\ 0 & 1 \end{pmatrix} = \begin{pmatrix} A & p - Ap \\ 0 & 1 \end{pmatrix}$. It sends $p$ to $Ap + p - Ap = p$, so $p$ stays put. $\blacksquare$
This is a visual argument, not a formal proof. The figure below plays the three steps: the point $p$ rides down to the origin, the turn happens where matrices know how to turn, and $p$ rides back up. It never moved in the end, so the whole thing is a turn about $p$.
The full proof is in the n version.
Here is a quarter turn about $p = (2, 1)$, done both ways: in three steps, then as one matrix.
Hefferon's book does a reflection this way, across a line that misses the origin.
Find the matrix of the reflection across the line $y = -x + 2$.
Slide the line down by $2$ so it passes through the origin, reflect across $y = -x$, and slide back up:
$$\begin{pmatrix} 1 & 0 & 0 \\ 0 & 1 & 2 \\ 0 & 0 & 1 \end{pmatrix}\begin{pmatrix} 0 & -1 & 0 \\ -1 & 0 & 0 \\ 0 & 0 & 1 \end{pmatrix}\begin{pmatrix} 1 & 0 & 0 \\ 0 & 1 & -2 \\ 0 & 0 & 1 \end{pmatrix} = \begin{pmatrix} 0 & -1 & 2 \\ -1 & 0 & 2 \\ 0 & 0 & 1 \end{pmatrix}.$$Check two points: $(2, 0)$ is on the line and goes to $(-0 + 2, \ -2 + 2) = (2, 0)$, unmoved. The origin goes to $(2, 2)$, and the midpoint $(1, 1)$ of $0$ and $(2, 2)$ is on the line.
Now try building moves yourself. Each card multiplies the running matrix on the left, so the newest card happens last.
Your turn: one move about one point. Type the matrix row by row.
Loading practice engine...
In three dimensions the same idea gives $4 \times 4$ matrices acting on $(x, y, z, 1)$, and that's what graphics cards multiply billions of times a second. A full camera adds one more trick: a bottom row other than $0, 0, 0, 1$, so the last coordinate changes and the division by it shrinks distant objects.
In space, the same idea lifts $\R^3$ to $(x, y, z, 1)$ in four dimensions, past what we can draw, but the matrices work exactly the same way. That's what graphics cards multiply billions of times a second.
A move's matrix also says how much it stretches area: the shear and the slide keep area, a scaling by $2$ multiplies it by $4$. That number is the determinant, the next chapter.
The toolkit for this page: a slide isn't linear, but in homogeneous coordinates $(x, y, 1)$ it is the $3 \times 3$ matrix with the slide in its last column. A chain of moves is the product, first move on the right. To move about a point $p$, slide $p$ to the origin, move, slide back.
Every question so far came right after its idea, which is a hint a quiz never gives you. Down here the hint is gone. First, true or false: a claim from anywhere on this page, and you decide whether it holds.
Loading practice engine...
Next, a mixed set: every question type on this page, shuffled. This set is multiple choice.
Loading practice engine...
Made it this far? Time for something with a little heat. A mirror that misses the origin: build its matrix, then use it. In free response, type the point, like 9, 3.
Loading practice engine...