Page 16: Transformations with Linear Algebra

Now let’s use linear algebra to look at the transformations we’ve been working with.

There are some excellent internet videos that explain this really well. I recommend watching these in addition to reading the pages. The Three Blue One Brown videos are high-quality animated linear algebra tutorials that provide the geometric intuition. The Graphics in 5 Minutes video comes from the University of Washington, where Prof. Steve Seitz is trying to teach computer graphics by making “short cartoons.” These videos cover the material in a different order than we do in class.

• 3blue1brown: Linear Transformations and Matrices
• 3blue1brown: Matrix multiplication as composition
• Graphics in 5 Minutes: Affine Transformations in 5 minutes

Linear Transformations

Many useful transformations can be written as linear combinations of the input variables.

$$x^{\prime }=ax+by$$ $$y^{\prime }=cx+dy$$

The “new x” is some multiple of the old x, added to some multiple of the old y. Note that for the 2D case, there are 4 parameters (a,b,c,d) corresponding to the amount that new x depends on the old y (b), etc. In fact, a slightly different naming might make this clearer.

$$x^{\prime }=a_{xx}x+a_{xy}y$$ $$y^{\prime }=a_{yx}x+a_{yy}y$$

Where the four parameters have names like $a_{yx}$ to denote it’s the amount that y depends on x.

Notice that the 4 parameters ($a_{xx},a_{xy},a_{yx},a_{yy}$) naturally form a square. The rows contain the coefficients used to compute each new variable (so the top row is for new x). The columns are the ways that each old variable affects the new ones (so the first column is the amount that the old x variable affects the new x and y).

Hopefully, you recognize this square of numbers as a matrix, and the operation performed in that equation as multiplying a matrix by a vector. So if we write: ${\mathbf{x}}^{\prime }=\mathbf{Ax}$ where x’ and x are vectors (of length 2), and A is a 2x2 matrix, you won’t be too surprised. Other than that, we are ignoring whether something is a column vector or a row vector. Technically, they are column vectors.

Important: the matrix is defined such that the transformation is for a vector multiplied on the right. If you try to multiply on the left, you get a different transformation. This is a convention that we use in class. We always define transformations such that they are for right multiplication.

If you’re not comfortable with the matrix notation and matrix multiplication, now might be a good time to review it.

Even if you are familiar with matrices, make sure that you see what each row and column does in the matrix multiplication.

The matrix multiplication says that the first element of the result (x’) comes from the top row of the matrix ($a_{xx},a_{xy}$) combined with the input vector (x,y or x). The operation between the two vectors is called a dot product. In fact, you can think of matrix-vector multiplication as the process of taking the dot product of each row of the matrix with the vector we’re multiplying by (on the right).

A linear transformation is a transformation where the function is multiplication by some matrix. Specifically, we multiply the vector on the right. So, the transformation (function) $f_A$ would use the matrix A as $f_A(\mathbf{x})=\mathbf{Ax}$.

Here are some important facts about linear transformations. If you took a linear algebra class, you probably proved all of them already.

1. Zero is preserved. If you put in the vector zero, you get zero out.
2. Composition of functions is multiplication of matrices. If we have two transformations $f_A$ and $f_B$ that we apply as composition $f_B(f_A(\mathbf{x}))$ this is the same as $(f_B\circ f_A)(\mathbf{x})$, which is $\mathbf{BAx}$.
3. Because matrix multiplication associates, you can multiply the matrices first: $\mathbf{BAx}=(\mathbf{BA})\mathbf{x}=\mathbf{B}(\mathbf{Ax})$.
4. The set of linear transformations is closed under composition. Any sequence of linear transformations is a linear transformation. For any sequence of linear transformations, there is a single linear transformation that has the same result. You get this by multiplying the matrices.
5. The order of application matters. Matrix multiplication does not commute.

Composing Transformations

An important feature of using the matrix form for transformations (at least the linear ones that can be expressed as matrices) is that we can compose them by multiplying the matrices.

We like the right multiplication convention because it matches the function composition notation on Page  14  (Transformations as Math vs. Code). Suppose we have 3 transformations (as matrices) A, B, and C. If we want to apply them to our current coordinate system in that order, and then compute the position of point x in that coordinate system, we could write: x’ = A B C x. We multiply things together. (more on that in a minute).

We could think of each matrix as a function, so A might be defined as ${\mathbf{f}}_{\mathbf{A}}(\mathbf{x})=\mathbf{Ax}$ and so forth. In this case, we could write it as:

Notice how this looks similar to the matrix version (in terms of being left to right).

If we were writing this in HTML5 Canvas code, it would look like:

1context.transform(/** A matrix numbers **/);
2context.transform(/** B matrix numbers **/);
3context.transform(/** C matrix numbers **/);
4context.moveTo(x.x, x.y);

Remember that matrix multiplication does not commute. You cannot change the order of the transformations! If you have A B that is different than B A.

But, matrix multiplication does associate. We can change the order that we perform the multiplications. We could multiply left to right: multiply A times B to get AB, multiply that times C to get ABC, and then multiply that matrix by the point x. Or we could start on the right and multiply C times x to get the vector Cx, and multiply B by that to get BCx, and then multiply A times that to get the result. Both are mathematically equivalent, although, one way is two matrix multiplies and one matrix-vector multiply, and the other way we do three matrix-vector multiplies. The latter is less computation. However, we usually compute the matrix (left to right) because we’ll be able to use it to apply to many points.

What do we use this for?

You should be wondering, what matrices do we use? What does this have to do with the transformations we use in graphics? The short version: the most important transformations can be implemented as linear functions. We’ll see that on the next few pages.