Computer Graphics

Some computers can only draw straight lines on the screen, but complicated drawings can be made with a long series of line-drawing instructions. For example, the letter ``F'' could be drawn in its normal orientation at the origin with the following set of instructions:

  1. Draw a line from $ (0,0)$ to $ (0,5)$.
  2. Draw a line from $ (0,5)$ to $ (3,5)$.
  3. Draw a line from $ (0,3)$ to $ (2,3)$.

Imagine that you have a drawing that's far more complicated than the ``F'' above consisting of thousands of instructions similar to those above. Let's take a look at the following sorts of problems:

  1. How would you convert the coordinates so that the drawing would be twice as big? How about stretched twice as high ($ y$-direction) and three times as wide ($ x$-direction)?

  2. Could you draw the mirror image through the $ y$-axis?

  3. How would you shift the drawing 4 units to the right and 5 units down?

  4. Could you rotate it $ 90^\circ$ counter-clockwise about the origin? Could you rotate it by an angle $ \theta$ counter-clockwise about the origin?

  5. Could you rotate it by an angle $ \theta$ about the point $ (7,-3)$?

  6. Ignoring the problem of making the drawing on the screen, what if your ``drawing'' were in three dimensions? Could you solve problems similar to those above to find the new (3-dimensional) coordinates after your object has been translated, scaled, rotated, et cetera?

It turns out that the answers to all of the problems above can be achieved by multiplying your vectors by a matrix. Of course a different matrix will solve each one. Here are the solutions:

Graphics Solution 1:

To scale in the $ x$-direction by a factor of 2, we need to multiply all the $ x$ coordinates by 2. To scale in the $ y$-direction, we similarly need to multiply the $ y$ coordinates by the same scale factor of 2. The solution to scale any drawing by a factor $ s_x$ in the $ x$-direction and $ s_y$ in the $ y$-direction is to multiply all the input vectors by a general scaling matrix as follows:

$\displaystyle \begin{pmatrix}s_x & 0\\ 0 & s_y\end{pmatrix}\begin{pmatrix}x\\ y\end{pmatrix}= \begin{pmatrix}s_xx\\ s_yy\end{pmatrix}. $

To uniformly scale everything to twice as big, let $ s_x=s_y=2$. To scale by a factor of 2 in the $ x$-direction and 3 in the $ y$-direction, let $ s_x=2$ and $ s_y=3$.

We'll illustrate the general procedure with the drawing instructions for the ``F'' that appeared earlier. The drawing commands are described in terms of a few points: $ (0,0)$, $ (0,5)$, $ (3,5)$, $ (0,3)$, and $ (2,3)$. If we write all five of those points as column vectors and multiply all five by the same matrix (either of the two above), we'll get five new sets of coordinates for the points. For example, in the case of the second example where the scaling is 2 times in $ x$ and 3 times in $ y$, the five points will be converted by matrix multiplication to: $ (0,0)$, $ (0,15)$, $ (6,15)$, $ (0, 9)$ and $ (4, 9)$. If we rewrite the drawing instructions using these transformed points, we get:

  1. Draw a line from $ (0,0)$ to $ (0,15)$.
  2. Draw a line from $ (0,15)$ to $ (6,15)$.
  3. Draw a line from $ (0, 9)$ to $ (6,9)$.
Follow the instructions above and see that you draw an appropriately stretched ``F''. In fact, do the same thing for each of the matrix solutions in this set to verify that the drawing is transformed appropriately. Notice that if $ s_x$ or $ s_y$ is smaller than 1, the drawing will be shrunk--not expanded.

Graphics Solution 2:

A mirror image is just a scaling by $ -1$. To mirror through the $ y$-axis means that each $ x$-coordinate will be replaced with its negative. Here's a matrix multiplication that will do the job:

$\displaystyle \begin{pmatrix}-1 & 0\\ 0 & 1\end{pmatrix}\begin{pmatrix}x\\ y\end{pmatrix}= \begin{pmatrix}s_xx\\ s_yy\end{pmatrix}. $

Graphics Solution 3:

To translate points 4 to the right and 5 units down, you essentially need to add 4 to every $ x$ coordiante and to subtract 5 from every $ y$ coordinate. If you try to solve this exactly as in the examples above, you'll find it is impossible. To convince yourself it's impossible with any $ 2\times 2$ matrix, consider what will happen to the origin: $ (0,0)$. You want to move it to $ (4, -5)$, but look what happens if you multiply it by any $ 2\times 2$ matrix ($ a$, $ b$, $ c$, and $ d$ can be any numbers):

$\displaystyle \begin{pmatrix}a&b\\ c&d\end{pmatrix}\begin{pmatrix}0\\ 0\end{pmatrix}= \begin{pmatrix}0\\ 0\end{pmatrix}. $

In other words, no matter what $ a, b, c,$ and $ d$ are, the matrix will map the origin back to the origin, so translation using this scheme is impossible.

But there's a great trick2. For every one of your two-dimensional vectors, add an artificial third component of 1. So the point $ (3, 6)$ will become $ (3, 6, 1)$, the origin will become $ (0, 0, 1)$, et cetera. The column vectors will now have three rows, so the transformation matrix will need to be $ 3\times 3$. To translate by $ t_x$ in the $ x$-direction and $ t_y$ in the $ y$-direction, multiply the artifically-enlarged vector by a matrix as follows:

$\displaystyle \begin{pmatrix}1&0&t_x\\ 0&1&t_y\\ 0&0&1\end{pmatrix}\begin{pmatrix}x\\ y\\ 1\end{pmatrix}= \begin{pmatrix}x+t_x\\ y+t_y\\ 1\end{pmatrix}. $

The resulting vector is just what you want, and it also has the artificial 1 on the end that you can just throw away. To get the particular solution to the problem proposed above, simply let $ t_x=4$ and $ t_y=-5$.

But now you're probably thinking, ``That's a neat trick, but what happens to the matrices we had for scaling? What a pain to have to convert to the artificial 3-dimensional form and back if we need to mix scaling and translation.'' The nice thing is that we can always use the artifically extended form. Just use a slightly different form of the scaling matrix:

$\displaystyle \begin{pmatrix}s_x&0&0\\ 0&s_y&0\\ 0&0&1\end{pmatrix}\begin{pmatrix}x\\ y\\ 1\end{pmatrix}= \begin{pmatrix}s_xx\\ s_yy\\ 1\end{pmatrix}. $

In the solutions that follow, we'll always add a 1 as the artifical third component3.

Graphics Solution 4:

Convince yourself (by drawing a few examples, if necessary) that to rotate a point counter-clockwise by $ 90^{\circ}$ about the origin, you will basically make the original $ x$ coordinate into a $ y$ coordinate, and vice-versa. But not quite. Anything that had a positive $ y$ coordinate will, after rotation by $ 90^{\circ}$, have a negative $ x$ coordinate and vice-versa. In other words, the new $ y$ coordinate is the old $ x$ coordinate, and the new $ x$ coordinate is the negative of the old $ y$ coordinate. Convince yourself that the following matrix does the trick (and notice that we've added the 1 as an artificial third component):

$\displaystyle \begin{pmatrix}0&-1&0\\ 1&0&0\\ 0&0&1\end{pmatrix}\begin{pmatrix}x\\ y\\ 1\end{pmatrix}= \begin{pmatrix}-y\\ x\\ 1\end{pmatrix}. $

The general solution for a rotation counter-clockwise by an angle $ \theta$ is given by the following matrix multiplication:

$\displaystyle \begin{pmatrix}\cos\theta&-\sin\theta&0\\ \sin\theta&\cos\theta&... ...n{pmatrix}x\cos\theta-y\sin\theta\\ x\sin\theta+y\cos\theta \\ 1\end{pmatrix}. $

If you've never seen anything like this before, you might consider trying it for a couple of simple angles, like $ \theta=45^{\circ}$ or $ \theta = 30^{\circ}$ and put in the drawing coordinates for the letter ``F'' given earlier to see that it's transformed properly.

Graphics Solution 5:

Here is where the power of matrices really comes through. Rather than solve the problem from scratch as we have above, let's just solve it using the information we already have. Why not translate the point $ (7,-3)$ to the origin, then do a rotation about the origin, and finally, translate the result back to $ (7,-3)$? Each of those operations can be achieved by a matrix multiplication. Here is the final solution:

$\displaystyle \begin{pmatrix}1&0&7\\ 0&1&-3\\ 0&0&1\end{pmatrix}\begin{pmatrix}... ...trix}1&0&-7\\ 0&1&3\\ 0&0&1\end{pmatrix}\begin{pmatrix}x\\ y\\ 1\end{pmatrix}. $

