2D transformation matrices for translation, scaling, and rotation

14 Mar 2020
Have a comment or question? Please drop me an email or tweet me @ronnieholm.

This post develops the foundational matrices for translation, scaling, and rotation of control points forming a shape. In graphics applications, these elementary translation matrices provide an efficient and uniform way of manipulating objects on screen. One such demo application implementing the concepts is available on Github:

Orthogonal coordinate system

We start by formalizing a traditional 2D coordinate system. It may be defined in terms of (1) orthogonal vectors \(\vec u\) and \(\vec v\), for the \(x\) and \(y\) axis and (2) origin \(O\) for the point of origin. Origin is the point of intersection between \(\vec u\) and \(\vec v\) and is commonly \((0,0)\). The difference between point and vector is best illustrated by a few examples: \(Q = P + \vec v\) and \(\vec v = Q - P\).

A point \(P\) may be defined in terms of vectors \(\vec u\) and \(\vec v\). To arrive at \(P\) we start at origin \(O\), then move some distance along \(\vec u\) followed by a move some distance along \(\vec v\):

$$P = x\vec u + y\vec v + O\\ P = 0.5\vec u + 0.25\vec v + O\\ P = 0.5\begin{bmatrix}1\\0\end{bmatrix} + 0.25\begin{bmatrix}0\\1\end{bmatrix} + \begin{bmatrix}0\\0\end{bmatrix} = \begin{bmatrix}0.5\\0.25\end{bmatrix}$$ Convention dictates that \(\vec u\) and \(\vec v\) are perpendicular unit vectors, that \(O\) is the zero vector, and that \(P\) is commonly written \((x,y) = (0.5, 0.25)\) with \(x\) and \(y\) being the coordinates of \(P\). Going forward, we'll also write points in matrix form: $$P = \begin{bmatrix}x\ y\ 1\end{bmatrix} \begin{bmatrix}\vec u\\ \vec v\\ O \end{bmatrix} = x\vec u + y\vec v + O$$ For brevity the 3x1 matrix is mostly left out, but computation wise is still there. \(P\) in matrix form is then \(\begin{bmatrix}x\ y\ 1\end{bmatrix}\) with \(1\) added to carry over origin \(O\). Applying translation, scaling, and rotation, \(O\) must remain unaffected.

Translation

Translating a point by \(a\) in \(x\) direction and by \(b\) in \(y\) direction may be expressed by the following relationship between source and destination vectors:

$$\begin{bmatrix}x & y & 1\end{bmatrix} \rightarrow \begin{bmatrix}x + a & y + b & 1\end{bmatrix}$$

Transforming any left matrix to a right matrix is akin to applying a postfix operator to the left side. With respect to translation, the \(T_{a,b}\) operator is matrix multiplication of the left side with a special translation matrix parameterized by \(a\) and \(b\). Expanding the multiplication allows us to verify the correctness of \(T_{a,b}\): $$\begin{bmatrix}x & y & 1\end{bmatrix} \begin{bmatrix}1 & 0 & 0\\0 & 1 & 0\\a & b & 1\end{bmatrix} = \begin{bmatrix}1x + 0y + 1a & 0x + 1y + 1b & 0x + 0y + 1\end{bmatrix} = \begin{bmatrix}x + a & y + b & 1\end{bmatrix}$$ Translation, scaling, and rotation matrices are characterized by their sparseness and the last column always being the same to carry over origin \(O\).

Scaling

Scaling a point by \(a\) in \(x\) direction and \(b\) in \(y\) direction happens with respect to origin \(O\). The relationship between source and destination vectors is

$$\begin{bmatrix}x & y & 1 \end{bmatrix}\rightarrow \begin{bmatrix}ax & by & 1\end{bmatrix}$$

To satisfy this relationship requires a scaling matrix \(S_{a, b}\) as follows: $$\begin{bmatrix}x & y & 1\end{bmatrix}\rightarrow \begin{bmatrix}a & 0 & 0\\ 0 & b & 0\\ 0 & 0 & 1\end{bmatrix} = \begin{bmatrix}ax & by & 1\end{bmatrix}$$ Scaling works as intended when for a set of points their centroid \(C = O\). A unit square with control points \(\{(-1,1),(1,1),(1,-1)\}\) satisfies this condition. Applying \(S_{2,2}\) to each point has the effect of scaling from a 2x2 to a 4x4 square.

On the other hand, a unit square with control points \(\{(1,3),(3,3),(3,1)\}\) has a centroid \(C = (2, 2)\). Applying \(S_{2, 2}\) to each point has the effect of scaling from a 2x2 to 4x4 square and for resulting points move centroid \(C\). To prevent this, each point must first translated such that \(C = O\), scaled, and then translated back:

$$T_{-a,-b} S_{c,d} T_{a,b}$$

The centroid \(C\) of a set of points, assuming each has equal weight, is defined as $$\left(a = \overline{x}, b = \overline{y}\right) = \left(\frac{1}{n}\sum_{i=1}^{n}x_{i},\frac{1}{n}\sum_{i=1}^{n}y_{i}\right)$$

Rotation

Rotating a point by \(\theta\) around origin implies that radius from origin to \((x, y)\) and radius from origin to \((x', y')\) remain unaffected: $$\begin{bmatrix}x & y & 1\end{bmatrix} \rightarrow \begin{bmatrix}x' & y' & 1\end{bmatrix}$$ With radius \(r\) and angle \(\phi\) between \(x\) axis and point left side becomes $$x = r\cos\phi\\ y = r\sin\phi$$ Right side is then \(x\) and \(y\) with an additional rotation \(\theta\) added: $$\begin{eqnarray*} x' = r\cos(\phi + \theta) & & \\ x' = r\cos \phi \cos \theta - r \sin \phi \sin \theta & & \textrm{\{apply identity sum: \(\cos(u + v) = \cos u \cos v - \sin u \sin v\)\}}\\ x' = x \cos \phi - y \sin \theta & & \textrm{\{substitute in definitions of \(x\) and \(y\)\}}\\\\ y' = r\sin(\phi + \theta) & & \\ y' = r \sin \phi \cos \theta + r \cos \phi \sin \theta & & \textrm{\{apply identity sum: \(\sin(u + v) = \sin u \cos v + \cos u \sin v\)\}}\\ y' = y \cos \theta + x \sin \theta & & \textrm{\{substitute in definitions of \(x\) and \(y\)\}} \end{eqnarray*}$$ In matrix form, rotation matrix \(R_\theta\) becomes $$\begin{bmatrix}x & y & 1\end{bmatrix} \begin{bmatrix}\cos\theta & \sin\theta & 0\\ -\sin\theta & \cos\theta & 0\\ 0 & 0 & 1\end{bmatrix} = \begin{bmatrix}x' & y' & 1 \end{bmatrix}$$ As with scaling, rotation must happen around origin, possibly requiring two translations: $$T_{-a,-b} R_\theta T_{a, b}$$ If both scaling and rotation is needed, the translation back and forth need happen only once.

Summary

The translation, scaling, and rotation matrices are collectively referred to as the elementary matrices in computer graphics. Rather than apply transformations to a point one at a time, transformation matrices combine into a single matrix \(M\) for reuse across points: $$\begin{bmatrix}x & y & 1\end{bmatrix} M \begin{bmatrix}\vec u\\ \vec v\\ O \end{bmatrix} = \begin{bmatrix}x' & y' & 1 \end{bmatrix}$$ Refer to Lecture 3: Moving Objects in Space of this lecture series for a run-down of each transformation. Around 31m30s 3D versions of matrices are introduced.