Transformation Matrix

Any set of points can be represented in a matrix \(\boldsymbol{X}\). For example:

\[ \boldsymbol{X} = \begin{bmatrix} 0 & 0 \\ 0 & 1 \\ 1 & 1 \\ 1 & 0 \end{bmatrix}\] The four rows in this matrix correspond to four points in two-dimensional space. You can think of the first column as the x coordinate and the second column as the y coordinate of each point. For our chosen \(\boldsymbol{X}\), these points represent the corners of a unit square.

We can define a transformation matrix \(\boldsymbol{T}\) as a \(2\times 2\) matrix which through post-multiplication transforms these points into another set of points in 2-dimensional space \(\boldsymbol{X'}\). For example, we can take the identity matrix:

\[\boldsymbol{T} = \boldsymbol{I} = \begin{bmatrix} 1 & 0 \\ 0 & 1 \end{bmatrix}\]

This matrix is a kind of arbitrary transformation because by definition, \(\boldsymbol{X'} = \boldsymbol{X} \times \boldsymbol{I} = \boldsymbol{X}\): the set of transformed points is the same as the set of original points.

But what about a different transformation matrix, say

\[\boldsymbol{T} = \begin{bmatrix} 1 & 0.5 \\ 0 & 1 \end{bmatrix}\]

Now \(\boldsymbol{X'}\) is not equal to \(\boldsymbol{X}\): the points have been transformed! In particular, here we are dealing with a skew:

\[\boldsymbol{X'} = \boldsymbol{X} \times \boldsymbol{T} = \begin{bmatrix} 0 & 0 \\ 0 & 1 \\ 1 & 1 \\ 1 & 0 \end{bmatrix} \times \begin{bmatrix} 1 & 0 \\ 0.5 & 1 \end{bmatrix} = \begin{bmatrix} 0 & 0 \\ 0.5 & 1 \\ 1.5 & 1 \\ 1 & 0 \end{bmatrix}\]

Let’s visualise it

Because this is all very abstract and a lot of numbers, below I’ve plotted the four points in \(\boldsymbol{X}\), connected them by lines, coloured the center, and applied the skew transformation, yielding \(\boldsymbol{X'}\).

I’ve also gone a bit further and made it interactive1. So you can edit the numbers in the matrix and the unit square will transform accordingly. Play around with it to get an idea of transforming a set of points in 2-dimensional space.



Determinant

Now that you have gained a feeling or intuition around the transformation matrix, I’ll tell you a great geometric trick I learnt from this youtube video: the surface area of \(\boldsymbol{X'}\) is equal to the size of the determinant of the transformation matrix \(\boldsymbol{T}\). This was a great revelation for me that made determinants much more easy to comprehend. This works in higher dimensions too: the transformed volume of a \(k\)-dimensional unit hypercube represents the size of the determinant of the transformation matrix \(\boldsymbol{T} \in \mathbb{R}^k\).

But we’re not there yet: determinants can be negative, wheras volumes and areas can’t. Luckily, the sign of the determinant can be inferred from \(\boldsymbol{X'}\) too. Specifically, it has to do with the chirality of the shape defined by \(\boldsymbol{X'}\). If the original square “flips” – that is, the original bottom right point becomes the new top left point or the original bottom left point becomes the new top right point – the sign of the determinant will be negative. In the illustration, that will make the shaded area red instead of blue.

The determinant of the currently entered \(\boldsymbol{T}\) is 0.

Top tips to try

  1. Try to make \(\boldsymbol{T}\) look like a covariance matrix.
  2. Try to make the columns in \(\boldsymbol{T}\) linearly dependent.
  3. Try to flip the rows or columns of \(\boldsymbol{T}\) at any point.

Conclusion

Through exploring interactively what a transformation matrix does to a unit square, we can generate an intuition for the geometric meaning of the determinant.


  1. Using JavaScript, SVG, and CSS. See the source of this blog post for more info.