Notice carefully the order of the matrix multiplication. The matrix closest to the $ (x,y,1)$ column vector is the first one that's applied to it--it should move $ (7,-3)$ to the origin. To do that, we need to translate $ x$ coordinates by $ -7$ and $ y$ coordinates by $ 3$. The next operation to be done is the rotation by an arbitrary angle $ \theta$, using the matrix form from the previous problem. Finally, to translate back to $ (7,-3)$ we have to translate in the opposite direction from what we did originally, and the matrix on the far left above does just that.

Remember that for any particular value of $ \theta$, $ \sin\theta$ and $ \cos\theta$ are just numbers, so if you knew the exact rotation angle, you could just plug the numbers in to the middle $ 3\times 3$ matrix and multiply together the three matrices on the left. Then to transform any particular point, there would be only one matrix multiplication involved.

To convince yourself that we've got the right answer, why not put in a particular (simple) rotation of $ 90^{\circ}$ into the matrices and work it out? $ \cos 90^{\circ} = 0$ and $ \sin 90{^\circ} = 1$, so the product of the three matrices on the left is:

$\displaystyle \begin{pmatrix}1&0&7\\ 0&1&-3\\ 0&0&1\end{pmatrix}\begin{pmatrix}... ...&3\\ 0&0&1\end{pmatrix}= \begin{pmatrix}0&-1&4\\ 1&0&-10\\ 0&0&1\end{pmatrix}. $

Try multiplying all the vectors from the ``F'' example by the single matrix on the right above and convince yourself that you've succeeded in rotating the ``F'' by $ 90^\circ$ counter-clockwise about the point $ (7,-3)$.

Graphics Solution 6:

The answer is yes. Of course you'll have to add an artificial fourth dimension which is always 1 to your three-dimensional coordinates, but the form of the matrices will be similar.

On the left below is the mechanism for scaling by $ s_x$, $ s_y$, and $ s_z$ in the $ x$-, $ y$-, and $ z$-directions; on the right is a multiplication that translates by $ t_x$, $ t_y$, and $ t_z$ in the three directions.

$\displaystyle \begin{pmatrix} s_x&0&0&0\\ 0&s_y&0&0\\ 0&0&s_z&0\\ 0&0&0&1 \end{... ..._y\\ 0&0&1&t_z\\ 0&0&0&1 \end{pmatrix}\begin{pmatrix}x\\ y\\ z\\ 1\end{pmatrix}$

Finally, to rotate by an angle of $ \theta$ counter-clockwise about the three axes, multiply your vector on the left by the appropriate one of the following three matrices (left, middle, and right correspond to rotation about the $ x$-axis, $ y$-axis, and $ z$-axis:

$\displaystyle \begin{pmatrix} 1 & 0 & 0 & 0 \\ 0 & \cos\theta & -\sin\theta & ... ...\\ \sin\theta & \cos\theta & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0&0&0&1 \end{pmatrix}$