Introduction to Graphics Math

Matrices have a number of applications, but for our purposes a matrix represents a coordinate system. Many matrix implementations allow the programmer to be oblivious to the underlying math that is going on. Often an abstraction layer is placed around matrices (usually called a transform) so as a programmer, you're only dealing with three different vectors: translation, rotation and scale. This simplifies many tasks, but sometimes it's better to be able to think about a matrix in terms of its fundamental representation. A matrix is made up of a 2 dimensional array of numbers. We'll start with a 2x2 matrix to represent the coordinate frame in this demo (the pink coordinate frame): \[\begin{bmatrix}1.0 & 0.0\\0.0 & 1.0\end{bmatrix}\] Each row in the matrix represents a vector. Notice how the first row is the vector (1.0,0.0), a vector that represents the x-axis. The second row is the vector (0.0,1.0), a vector that represents the y-axis. We started with an identity matrix, which represents an untransformed coordinate system. Setting x to (1.0,0.0) and y to (0.0,1.0) will get you back to an identity matrix. Let's rewrite the matrix in vector form: \[\begin{bmatrix}\textbf{x}\\\textbf{y}\end{bmatrix}\] You can transform a vector by a matrix by multiplying them together. When you multiply a vector and a matrix, you're multiplying each component of the vector with each vector in the matrix, similar to how a dot product between vectors works. Here is the math showing how A is being transformed into B. \[\textbf{B}=\textbf{A} \cdot \begin{bmatrix}\textbf{x}\\\textbf{y}\end{bmatrix}=A_x \cdot \textbf{x} + A_y \cdot \textbf{y}\] \[=1.0 \cdot (1.0,0.0) + 3.0 \cdot (0.0,1.0)\] \[=\underline{\underline{(1.0, 3.0)}}\]

Here's the same set of equations with all the vectors expanded, and standard matrix multiplication carried out: \[\textbf{B}=(A_x, A_y) \cdot \begin{bmatrix}x_x & x_y \\ y_x & y_y\end{bmatrix} =(A_x \cdot x_x + A_y \cdot y_x, A_x \cdot x_y + A_y \cdot y_y)\] \[=(1.0, 3.0) \cdot \begin{bmatrix}1.0 & 0.0 \\ 0.0 & 1.0\end{bmatrix}=(1.0 \cdot 1.0 + 3.0 \cdot 0.0, 1.0 \cdot 0.0 + 1.0 \cdot 3.0)\] \[=\underline{\underline{(1.0, 3.0)}}\]

Things to try:

• Drag x to (2,0) and y to (0,2). Notice how B and the pink axes are now scaled up by 2. You've created a uniform scale matrix. When the diagonal of your matrix is all the same number you have a uniform scale matrix.
• Drag x to (0,-1) and y to (1,0). Notice how B is rotated 90\(^{\circ}\) from A. You've created a rotation matrix. Whenever your matrix is made up of rows that are unit vectors that are all perpendicular to each other, you have a rotation matrix.
• Drag x to (1,-1) and y to (1,1). Notice how B is both rotated and scaled. A 2x2 matrix can represent a scale and rotation, but not translation. We'll get to translation further down.
• Drag x to (1,0) and y to (1,1). Notice how the pink coordinate system is skewed. This is called shearing. Shearing happens when one of the axes has a component parallel to another axis. Here, we have a horizontal shear because the y-axis is shifted along the x-axis.