Explaining Affine Rotation

If you are working on 2D or 3D graphics you have probably encountered 3x3 or 4x4 matrices used to translate or rotate the points of a geometrical figure.

You could lookup the definition of affine transformations on wikipedia. However unless you already understand the math well it does not explain very well why the affine transformation matrices look the way they do.

Here we are going to focus on explaining the rotation matrix, because that is I believe least obvious to people. But for the sake of completeness here are the scale, translate and rotation matrices.

If you want to scale a vector $u$ by the factor $c_x$ along the x-axis and the factor $c_y$ along the y-axis to get a new vector $v$ you can use the matrix $S$ as follows:

In similar fashion if you want to translate vector $u$ by $d_x$ along the x-axis and $d_y$ along the y-axis to produce vector $v$ you use translation matrix $T$:

Next comes the rotation. How this works is less obvious. Here we are representing a point $p$ as a vector $u$ extending from the origin of our coordinate system to the point $p$. Then we are rotating this vector by an angle $\theta$. This is done with a rotation matrix $R$.

If you remember the definition of $\cos(\theta)$ is equal to the the length of the side adjacent to the angle $\theta$. While $\sin(\theta)$ is equal to the equal to the length of the side opposite of the angle $\theta$.

This is for a unit circle. That is a circle where the radius is 1. We can draw a triangle inside it where the hypothenuse is equal to the radius.

We can also think of the opposite side as representing the y-axis and the adjacent side representing the x-axis. So for a vector $v$ of length $r$ forming an angle $\theta$ with the x-axis you can easily calculate its components:

The coordinates for a vector is always given relative to some basis. The basis are a bunch vectors representing each axis. By default the basis is defined as $[1, 0]$ vector for the x-axis and $[0, 1]$ vector for the y-axis. Thus a vector with coordinates $x$ and $y$ can be seen as the addition of two formed from the unit vectors defining the basis.

Here is an example in coded in the Julia programming language where $x = 3$ and $y = 4$.

v = 3*[1, 0] + 4*[0, 1]

Which again you can express equally through matrix multiplication:

An example from Julia using matrix multiplication.

A = [1 0;

     0 1]

v = A*[3, 4]

Basically you can make any vector by combining two other vectors. This allows us to simplify how we look at rotation. You can think of the vector $u$ being rotated as being made up of vector representing its x-component and another one representing its y-component. These two vectors can be combined to create the $u$ vector.

So when calculating a rotation of $u$ by $\theta$ degrees, we can handle this as two separate rotations. One rotation of the x-axis basis $$$[1, 0]$ and a rotation of the y-axis basis $[0, 1]$.

We can study the circle below to see what happens if we try to rotate the x-axis basis by $\theta$ degrees. We can imagine that the basis vector starts of as $AB$ and then gets rotated to its new orientation $AC$. We can easily see that the x-component of $AC$ is $\cos(\theta)$ while the y-component is $\sin(\theta)$

This lets us conclude that the new x-basis $b_x$ should be defined as the vector:

We can perform a similar analysis for the y-basis defined by $AB$ in the circle below. It gets rotated counter-clockwise $\theta$ degrees giving us a new y-basis $AC$.

In this case we can see the x-component of this new basis is defined by $BC$. The length is $\sin(\theta)$. But since this is in the negative half of the circle, the x-coordinate will be $-\sin(\theta)$. In this case the y-coordinate is defined by $AB$ which is of length $\cos(\theta)$. We can thus write the new y-basis as:

We can thus write our vector as a combination of these two basis vectors. Which gives us:

To make this 2x2 matrix also usable to express translation, it is often expanded to a 3x3 matrix like this: