Up Main page

Computer graphics

Some fundamental operations in computer graphics make use of linear algebra. Graphics processors often have dedicated hardware to perform matrix multiplications in massive parallelism. In this segment, we look at how three common two-dimensional (2D) graphics operations are carried out via matrix multiplications as found in the OpenGL standard.

Graphics operations

The three operations that we consider will be translation, dilation (a.k.a. scaling), and rotation. We will illustrate these operations on the unit cirle on the 2D plane given by \[C := \left\{ \begin{bmatrix} x_1 \\ x_2\end{bmatrix} : x_1^2 + x_2^2 = 1 \right\}.\]

Translation

Note that the origin is the centre of \(C\). To move the unit circle so that its centre becomes \(\begin{bmatrix} p \\q\end{bmatrix}\), we simply add \(\begin{bmatrix} p \\q\end{bmatrix}\) to each element in \(C\). The result can be written as the set \[\left\{ \begin{bmatrix} x_1+p \\ x_2+q\end{bmatrix} : x_1^2 + x_2^2 = 1 \right\}.\] This set can also be written as \[\left\{ \begin{bmatrix} x_1 \\ x_2\end{bmatrix} : (x_1-p)^2 + (x_2-q)^2 = 1 \right\}.\]

Hence, translation of points on the 2D plane is realized by tuple addition. But later, we will describe a way to perform translations as matrix multiplications.

Dilation

To stretch the unit circle horizontally by a factor of two, we simply multiply the \(x_1\) coordinate of each element of \(C\) by \(2\). The result can be written as the set \[\left\{ \begin{bmatrix} 2x_1 \\ x_2\end{bmatrix} : x_1^2 + x_2^2 = 1 \right\}.\] This set can also be written as \[\left\{ \begin{bmatrix} x_1 \\ x_2\end{bmatrix} : \left(\frac{x_1}{2}\right)^2 + x_2^2 = 1 \right\}.\]

We can also stretch vertically at the same time. Namely, if the horizontal stretch factor is \(a\) and the vertical one is \(b\) where \(a,b \gt 0\), we obtain \[\left\{ \begin{bmatrix} a x_1 \\ b x_2\end{bmatrix} : x_1^2 + x_2^2 = 1 \right\}.\] This can also be written as \[\left\{ \begin{bmatrix} a & 0 \\ 0 & b\end{bmatrix} \begin{bmatrix} x_1 \\ x_2\end{bmatrix} : x_1^2 + x_2^2 = 1 \right\}.\] The matrix \( \begin{bmatrix} a & 0 \\ 0 & b\end{bmatrix}\) is a dilation matrix. Note that this matrix is invertible with inverse \( \begin{bmatrix} \frac{1}{a} & 0 \\ 0 & \frac{1}{b}\end{bmatrix}\).

Rotation

Let \(R(\theta)\) denote the matrix \( \begin{bmatrix} \cos \theta & -\sin \theta \\ \sin \theta & \cos \theta \end{bmatrix}\).

Then, rotating some set \(S\) about the origin by \(\theta\) radians is given by \[\left \{ R(\theta) \begin{bmatrix} x_1 \\ x_2\end{bmatrix} : \begin{bmatrix} x_1 \\ x_2 \end{bmatrix} \in S\right \}.\]

Clearly, rotating \(C\) about the origin results in the same set. Therefore, let us look at something that will be affected by rotation. Let \(S\) be the set \(\left \{ \begin{bmatrix} x_1 \\ 0\end{bmatrix} : 0 \leq x_1 \leq 1\right \}\). Hence, \(S\) is the line segment between the origin and \(\begin{bmatrix} 1\\ 0\end{bmatrix}\).

To rotate this line segment by \(\pi/4\) radians, we first form \(R(\pi/4)\), which is \(\begin{bmatrix} \frac{1}{\sqrt{2}} & -\frac{1}{\sqrt{2}} \\ \frac{1}{\sqrt{2}} & \frac{1}{\sqrt{2}} \end{bmatrix}\). Now, \[\left \{ R(\pi/4) \begin{bmatrix} x_1 \\ x_2\end{bmatrix} : \begin{bmatrix} x_1 \\ x_2 \end{bmatrix} \in S\right \}\] is the set \[\left \{ \begin{bmatrix} \frac{1}{\sqrt{2}}x_1 \\ \frac{1}{\sqrt{2}}x_1\end{bmatrix} : 0 \leq x_1 \leq 1\right \}.\] Sketching this set, we see that it is the line segment from the origin to \(\begin{bmatrix} \frac{1}{\sqrt{2}} \\ \frac{1}{\sqrt{2}}\end{bmatrix}\), which indeed can be obtained from \(S\) by rotating it by \(\pi/4\) radians about the original.

The matrix \(R(\theta)\) is called a rotation matrix. One can easily check that the inverse matrix of \(R(\theta)\) is \(R(-\theta) = \begin{bmatrix} \cos \theta & \sin \theta \\ -\sin \theta & \cos \theta\end{bmatrix}\), which again is a rotation matrix as we would expect.

Lift and project

In summary, if \(S\) is a set of points on the 2D plane, we can translate it by tuple addition, dilate and rotate it (with respect to the origin) by multiplying each of the elements of \(S\) by an appropriate matrix.

We now describe a unified approach that allows us to perform each of the three operations as a matrix multiplication. To this end, we need to work in one dimension higher.

First, let \(S' = \left \{ \begin{bmatrix} x \\ y \\1 \end{bmatrix} : \begin{bmatrix} x \\ y \end{bmatrix} \in S\right\}\). Hence, the set \(S\) is lifted into three dimensions.

Define the matrix corresponding to translating horizontally by \(p\) and vertically by \(q\) to be \(\begin{bmatrix} 1 & 0 & p \\ 0 & 1 & q \\ 0 & 0 & 1 \end{bmatrix}\)

Define the matrix corresponding to dilating horizontally by a factor of \(a\) and vertically by a factor of \(b\) to be \(\begin{bmatrix} a & 0 & 0 \\ 0 & b & 0 \\ 0 & 0 & 1 \end{bmatrix}\)

Define the matrix corresponding to rotating by \(\theta\) to be \(\begin{bmatrix} \cos \theta & -\sin \theta & 0 \\ \sin \theta & \cos \theta & 0 \\ 0 & 0 & 1 \end{bmatrix}\)

Now, \[\begin{bmatrix} 1 & 0 & p \\ 0 & 1 & q \\ 0 & 0 & 1 \end{bmatrix}\begin{bmatrix} x \\ y \\ 1\end{bmatrix} = \begin{bmatrix} x + p \\ y + q \\ 1 \end{bmatrix},\] \[\begin{bmatrix} a & 0 & 0 \\ 0 & b & 0 \\ 0 & 0 & 1 \end{bmatrix}\begin{bmatrix} x \\ y \\ 1\end{bmatrix} = \begin{bmatrix} ax \\ by \\ 1 \end{bmatrix},\] and \[\begin{bmatrix} \cos \theta & -\sin \theta & 0 \\ \sin \theta & \cos \theta & 0 \\ 0 & 0 & 1 \end{bmatrix}\begin{bmatrix} x \\ y \\ 1\end{bmatrix} = \begin{bmatrix} (\cos \theta )x -(\sin\theta) y \\ (\sin \theta)x + (\cos \theta) y \\ 1 \end{bmatrix}.\]

Hence, if we extract just the top two components of each of the right-hand sides above, we obtain the result of translating, dilating, and rotation of \(\begin{bmatrix} x\\y\end{bmatrix}\), respectively. In other words, we project the back to two dimensions.

Note that the third components in all cases remain \(1\). Hence, we can string together the operations by forming a matrix product. For example, the operation for first dilating and then translating can be represented by the matrix product \[ \begin{bmatrix} 1 & 0 & p \\ 0 & 1 & q \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} a & 0 & 0 \\ 0 & b & 0 \\ 0 & 0 & 1 \end{bmatrix}.\] Note that the order in which the matrices appear since we are multiplying on the left.

Note that dilation and rotation are performed with respect to the origin. What if we want to dilate and rotate with respect to the point \(\begin{bmatrix} p \\ q\end{bmatrix}\) instead of the origin? What we can do is to first translate the set by \(\begin{bmatrix} -p \\ -q\end{bmatrix}\), then perform the required dilation or rotation with respect to the origin, and then translate the result by \(\begin{bmatrix} p \\ q\end{bmatrix}\). For example, the operation for rotating about \(\begin{bmatrix} p \\ q\end{bmatrix}\) by \(\theta\) is represented by the matrix product \[ \begin{bmatrix} 1 & 0 & p \\ 0 & 1 & q \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} \cos \theta & -\sin \theta & 0 \\ \sin \theta & \cos \theta & 0 \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} 1 & 0 & -p \\ 0 & 1 & -q \\ 0 & 0 & 1 \end{bmatrix}. \]

The ideas for 3D operations are similar. More details can be found at the OpenGL site.

Exercise

  1. Another common operation in computer graphics is reflection.

    1. Describe how one can perform a reflection along the horizontal axis as a matrix multiplication.

    2. Describe how one can perform a reflection along the line defined by \(ax + by + c = 0\) as a matrix multiplication.