Introduction to Graphics Math

Matrix Multiplication


Rotation: 0.000\(^{\circ}\)
Scale: (1.0, 1.0)

We've seen how a vector can be transformed by multiplying it by a matrix. You can also transform a whole matrix by another by multiplying them. Each vector in the matrix is transformed, just like a single vector would be. Just like when transforming vectors, the left operand is being transformed by the one on the right. In this example, we have have rotation matrix and scale matrix being multiplied together. You can flip the order they are multiplied in to see the effect it has on the transformed coordinate system. \[ \textbf{S}=\begin{bmatrix}1.0 & 0.0 & 0.0 \\ 0.0 & 1.0 & 0.0 \\ 0.0 & 0.0 & 1.0\end{bmatrix} =\begin{bmatrix}\textbf{S}_\textbf{x} \\ \textbf{S}_\textbf{y} \\ \textbf{S}_\textbf{T}\end{bmatrix} \] \[ \textbf{R}=\begin{bmatrix}1.000 & 0.000 & 0.0 \\ 0.000 & 1.000 & 0.0 \\ 0.0 & 0.0 & 1.0\end{bmatrix} =\begin{bmatrix}\textbf{R}_\textbf{x} \\ \textbf{R}_\textbf{y} \\ \textbf{R}_\textbf{T}\end{bmatrix} \] \[\textbf{S} \textbf{R} =\begin{bmatrix}\textbf{S}_\textbf{x} \\ \textbf{S}_\textbf{y} \\ \textbf{S}_\textbf{T}\end{bmatrix} \begin{bmatrix}\textbf{R}_\textbf{x} \\ \textbf{R}_\textbf{y} \\ \textbf{R}_\textbf{T}\end{bmatrix} = \begin{bmatrix}\textbf{S}_\textbf{x}\textbf{R} \\ \textbf{S}_\textbf{y}\textbf{R} \\ \textbf{S}_\textbf{T}\textbf{R}\end{bmatrix} \] \[ =\underline{\underline{ \begin{bmatrix} 1.000 & 0.000 & 0.0 \\ 0.000 & 1.000 & 0.0 \\ 0.0 & 0.0 & 1.0 \end{bmatrix}}} \]

Note: Throughout this document we've been using row vectors to represent our matrices and vectors. Elsewhere, column vectors are often used which changes the order of multiplication around. If column vectors were being used the right operand is being transformed by the one on the left. Read more about row and column vectors here. For a more advanced demo that combines translation, rotation and scale and can be combined in any order go here.