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 by the factor along the x-axis and the factor along the y-axis to get a new vector you can use the matrix as follows:
In similar fashion if you want to translate vector by along the x-axis and along the y-axis to produce vector you use translation matrix :
Next comes the rotation. How this works is less obvious. Here we are representing a point as a vector extending from the origin of our coordinate system to the point . Then we are rotating this vector by an angle . This is done with a rotation matrix .
If you remember the definition of is equal to the the length of the side adjacent to the angle . While is equal to the equal to the length of the side opposite of the angle .
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 of length forming an angle 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 vector for the x-axis and vector for the y-axis. Thus a vector with coordinates and 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 and .
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;
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 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 vector.
So when calculating a rotation of by degrees, we can handle this as two separate rotations. One rotation of the x-axis basis and a rotation of the y-axis basis .
We can study the circle below to see what happens if we try to rotate the x-axis basis by degrees. We can imagine that the basis vector starts of as and then gets rotated to its new orientation . We can easily see that the x-component of is while the y-component is
This lets us conclude that the new x-basis should be defined as the vector:
We can perform a similar analysis for the y-basis defined by in the circle below. It gets rotated counter-clockwise degrees giving us a new y-basis .
In this case we can see the x-component of this new basis is defined by . The length is . But since this is in the negative half of the circle, the x-coordinate will be . In this case the y-coordinate is defined by which is of length . 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: