Chapter 6

Moving Things Around: Affine Maps in 2D

Imagine playing a video game. As you press a button, figures and objects on the screen start moving around; they shift their positions, they rotate, they zoom in or out. As you see this kind of motion, the game software must carry out quite a few transformations. In Figure 6.1, they have been applied to a familiar face in gaming. These computations are implementations of affine maps, the subject of this chapter.

6.1 Coordinate Transformations

In Section 4.1 the focus was on constructing a linear map that takes a vector v in the [e1, e2]-system,

$v=v_1{e}_1+v_2{e}_2,$

to a vector v′ in the [a1, a2]-system

$v^{\prime }=v_1{a}_1+v_2{a}_2.$

Recall that this latter system describes a parallelogram (skew) target box with lower-left corner at the origin. In this chapter, we want to construct this skew target box anywhere, and we want to map points rather than vectors, as illustrated by Sketch 6.1.

Now we will describe a skew target box by a point p and two vectors a1, a2. A point x is mapped to a point x′ by

$\begin{array}{cc}{x}^{\prime }=p+x_1{a}_1+x_2{a}_2,& \left(6.1\right)\end{array}$

$\begin{array}{cc}=p+Ax,& \left(6.2\right)\end{array}$

as illustrated by Sketch 6.1. This simply states that we duplicate the [e1, e2]-geometry in the [a1, a2]-system: x′ has the same coordinates in the new system as x did in the old one. Technically, the linear map A in (6.2) is applied to the vector x − o, so it should be written as

$\begin{array}{cc}{x}^{\prime }=p+A\left(x-o\right),& \left(6.3\right)\end{array}$

where o is the origin of x’s coordinate system. In most cases, we will have the familiar

$o=\left[\begin{array}{c}0\\ 0\end{array}\right],$

and then we will simply drop the “−o” part, as in (6.2).

Affine maps are the basic tools to move and orient objects. All are of the form given in (6.3) and thus have two parts: a translation, given by p, and a linear map, given by A.

Let’s try representing the coordinate transformation of Section 1.1 as an affine map. The point u lives in the [e1, e2]-system, and we wish to find x in the [a1, a2]-system. Recall that the extents of the target box defined Δ1 = max1 − min1 and Δ2 = max2 − min2, so we set

$\begin{array}{ccc}p=\left[\begin{array}{c}{\min }_1\\ {\min }_2\end{array}\right],& a_1=\left[\begin{array}{c}{\Delta }_1\\ 0\end{array}\right],& a_2=\left[\begin{array}{c}0\\ {\Delta }_2\end{array}\right].\end{array}$

The affine map is defined as

$\left[\begin{array}{c}{x}_1\\ x_2\end{array}\right]=\left[\begin{array}{c}{\min }_1\\ {\min }_2\end{array}\right]+\left[\begin{array}{cc}{\Delta }_1& 0\\ 0& {\Delta }_2\end{array}\right] \left[\begin{array}{c}{u}_1\\ u_2\end{array}\right],$

and we recover (1.3) and (1.4).

Of course we are not restricted to target boxes that are parallel to the [e1, e2]-coordinate axes. Let’s look at such an example.

Example 6.1

Let

$\begin{array}{ccc}p=\left[\begin{array}{c}2\\ 2\end{array}\right],& a_1=\left[\begin{array}{c}2\\ 1\end{array}\right],& a_2=\left[\begin{array}{r}\hfill -2\\ \hfill 4\end{array}\right]\end{array}$

define a new coordinate system, and let

$x=\left[\begin{array}{c}2\\ 1/2\end{array}\right]$

be a point in the [e1, e2]-system. In the new coordinate system, the [a1, a2]-system, the coordinates of x define a new point x′. What is this point with respect to the [e1, e2]-system? The solution:

$\begin{array}{cc}{x}^{\prime }=\left[\begin{array}{c}2\\ 2\end{array}\right]+\left[\begin{array}{rr}\hfill 2& \hfill -2\\ \hfill 1& \hfill 4\end{array}\right] \left[\begin{array}{c}2\\ 1/2\end{array}\right]=\left[\begin{array}{c}5\\ 6\end{array}\right].& \left(6.4\right)\end{array}$

Thus, x′ has coordinates

$\left[\begin{array}{c}2\\ 1/2\end{array}\right]$

with respect to the [a1, a2]-system; with respect to the [e1, e2]-system, it has coordinates

$\left[\begin{array}{c}5\\ 6\end{array}\right].$.

(See Sketch 6.2 for an illustration.)

And now an example of a skew target box. Let’s revisit Example 5.1 from Section 5.1, and add an affine aspect to it by translating our target box.

Example 6.2

Sketch 6.3 illustrates the given geometry,

$\begin{array}{ccc}p=\left[\begin{array}{c}2\\ 2\end{array}\right],& a_1=\left[\begin{array}{c}2\\ 1\end{array}\right],& a_2=\left[\begin{array}{c}4\\ 6\end{array}\right],\end{array}$

and the point

$r=\left[\begin{array}{c}6\\ 6\end{array}\right]$

with respect to the [e1, e2]-system. We may ask, what are the coordinates of r with respect to the [a1, a2]-system? This was the topic of Chapter 5; we simply set up the linear system, Au = (r − p), or

$\left[\begin{array}{cc}2& 4\\ 1& 6\end{array}\right] \left[\begin{array}{c}{u}_1\\ u_2\end{array}\right]=\left[\begin{array}{c}4\\ 4\end{array}\right].$

Using Cramer’s rule or Gauss elimination from Chapter 5, we find that $u=\left[\begin{array}{c}1\\ 1/2\end{array}\right]$.

6.2 Affine and Linear Maps

A map of the form v′ = Av is called a linear map because it preserves linear combinations of vectors. This idea is expressed in (4.11) and illustrated in Sketch 4.4. A very fundamental property of linear maps has to do with ratios, which are defined in Section 2.5. What happens to the ratio of three collinear points when we map them by an affine map? The answer to this question is fairly fundamental to all of geometry, and it is: nothing. In other words, affine maps leave ratios unchanged, or invariant. To see this, let

$p_2=\left(1-t\right)p_1+t{p}_3$

and let an affine map be defined by

$x^{\prime }=Ax+p.$

We now have

$\begin{array}{ll}{p^{\prime }}_2& =A((1-t)p_1+t{p}_3)+p\\ & =\left(1-t\right)A{p}_1+tA{p}_3+\left[\left(1-t\right)+t\right]p\\ & =\left(1-t\right)\left[A{p}_1+p\right]+t\left[A{p}_3+p\right]\\ & =\left(1-t\right){p^{\prime }}_1+t{p^{\prime }}_3.\end{array}$

The step from the first to the second equation may seem a bit contrived; yet it is the one that makes crucial use of the fact that we are combining points using barycentric combinations: (1 − t) + t = 1.

The last equation shows that the linear (1 − t), t relationship among three points is not changed by affine maps—meaning that their ratio is invariant, as is illustrated in Sketch 6.4. In particular, the midpoint of two points will be mapped to the midpoint of the image points.

The other basic property of affine maps is this: they map parallel lines to parallel lines. If two lines do not intersect before they are mapped, then they will not intersect afterward either. Conversely, two lines that intersect before the map will also do so afterward. Figure 6.2 shows how two families of parallel lines are mapped to two families of parallel lines. The two families intersect before and after the affine map. The map uses the matrix

$A=\left[\begin{array}{cc}1& 2\\ 2& 1\end{array}\right].$

6.3 Translations

If an object is moved without changing its orientation, then it is translated. See Figure 6.3 in which points on a circle have been translated by a fixed amount.

How is this action covered by the general affine map in (6.3)? Recall the identity matrix from Section 5.9, which has no effect whatsoever on any vector: we always have

$Ix=x,$

which you should be able to verify without effort.

A translation is thus written in the context of (6.3) as

$x^{\prime }=p+Ix.$

One property of translations is that they do not change areas; the two circles in Figure 6.3 have the same area. A translation causes a rigid, body motion. Recall that rotations are also of this type.

6.4 More General Affine Maps

In this section, we present two very common geometric problems that demand affine maps. It is one thing to say “every affine map is of the form Ax + p,” but it is not always clear what A and p should be for a given problem. Sometimes a more constructive approach is called for, as is the case with Problem 2 in this section.

Problem 1: Let r be some point around which you would like to rotate some other point x by a degrees, as shown in Sketch 6.5. Let x′ be the rotated point.

Rotations have been defined only around the origin, not around arbitrary points. Hence, we translate our given geometry (the two points r and x) such that r moves to the origin. This is easy:

$\begin{array}{cc}\overline{r}=r-r=0,& \overline{x}=x-r.\end{array}$

Now we rotate the vector $\overline{x}$ around the origin by α degrees:

$\overline{\overline{x}}=A\overline{x}.$

The matrix A would be taken directly from (4.16). Finally, we translate $\overline{\overline{x}}$ back to the center r of rotation:

$x^{\prime }=A\overline{x}+r.$

Let’s reformulate this in terms of the given information. This is achieved by replacing $\overline{x}$ by its definition:

$\begin{array}{cc}{x}^{\prime }=A\left(x-r\right)+r.& \left(6.5\right)\end{array}$

Example 6.3

Let

$\begin{array}{cc}r=\left[\begin{array}{c}2\\ 1\end{array}\right],& x=\left[\begin{array}{c}3\\ 0\end{array}\right],\end{array}$

and a = 90°. We obtain

$x^{\prime }=\left[\begin{array}{rr}\hfill 0& \hfill -1\\ \hfill 1& \hfill 0\end{array}\right] \left[\begin{array}{r}\hfill 1\\ \hfill -1\end{array}\right]+\left[\begin{array}{c}2\\ 1\end{array}\right]=\left[\begin{array}{c}3\\ 2\end{array}\right].$

See Sketch 6.6 for an illustration.

Problem 2: Let l be a line and x be a point. You want to reflect x across l, with result x′, as shown in Sketch 6.7. This problem could be solved using the following affine maps. Find the intersection r of l with the e1-axis. Find the cosine of the angle between l and e1. Rotate x around r such that l is mapped to the e1-axis. Reflect the rotated x across the e1-axis, and finally undo the rotation. Complicated!

It is much easier to employ the “foot of a point” algorithm that finds the closest point p on a line l to a point x, which was developed in Section 3.7. Then p must be the midpoint of x and x′:

$p=\frac{1}{2}x+\frac{1}{2}{x}^{\prime },$

from which we conclude

$\begin{array}{cc}{x}^{\prime }=2p-x.& \left(6.6\right)\end{array}$

While this does not have the standard affine map form, it is equivalent to it, yet computationally much less complex.

6.5 Mapping Triangles to Triangles

Affine maps may be viewed as combinations of linear maps and translations. Another flavor of affine maps is described in this section; it draws from concepts in Chapter 5.

This other flavor arises like this: given a (source) triangle T with vertices a1, a2, a3, and a (target) triangle T′ with vertices a′1, a′2, a′3, what affine map takes T to T′? More precisely, if x is a point inside T, it will be mapped to a point x′ inside T′: how do we find x′? For starters, see Sketch 6.8.

Our desired affine map will be of the form

$x^{\prime }=A\left[x-a_1\right]+{a^{\prime }}_1,$

thus we need to find the matrix A. (We have chosen a1 and a′1) arbitrarily as the origins in the two coordinate systems.) We define

$\begin{array}{cc}{v}_2=a_2-a_1,& v_3=a_3-a_1,\end{array}$

and

$\begin{array}{cc}{v^{\prime }}_2={a^{\prime }}_2-{a^{\prime }}_1,& {v^{\prime }}_3={a^{\prime }}_3-{a^{\prime }}_1.\end{array}$

We know

$\begin{array}{l}A{v}_2={v^{\prime }}_2,\\ A{v}_3={v^{\prime }}_3.\end{array}$

These two vector equations may be combined into one matrix equation:

$A\left[\begin{array}{cc}{v}_2& v_3\end{array}\right]=\left[\begin{array}{cc}{v^{\prime }}_2& {v^{\prime }}_3\end{array}\right],$

which we abbreviate as

$AV=V^{\prime }.$

We multiply both sides of this equation by V’s inverse V−1 and obtain A as

$A=V^{\prime }{V}^{-1}.$

This is the matrix we derived in Section 5.10, “Defining a Map.”

Example 6.4

Triangle T is defined by the vertices

$\begin{array}{ccc}{a}_1=\left[\begin{array}{c}0\\ 1\end{array}\right],& a_2=\left[\begin{array}{c}-1\\ -1\end{array}\right],& a_3=\left[\begin{array}{r}\hfill 1\\ \hfill -1\end{array}\right],\end{array}$

and triangle T′ is defined by the vertices

$\begin{array}{ccc}{a^{\prime }}_1=\left[\begin{array}{c}0\\ 1\end{array}\right],& {a^{\prime }}_2=\left[\begin{array}{c}1\\ 3\end{array}\right],& {a^{\prime }}_3=\left[\begin{array}{r}\hfill -1\\ \hfill 3\end{array}\right]\end{array}.$

The matrices V and V′ are then defined as

$\begin{array}{cc}V=\left[\begin{array}{rr}\hfill -1& \hfill 1\\ \hfill -2& \hfill -2\end{array}\right],& V^{\prime }=\left[\begin{array}{rr}\hfill 1& \hfill -1\\ \hfill 2& \hfill 2\end{array}\right].\end{array}$

The inverse of the matrix V is

$V^{-1}=\left[\begin{array}{rr}\hfill -1/2& \hfill -1/4\\ \hfill 1/2& \hfill -1/4\end{array}\right],$

thus the linear map A is defined as

$A=\left[\begin{array}{rr}\hfill -1& \hfill 0\\ \hfill 0& \hfill -1\end{array}\right].$

Do you recognize the map?

Let’s try a sample point

$x=\left[\begin{array}{c}0\\ -1/3\end{array}\right]$

in T. This point is mapped to

$x^{\prime }=\left[\begin{array}{rr}\hfill -1& \hfill 0\\ \hfill 0& \hfill -1\end{array}\right] \left[\left[\begin{array}{c}0\\ -1/3\end{array}\right]-\left[\begin{array}{c}0\\ 1\end{array}\right]\right]+\left[\begin{array}{c}0\\ 1\end{array}\right]=\left[\begin{array}{c}0\\ 7/3\end{array}\right]$

in T′.

Note that V’s inverse V−1 might not exist; this is the case when v2 and v3 are linearly dependent and thus |V| = 0.

6.6 Composing Affine Maps

Linear maps are an important theoretical tool, but ultimately we are interested in affine maps; they map objects that are defined by points to other such objects.

If an affine map is given by

$x^{\prime }=A\left(x-o\right)+p,$

nothing keeps us from applying it twice, resulting in x″:

$x^{″}=A\left(x^{\prime }-o\right)+p.$

This may be repeated several times—for interesting choices of A and p, interesting images will result.

Example 6.5

For Figure 6.4 (left), the affine map is defined by

$\begin{array}{cccc}A=\left[\begin{array}{rr}\hfill \cos 45°& \hfill -\sin 45°\\ \hfill \sin 45°& \hfill \cos 45°\end{array}\right] \left[\begin{array}{rr}\hfill 0.5& \hfill 0.0\\ \hfill 0& \hfill 0.5\end{array}\right]& \text{and}& p=\left[\begin{array}{c}0\\ 0\end{array}\right].& \left(6.7\right)\end{array}$

In Figure 6.4 (right), a translation was added:

$\begin{array}{cc}p=\left[\begin{array}{c}0.2\\ 0\end{array}\right].& \left(6.8\right)\end{array}$

For both images, the linear map is a composition of a scale and a rotation. In the left image, each successive iteration is applied to geometry that is centered about the origin. In the right image, the translation steps away from the origin, thus the rotation action moves the geometry in the e2-direction even though the translation is strictly in e1.

Example 6.6

For Figure 6.5 (left), the affine map is

$\begin{array}{cccc}A=\left[\begin{array}{rr}\hfill \cos 90°& \hfill -\sin 90°\\ \hfill \sin 90°& \hfill \cos 90°\end{array}\right] \left[\begin{array}{cc}0.5& 0.0\\ 0& 0.5\end{array}\right] \left[\begin{array}{cc}1& 1\\ 0& 1\end{array}\right]& \text{and}& p=\left[\begin{array}{c}0\\ 0\end{array}\right].& \left(6.9\right)\end{array}$

In Figure 6.5 (right), a translation was added:

$\begin{array}{cc}p=\left[\begin{array}{c}2\\ 0\end{array}\right].& \left(6.10\right)\end{array}$

For both images, the linear map is a composition of a shear, scale, and rotation. In the left image, each successive iteration is applied to geometry that is centered about the origin. In the right image, the translation steps away from the origin, thus the rotation action moves the geometry in the e2-direction even though the translation is strictly in e1. Same idea as in Example 6.5, but a very different affine map! One interesting artifact of this map: We expect a circle to be mapped to an ellipse, but by iteratively applying the shear and rotation, the ellipse is stretched just right to morph back to a circle!

Rotations can also be made more interesting. In Figure 6.6, you see the letter S rotated several times around the origin, which is near the lower left of the letter.

Adding scaling and rotation results in Figure 6.7. The basic affine map for this case is given by

$x^{\prime }=S\left[Rx+p\right]$

where R rotates by −20°, S scales nonuniformly, and p translates:

$\begin{array}{ccc}R=\left[\begin{array}{rr}\hfill \cos \left(-20\right)& \hfill -\sin \left(-20\right)\\ \hfill \sin \left(-20\right)& \hfill \text{cos}\left(-20\right)\end{array}\right],& S=\left[\begin{array}{cc}1.25& 0\\ 0& 1.1\end{array}\right],& p=\left[\begin{array}{c}5\\ 5\end{array}\right].\end{array}$

We finish this chapter with Figure 6.8 by the Dutch artist, M.C. Escher [5], who in a very unique way mixed complex geometric issues with a unique style. The figure plays with reflections, which are affine maps.

Figure 6.8 is itself a 2D object, and so may be subjected to affine maps. Figure 6.9 gives an example. The matrix used here is

$\begin{array}{cc}A=\left[\begin{array}{rr}\hfill 0.7& \hfill 0.35\\ \hfill -0.14& \hfill 0.49\end{array}\right].& \left(6.11\right)\end{array}$

No translation is applied.

6.7 Exercises

For Exercises 1 and 2 let an affine map be defined by

$\begin{array}{ccc}A=\left[\begin{array}{cc}2& 1\\ 1& 2\end{array}\right]& \text{and}& p=\left[\begin{array}{c}2\\ 2\end{array}\right].\end{array}$

1. Let

   $\begin{array}{cc}r=\left[\begin{array}{c}0\\ 1\end{array}\right],& s=\left[\begin{array}{c}1\\ 3/2\end{array}\right],\end{array}$

   and q = (1/3)r + (2/3)s. Compute r′, s′, q′ ; e.g., r′ = Ar + p. Show that q′ = (1/3) r′ + (2/3)s′.

2. Let

   $\begin{array}{ccc}t=\left[\begin{array}{c}0\\ 1\end{array}\right]& \text{and}& m=\left[\begin{array}{c}2\\ 1\end{array}\right].\end{array}$

   Compute t′ and m′. Sketch the lines defined by t, m and t′, m′. Do the same for r and s from Exercise 1. What does this illustrate?

3. Map the three collinear points

   $\begin{array}{ccc}{x}_1=\left[\begin{array}{c}0\\ 0\end{array}\right],& x_2=\left[\begin{array}{c}1\\ 1\end{array}\right],& x_3=\left[\begin{array}{c}2\\ 2\end{array}\right],\end{array}$

   to points ${x^{\prime }}_i$ by the affine map Ax + p, where

   $\begin{array}{ccc}A=\left[\begin{array}{cc}1& 2\\ 0& 1\end{array}\right]& \text{and}& p=\left[\begin{array}{c}-4\\ 0\end{array}\right]\end{array}.$

   What is the ratio of the xi? at is the ratio of the ${x^{\prime }}_i$?

4. Rotate the point

   $x=\left[\begin{array}{c}-2\\ -2\end{array}\right]$

   by 90° around the point

   $r=\left[\begin{array}{r}\hfill -2\\ \hfill 2\end{array}\right].$

   Define the matrix and point for this affine map.

5. Rotate the points

   $\begin{array}{cccc}{p}_0=\left[\begin{array}{c}1\\ 0\end{array}\right],& p_1=\left[\begin{array}{c}2\\ 0\end{array}\right],& p_2=\left[\begin{array}{c}3\\ 0\end{array}\right],& p_3=\left[\begin{array}{c}4\\ 0\end{array}\right]\end{array}$

   by 45° around the point p0. Define the affine map needed here in terms of a matrix and a point. Hint: Note that the points are evenly spaced so some economy in calculation is possible.

