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 cx along the x-axis and the factor cy 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 dx along the x-axis and dy 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 θ. This is done with a rotation matrix R.
If you remember the definition of cos(θ) is equal to the the length of the side adjacent to the angle θ. While sin(θ) 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 v of length r 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 [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.
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 θ 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 θ 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(θ) while the y-component is sin(θ)
This lets us conclude that the new x-basis bx 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 θ 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(θ). But since this is in the negative half of the circle, the x-coordinate will be −sin(θ). In this case the y-coordinate is defined by AB which is of length cos(θ). 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: