Computer Graphics

The prior topic on Projective Geometry gives this model of how our eye, or a camera, sees the world.

All of the points on a line through the origin project to the same spot.

In that topic we defined that for any nonzero vector $\overrightarrow{v}\in {\mathrm{ℝ}}^3$, the associated point $p$ in the projective plane is the set $\{k\overrightarrow{v}\mid k\in \mathrm{ℝ}\text{ and }k\ne 0\}$. This is the collection of nonzero vectors lying on the same line through the origin as $\overrightarrow{v}$.

To describe a projective point we can give any representative member of the line. Thus these each represent the same projective point.

$$\left(\begin{array}{c}1\\ 2\\ 3\end{array}\right)\left(\begin{array}{c}1/3\\ 2/3\\ 1\end{array}\right)\left(\begin{array}{c}-2\\ -4\\ -6\end{array}\right)$$

Each is a homogeneous coordinate vector for the point $p$. Two homogeneous coordinate vectors (which are by definition nonzero)

$${\tilde{p}}_1=\left(\begin{array}{c}{a}_1\\ b_1\\ c_1\end{array}\right){\tilde{p}}_2=\left(\begin{array}{c}{a}_2\\ b_2\\ c_2\end{array}\right)$$

represent the same projective point if there is a scaling factor $s\ne 0$ so that $s{\tilde{p}}_1={\tilde{p}}_2$.

Of the infinitely many possible representatives, often we use the one whose third component is $1$. This amounts to projecting onto the plane $z=1$.

In this topic we will show how to use these ideas to perform some effects from computer graphics. For that we will take the prior picture and redraw it without the sphere, with a movie projector at the origin, and with plane $z=1$ looking like a movie theater screen.

This associates vectors in three-space on the grey line with $p$ in the screen plane.

$$\tilde{p}=\left(\begin{array}{c}a\\ b\\ c\end{array}\right)\mapsto p=\left(\begin{array}{c}x\\ y\end{array}\right)=\left(\begin{array}{c}a/c\\ b/c\end{array}\right)$$

We can adapt the things we have already seen about matrices to perform the transformations. Rotation is an example. This matrix rotates in the plane $z=1$ about the origin by the angle $\theta$.

$$\left(\begin{array}{ccc}\cos \theta & -\sin \theta & 0\\ \sin \theta & \cos \theta & 0\\ 0& 0& 1\end{array}\right)\left(\begin{array}{c}x\\ y\\ 1\end{array}\right)=\left(\begin{array}{c}cos\theta \cdot x-\sin \theta \cdot y\\ \sin \theta \cdot x+\cos \theta \cdot y\\ 1\end{array}\right)$$

Notice that it works on any homogeneous coordinate vector; if we apply the matrix

$$\left(\begin{array}{ccc}\cos \theta & -\sin \theta & 0\\ \sin \theta & \cos \theta & 0\\ 0& 0& 1\end{array}\right)\left(\begin{array}{c}a\\ b\\ c\end{array}\right)=\left(\begin{array}{c}cos\theta \cdot a-\sin \theta \cdot b\\ \sin \theta \cdot a+\cos \theta \cdot b\\ c\end{array}\right)$$

and then move to the $z=1$ plane

$$\left(\begin{array}{c}cos\theta \cdot a-\sin \theta \cdot b\\ \sin \theta \cdot a+\cos \theta \cdot b\\ c\end{array}\right)\mapsto \left(\begin{array}{c}(cos\theta \cdot a-\sin \theta \cdot b)/c\\ (\sin \theta \cdot a+\cos \theta \cdot b)/c\\ 1\end{array}\right)$$

then we get the same result as if we had first moved to the plane and then applied the matrix.

$$\left(\begin{array}{ccc}\cos \theta & -\sin \theta & 0\\ \sin \theta & \cos \theta & 0\\ 0& 0& 1\end{array}\right)\left(\begin{array}{c}a/c\\ b/c\\ 1\end{array}\right)=\left(\begin{array}{c}cos\theta \cdot a/c-\sin \theta \cdot b/c\\ \sin \theta \cdot a/c+\cos \theta \cdot b/c\\ 1\end{array}\right)$$

So there is no harm in working with homogeneous coordinates. But what is the advantage?

The computer graphic operation of translation, of sliding things from one place to another, is not a linear transformation because it does not leave the origin fixed. But if we work with homogeneous coordinates then we can use matrices. This matrix will translate points in the plane of interest by $t_x$ in the $x$ direction and $t_y$ in the $y$ direction.