6. Reflect the point $x=\left[\begin{array}{c}0\\ 2\end{array}\right]$ about the line $l\left(t\right)=p+tv,l\left(t\right)=\left[\begin{array}{c}0\\ 0\end{array}\right]+t\left[\begin{array}{c}1\\ 2\end{array}\right].$

7. Reflect the points

   $\begin{array}{ccccc}{p}_0=\left[\begin{array}{c}2\\ 1\end{array}\right],& p_1=\left[\begin{array}{c}1\\ 1\end{array}\right],& p_2=\left[\begin{array}{c}0\\ 1\end{array}\right],& p_3=\left[\begin{array}{c}-1\\ 1\end{array}\right],& p_4=\left[\begin{array}{c}-2\\ 1\end{array}\right]\end{array}$

   about the line l(t) = p0 + tv, where

   $v=\left[\begin{array}{c}-2\\ 2\end{array}\right].$

   Hint: Note that the points are evenly spaced so some economy in calculation is possible.

8. Given a triangle T with vertices

   $\begin{array}{ccc}{a}_1=\left[\begin{array}{c}0\\ 0\end{array}\right],& a_2=\left[\begin{array}{c}1\\ 0\end{array}\right],& a_3=\left[\begin{array}{c}0\\ 1\end{array}\right],\end{array}$

   and T′ with vertices

   $\begin{array}{ccc}{a^{\prime }}_1=\left[\begin{array}{c}1\\ 0\end{array}\right],& {a^{\prime }}_2=\left[\begin{array}{c}0\\ 1\end{array}\right],& {a^{\prime }}_3=\left[\begin{array}{c}0\\ 0\end{array}\right],\end{array}$

   what is the affine map that maps T to T′ What are the coordinates of the point x′ corresponding to x = [1/2 1/2]T ?

9. Given a triangle T with vertices

   $\begin{array}{ccc}{a}_1=\left[\begin{array}{c}2\\ 0\end{array}\right],& a_2=\left[\begin{array}{c}0\\ 1\end{array}\right],& a_3=\left[\begin{array}{r}\hfill -2\\ \hfill 0\end{array}\right]\end{array},$

   and T′ with vertices

   $\begin{array}{ccc}{a^{\prime }}_1=\left[\begin{array}{c}2\\ 0\end{array}\right],& {a^{\prime }}_2=\left[\begin{array}{r}\hfill 0\\ \hfill -1\end{array}\right],& {a^{\prime }}_3=\left[\begin{array}{r}\hfill -2\\ \hfill 0\end{array}\right],\end{array}$

   suppose that the triangle T has been mapped to T′ via an affine map. What are the coordinates of the point x′ corresponding to

   $x=\left[\begin{array}{c}0\\ 0\end{array}\right]?$

10. Construct the affine map that maps any point x with respect to triangle T to x′ with respect to triangle T′ using the vertices in Exercise 9.

11. Let’s revisit the coordinate transformation from Exercise 10 in Chapter 1. Construct the affine map which takes a 2D point x in NDC coordinates to the 2D point x′ in a viewport. Recall that the extents of the NDC system are defined by the lower-left and upper-right points

    $\begin{array}{ccc}{l}_n=\left[\begin{array}{c}-1\\ -1\end{array}\right]& \text{and}& u_n=\left[\begin{array}{c}1\\ 1\end{array}\right],\end{array}$

    respectively. Suppose we want to map to a viewport with extents

    $\begin{array}{ccc}{l}_v=\left[\begin{array}{c}10\\ 10\end{array}\right]& \text{and}& u_v=\left[\begin{array}{c}30\\ 20\end{array}\right].\end{array}$

    After constructing the affine map, find the points in the viewport associated with the NDC points

    $\begin{array}{ccc}{x}_1=\left[\begin{array}{c}-1\\ -1\end{array}\right],& x_2=\left[\begin{array}{c}1\\ 1\end{array}\right],& x_3=\left[\begin{array}{c}-1/2\\ -1/2\end{array}\right].\end{array}$

12. Affine maps transform parallel lines to parallel lines. Do affine maps transform perpendicular lines to perpendicular lines?
13. Which affine maps are rigid body motions?
14. The solution to the problem of reflecting a point across a line is given by (6.6). Why is this a valid combination of points?