i
i
i
i
i
i
i
i
6
Transformation Matrices
The machinery of linear algebra can be used to express many of the operations
required to arrange objects in a 3D scene, view them with cameras, and get them
onto the screen. Geometric transformations like rotation, translation, scaling, and
projection can be accomplished with matrix multiplication, and the transforma-
tion matrices used to do this are the subject of this chapter.
We will show how a set of points transforms if the points are represented as
offset vectors from the origin, and we will use the clock shown in Figure 6.1 as
an example of a point set. So think of the clock as a bunch of points that are the
ends of vectors whose tails are at the origin. We also discuss how these transforms
operate differently on locations (points), displacement vectors, and surface normal
vectors.
6.1 2D Linear Transformations
We can use a 2 × 2 matrix to change, or transform, a 2D vector:
a
11
a
12
a
21
a
22
x
y
=
a
11
x + a
12
y
a
21
x + a
22
y
.
This kind of operation, which takes in a 2-vector and produces another 2-vector
by a simple matrix multiplication, is a linear transformation.
By this simple formula we can achieve a variety of useful transformations,
depending on what we put in the entries of the matrix, as will be discussed in
111
i
i
i
i
i
i
i
i
112 6. Transformation Matrices
the following sections. For our purposes, consider moving along the x-axis a
horizontal move and along the y-axis, a vertical move.
6.1.1 Scaling
The most basic transform is a scale along the coordinate axes. This transform can
change length and possibly direction:
scale(s
x
,s
y
) =
s
x
0
0 s
y
.
Note what this matrix does to a vector with Cartesian components (x, y):
s
x
0
0 s
y
x
y
=
s
x
x
s
y
y
.
So just by looking at the matrix of an axis-aligned scale we can read off the two
scale factors.
Example. The matrix that shrinks x and y uniformly by a factor of two is (Fig-
ure 6.1)
scale(0.5, 0.5) =
0.50
00.5
.
A matrix which halves in the horizontal and increases by three-halves in the ver-
tical is (see Figure 6.2)
scale(0.5, 1.5) =
0.50
01.5
.
Figure 6.1. Scaling uniformly by half for each axis: The axis-aligned scale matrix has
the proportion of change in each of the diagonal elements and zeroes in the off-diagonal
elements.
i
i
i
i
i
i
i
i
6.1. 2D Linear Transformations 113
Figure 6.2. Scaling non-uniformly in
x
and
y
: The scaling matrix is diagonal with non-equal
elements. Note that the square outline of the clock becomes a rectangle and the circular
face becomes an ellipse.
6.1.2 Shearing
A shear is something that pushes things sideways, producing something like a
deck of cards across which you push your hand; the bottom card stays put and
cards move more the closer they are to the top of the deck. The horizontal and
vertical shear matrices are
shear-x(s) =
1 s
01
, shear-y(s) =
10
s 1
.
Example. The transform that shears horizontally so that vertical lines become 45
◦
lines leaning towards the right is (see Figure 6.3)
shear-x(1) =
11
01
.
Figure 6.3. An
x
-shear matrix moves points to the right in proportion to their
y
-coordinate.
Now the square outline of the clock becomes a parallelogram and, as with scaling, the circular
face of the clock becomes an ellipse.
i
i
i
i
i
i
i
i
114 6. Transformation Matrices
Figure 6.4. A
y
-shear matrix moves points up in proportion to their
x
-coordinate.
An analogous transform vertically is (see Figure 6.4)
shear-y(1) =
10
11
.
In both cases the square outline of the sheared clock becomes a parallelogram,
In fact, the image of a cir-
cle under any matrix trans-
formation is an ellipse.
and the circular face of the sheared clock becomes an ellipse.
Another way to think of a shear is in terms of rotation of only the vertical
(or horizontal) axes. The shear transform that takes a vertical axis and tilts it
clockwise by an angle φ is
1tanφ
01
.
Similarly, the shear matrix which rotates the horizontal axis counterclockwise by
angle φ is
10
tan φ 1
.
6.1.3 Rotation
Suppose we want to rotate a vector a by an angle φ counterclockwise to get
vector b (Figure 6.5). If a makes an angle α with the x-axis, and its length is
r = x
2
a
+ y
2
a
, then we know that
x
a
= r cos α,
y
a
= r sin α.
Get Fundamentals of Computer Graphics, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
