Transforms
Vectors
You should know vector component wise vector add, subtract, and multiply. You should also know the dot product and cross product.Component wise addition
$$ \mathbf{c} = \mathbf{a} + \mathbf{b} $$ $$ (x_c, y_c) = (x_a+x_b,\: y_a+y_b) $$Scalar multiplication
$$\alpha \mathbf{v} = (\alpha x,\: \alpha y)$$ $$(\mathbf{v_a})(\mathbf{v_b}) = (x_ax_b,\: y_ay_b)$$Dot product
$$\mathbf{a} \cdot \mathbf{b} = (x_a x_b + y_a y_b)$$Cross product
$$\mathbf{c} = \mathbf{a} \times \mathbf{b}$$ $$c_x = a_yb_z - a_zb_y$$ $$c_y = a_zb_x - a_xb_z$$ $$c_z = a_xb_y - a_yb_x$$
Matrix transforms
We can use matrices to transform vertex attributes, almost always position attributes. For now, we will only consider vertices in 2D space. We will write vertex positions as a column vector of x and y.$$ \begin{bmatrix} x \\ y \end{bmatrix} $$
The identity is: $$ \begin{bmatrix} 1 & 0 \\ 0 & 1 \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix} = \begin{bmatrix} 1x+0y \\ 0x+1y \end{bmatrix}= \begin{bmatrix} x \\ y \end{bmatrix} $$
Scale
Scaling makes vertices move closer or farther from the origin. $$ \begin{bmatrix} s & 0 \\ 0 & s \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix} = \begin{bmatrix} sx \\ sy \end{bmatrix} $$ You could also scale each component by a different scalar: $$ \begin{bmatrix} s_x & 0 \\ 0 & s_y \end{bmatrix} $$Shear
Shear is like scaling based on the distance from another axis: $$ \begin{bmatrix} 1 & a \\ b & 1 \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix} = \begin{bmatrix} 1x+ay \\ bx+1y \end{bmatrix}= \begin{bmatrix} x + ay\\ y + bx \end{bmatrix} $$Rotation
Rotation is derived from unit vector rotations and trig identities. Given a vector \( \mathbf{v} \) $$ \mathbf{v} = \begin{bmatrix} v_x \\ v_y \end{bmatrix} $$ If the vector is distance \( r \) from the origin and has angle \(\alpha\) from the positive x-axis: $$ v_x = r \cos (\alpha) $$ $$ v_y = r \sin (\alpha) $$ If we wish to rotate \( \mathbf{v} \) by angle \( \theta \) to form \( \mathbf{w} \): $$ w_x = r \cos ( \alpha + \theta ) $$ $$ w_y = r \sin ( \alpha + \theta ) $$ Using trigonometric identities: $$ w_x = r \cos ( \alpha + \theta ) = r \cos(\alpha) \cos(\theta) - r \sin(\alpha) \sin(\theta)$$ $$ w_y = r \sin ( \alpha + \theta ) = r \sin(\alpha) \cos(\theta) + r \cos(\alpha) \sin(\theta)$$ Since \(v_x = r \cos(\alpha) \) and \( v_y = r \cos(\alpha) \), then by substitution: $$ w_x = v_x \cos ( \theta ) - v_y \sin(\theta) $$ $$ w_y = v_y \cos ( \theta ) + v_x \sin(\theta) $$ Finally, in matrix form: $$ \mathbf{w} = \mathbf{R}\mathbf{v} = \begin{bmatrix} \cos{\theta} & -\sin{\theta} \\ \sin{\theta} & \cos{\theta} \end{bmatrix} \begin{bmatrix} v_x \\ v_y \end{bmatrix} = \begin{bmatrix} v_x \cos ( \theta ) - v_y \sin(\theta) \\ v_y \cos ( \theta ) + v_x \sin(\theta) \end{bmatrix} $$Reflection
Reflection is a special case of scale: scale by a negative amount.
Translation
Translation is displacement by a fixed quantity and is more difficult to represent with a matrix. Beginning with a 2D vector: $$ \mathbf{v} + \mathbf{t} = \begin{bmatrix} v_x \\ v_y \end{bmatrix} + \begin{bmatrix} t_x \\ t_y \end{bmatrix} $$ If we wish to use any of the previous transforms, we use the matrices we already derived. So, using a transform matrix, the vertex, and the translation becomes: $$ \mathbf{M}\mathbf{v} + \mathbf{t} $$ If the matrix is one of the previous transform matrices: $$ \mathbf{M} = \begin{bmatrix} a & b \\ c & d \end{bmatrix}$$ Then our translation becomes: $$\mathbf{M}\mathbf{v} + \mathbf{t} = \begin{bmatrix} a & b \\ c & d \end{bmatrix} \begin{bmatrix} v_x \\ v_y \end{bmatrix} + \begin{bmatrix} t_x \\ t_y \end{bmatrix}$$ Multiplying all the terms: $$\mathbf{M}\mathbf{v} + \mathbf{t} = \begin{bmatrix} ax + by + 1t_x\\ cx + dy +1t_y \end{bmatrix}$$ The result appears to have 2x3 terms, with the third column being the translation vector multiplied by 1. Thus to generate this result, the matrices would need to look like this: $$\begin{bmatrix} a & b & t_x\\ c & d & t_y \end{bmatrix} \begin{bmatrix} x \\ y \\ 1\end{bmatrix} = \begin{bmatrix} ax + by + 1t_x\\ cx + dy +1t_y \end{bmatrix}$$ Note the additional row with value 1 in the vertex. However, now the transformation matrix is non-square and thus, non-invertible. Adding another row solves this problem. $$\mathbf{T}\mathbf{v} = \begin{bmatrix} a & b & t_x\\ c & d & t_y \\ 0 & 0 & 1\end{bmatrix} \begin{bmatrix} x \\ y \\ 1\end{bmatrix}$$ So, a purely translation matrix looks like: $$ \begin{bmatrix} 1 & 0 & t_x \\ 0 & 1 & t_y \\ 0 & 0 & 1 \end{bmatrix} $$