Page 18: Affine Transformations

Spring 2026 Sample Solution

Translations (Affine Transformations)

Hopefully, you noticed that translation is not a linear transformation. If nothing else, it violates the property that zero is preserved. Translation adds a vector to all points, including zero. Any matrix times a zero vector is zero.

The combination of a linear transformation and a translation is called an affine transformation. Affine is another class of transformations that contains linear transformations (a linear transformation is an affine transformation with a zero translation).

We typically write affine transformations by multiplying first and adding second. So, for matrix A and translation vector t, we write $f_{A, t} (x) = Ax + t$ .

Writing this out to expose what matrix multiply does can emphasize that this can be viewed as a separate equation for each coordinate (row of the equation): $x^{'} = [x_{x}^{'} x_{y}^{'}] = f_{A, t} (x) = Ax + t = [a_{xx} a_{y x} a_{x y} a_{yy}] [x_{x} x_{y}] + [t_{x} t_{y}]$

x_{x}^{'} = a_{xx} x_{x} + a_{x y} x_{y} + t_{x} x_{y}^{'} = a_{y x} x_{x} + a_{yy} x_{y} + t_{y}

It is tempting to put that 3x2 “rectangle” of numbers as a matrix. However, we cannot use multiply operations for composition or application. You can’t multiply two 3x2 matrices together, nor does it make sense to multiply a 3x2 matrix by a 2-vector on the right.

Affine transformations are closed under composition, and have the property that any sequence of affine transformations can be represented as a single affine transformation. However, the composition is messy notationally. We can’t use the nice matrix notation where function composition is matrix multiplication. Unless we use the trick in the next section.

The answer is: we will write an affine matrix (in 2D) as the top 2 rows of a 3x3 matrix. This will turn out to be an essential trick in computer graphics called Homogeneous coordinates. Before we explain them, let’s have a demo where you can see what each element of the matrix does.

Properties of Affine Transformations

Affine Transformations are important. They include all of the linear transformations on the previous page, but they add the translation that allow us to shift the center.

Here are a few important properties that they have:

They are closed: the composition of two affine transformations is an affine transformation.
They preserve parallelness: if two lines start out parallel, they will end up parallel. If you play with the demo above, you can turn the square into any parallelogram that you like. But the resulting sides will always be parallel (since they started out parallel).

OK, so why do we put affine transformations in 2D into 3x3 matrices? By the way, this answer will be the same later in the class: we put affine transformations in 3D into 4x4 matrices. But let’s save that for a later workbook.

Homogeneous Coordinates

Several transformations that we want to have in 2D are not linear. But we like linear transformations.

The counter-intuitive solution is to stop using 2D points. We’ll embed the 2D space that we want to work in into a 3D space, do linear operations in this 3D space, and then interpret the points in 3D back in 2D.

This will turn out to have all sorts of advantages as we do more graphics because many important operations will turn into simple linear operations in a higher dimension. We’ll start with the simple version that will allow us to do affine transformations (including translations) as linear transformations.

The trick of using an n+1 dimensional space to represent n dimensional points is known as homogeneous coordinates. For this workbook, we’ll be using 3D homogeneous coordinates to represent 2D spaces. In the future, we’ll use 4D homogeneous coordinates to represent 3D spaces.

We’ll call the last coordinate of the 3 coordinates w. So our three coordinates in homogeneous space will be (x,y,w). Calling the extra dimension w will be a reminder that it is special, and will still work when we create 4D homogeneous coordinates for 3D space.

Basic version: we’ll represent the 2D point (x,y) by the 3-vector (x,y,1). In this workbook, we’ll focus on the case where the last coordinate (w) is 1.

If you want the math version: Homogeneous space treats all points along lines through the origin as equivalent. Our 2D space will be the plane w=1 inside of the 3D space. For any line through the origin, we project the entire line to its intersection with the plane. So if we have a point (x,y,w) in 3D, it’s equivalent to the point (x/w, y/w, 1), which we interpret as (x/w, y/w) in our 2D space.

Geometric Intuition version: The geometric intuitions are best seen as an explanation. Watch one of the videos. But… Homogeneous space treats the entire line between the origin (0,0,0) and the point (x,y,w) as the same. To convert these points back to 2D, we project them to (x/w, y/w, 1) (the w=1 plane). Translation in the 2D plane is the same as a shear in 3D.

If we change our 2D points into homogeneous coordinates, our transformations become 3x3 matrices to transform the 3D homogeneous points. An affine transformation in 2D becomes a linear transformation in the 3D homogeneous space. If we had the 2D affine transformation $x^{'} = Ax + t$ we write the following in 3D: $x_{x}^{'} x_{y}^{'} x_{w}^{'} = a_{xx} a_{y x} 0 a_{x y} a_{yy} 0 t_{x} t_{y} 1 x_{x} x_{y} 1$ If you multiply this out, you’ll see that $x_{w}^{'}$ will always end up being 1. You’ll also notice that the top two rows end up being exactly the same expressions as in the equations at the top of the page.

The cool thing about this is that affine transformations in 2D are linear transformations in the 3D homogeneous space. We can represent transformations as matrices. Transformation composition is matrix multiplication.

Before we move on…

This concept of using 3x3 matrices and homogeneous coordinates is really important. So please practice. Here’s something to try…

Given the matrix:

220 - 2 10 641

Where does the point (3,4) go?

( , )

answer

To compute this we add a 1 to our point to get the vector (3,4,1), we then multiply the matrix by this vector (remember, we use right multiplication to “apply” a transformation) to get the vector (4,14,1). We then divide by w (which is 1) to get (4,14).

How about…

220 - 2 10 642

where does the point (4,3) go?

( , )

answer

The first part is easy, we extend the point to 3D and multiply the matrix by it: $220 - 2 10 642 431 = (2 \cdot 4) + (- 2 \cdot 3) + (6 \cdot 1) (2 \cdot 4) + (1 \cdot 3) + (4 \cdot 1) (0 \cdot 4) + (0 \cdot 3) + (2 \cdot 1) = 8152$

But then, we need to do the “homogeneous divide”; w is 2, so we end up with 4, 7.5.

Moving on…

Maybe you’re wondering what those other elements of the matrix are doing. That’s the topic of the next page.

	Kind Kind of rubric items: standard - expected from all students advanced - used to get a better grade creative - an opportunity to do something creative levels - rubric item graded by selected achievement level optional - not required, but encouraged	Description
	standard	Page 18 Items