$$\left(\begin{array}{ccc}1& 0& t_x\\ 0& 1& t_y\\ 0& 0& 1\end{array}\right)\left(\begin{array}{c}a\\ b\\ c\end{array}\right)=\left(\begin{array}{c}a+t_x\cdot c\\ b+t_y\cdot c\\ c\end{array}\right)\mapsto \left(\begin{array}{c}a/c+t_x\\ b/c+t_y\\ 1\end{array}\right)$$

That is, in the plane of interest this matrix slides $(\genfrac{}{}{0ex}{}{a/c}{b/c})$ to $(\genfrac{}{}{0ex}{}{a/c+t_x}{b/c+t_y})$. So the homogeneous coordinates allow us to use matrices.

OK then, but what is the advantages of using these matrices? What does the extra coordinate get us? Suppose that we are making a movie with computer graphics. We are at a moment where the camera is panning and rotating at the same time. Every single point in the scene needs to be both translated and rotated. Rather than have the computer perform two operations to each point, we can multiply the two matrices and then the computer only applies one operation to each point; it multiplies that point by the resulting matrix. That is a tremendous speedup and simplification.

We will list some examples of the effects that we can get. We have already talked about rotation. Here is the picture of rotation by a half radian.

And here is a translation with $t_x=1.5$ and $t_y=0.5$.

Next is scaling. This matrix rescales things in the target plane by a factor of $s$ in the $x$-direction, and by a factor of $t$ in the $y$ direction.

$$\left(\begin{array}{ccc}s& 0& 0\\ 0& t& 0\\ 0& 0& 1\end{array}\right)\left(\begin{array}{c}a/c\\ b/c\\ 1\end{array}\right)=\left(\begin{array}{c}s\cdot a/c\\ t\cdot b/c\\ 1\end{array}\right)$$

In this picture we rescale in the $x$ direction by a factor of $s=2.5$ and in the $y$-direction by $t=0.75$.

If we take $s=t$ then the entire shape is rescaled. For instance, if we string together frames with $s=t=1.10$ then in the movie it will seem that the object is getting closer to us.

We can reflect the object. This reflects about the line $y=x$.

$$\left(\begin{array}{ccc}0& 1& 0\\ 1& 0& 0\\ 0& 0& 1\end{array}\right)\left(\begin{array}{c}a/c\\ b/c\\ 1\end{array}\right)=\left(\begin{array}{c}b/c\\ a/c\\ 1\end{array}\right)$$

The dashed line here is $y=x$.

This reflects about $y=-x$.

$$\left(\begin{array}{ccc}0& -1& 0\\ -1& 0& 0\\ 0& 0& 1\end{array}\right)\left(\begin{array}{c}a/c\\ b/c\\ 1\end{array}\right)=\left(\begin{array}{c}-b/c\\ -a/c\\ 1\end{array}\right)$$

The dashed line below is $y=-x$.

More complex transformations are possible. This is a shear.

$$\left(\begin{array}{ccc}1& 1& 0\\ 0& 1& 0\\ 0& 0& 1\end{array}\right)\left(\begin{array}{c}a/c\\ b/c\\ 1\end{array}\right)=\left(\begin{array}{c}a/c+b/c\\ b/c\\ 1\end{array}\right)$$

In this picture the $y$ components of points are unchanged, but the $x$ components have added to them the value of $y$.

A major advantage of having this all be matrices is that we can do complex things by combining simple things. To reflect about the line $y=-x+2$ we can find the three matrices to slide everything to the origin, then reflect about $y=-x$, and then slide back.

$$\begin{array}{cc}\left(\begin{array}{ccc}1& 0& 0\\ 0& 1& 2\\ 0& 0& 1\end{array}\right)\left(\begin{array}{ccc}0& -1& 0\\ -1& 0& 0\\ 0& 0& 1\end{array}\right)\left(\begin{array}{ccc}1& 0& 0\\ 0& 1& -2\\ 0& 0& 1\end{array}\right)& \text{(*)}\end{array}$$

(As always, the action done first is described by the matrix on the right. That is, the matrix on the right describes sliding all points in the plane of interest by $-2$, the matrix in the middle reflects about $y=-x$, and the matrix on the left slides all points back.)

There are even more complex effects possible with matrices. These are the matrices for the general affine transformation, and the general projective transformation.

$$\left(\begin{array}{ccc}d& e& f\\ g& h& i\\ 0& 0& 1\end{array}\right)\left(\begin{array}{ccc}d& e& f\\ g& h& i\\ j& k& 1\end{array}\right)$$

However, description of their geometric effect is beyond our scope.

There is a vast literature on computer graphics, in which linear algebra plays an important part. An excellent source is [Hughes et al.]. The subject is a wonderful blend of mathematics and art; see [Disney].

References cited in this section