2D Transformations Introduction to Computer Graphics Arizona State University

Dianne Hansford

January 31, 2005

1 Introduction

When you see computer graphics images moving, spinning, or changing shape, you are seeing an implementation of 2D or 3D transformations. Let’s focus on 2D here; once you understand 2D, 3D is simple!

2D transformations can be posed as the following problem.

Given: v in the [e_{1}, e_{2}]-coordinate system, where v = v_{1}e_{1} + v_{2}e_{2}.

Find: v̂ in the [a_{1}, a_{2}]-coordinate system, where v̂ = v̂_{1}a_{1} + v̂_{2}a_{2}.

The geometry of this problem is illustrated in Figure 1. Another name for a 2D transformation is a 2D linear map. The purpose of this write-up is to define 2D linear maps.

Notation: the elements of a_{1} = [\begin{matrix}a_{11} \\ a_{21} \end{matrix}] and a_{2} = [\begin{matrix}a_{12} \\ a_{22} \end{matrix}].

To define the 2D transformation that takes v to v̂, notice that in addition we want:

e_{1} → a_{1} and e_{2} → a_{2}.  (1)

This mapping will be defined as a 2 × 2 matrix, and it is easy to see that

[\begin{matrix}a_{11} \\ a_{21} \end{matrix}] = [\begin{matrix}a_{11} & a_{12} \\ a_{21} & a_{22} \end{matrix}] [\begin{matrix}1 \\ 0 \end{matrix}] and [\begin{matrix}a_{12} \\ a_{22} \end{matrix}] = [\begin{matrix}a_{11} & a_{12} \\ a_{21} & a_{22} \end{matrix}] [\begin{matrix}0 \\ 1 \end{matrix}]

A short-hand way to write these maps:

a_{1} = [a_{1}, a_{2}]e_{1} and a_{2} = [a_{1}, a_{2}]e_{2}.

Figure 1: Elements defining a linear map: [e_{1}, e_{2}] → [a_{1}, a_{2}].

We’ll write matrices in terms of their column vectors frequently during this course.

Therefore, the vector v is mapped to v̂ by

\begin{aligned}v̂ & = [\begin{matrix}a_{11} & a_{12} \\ a_{21} & a_{22} \end{matrix}] v \\ & = [a_{1}, a_{2}]v \\ & = Av \end{aligned}  (2)

The matrix A is called a linear map. Linear maps operate on vectors. (However, you will see them applied to points which are bound to a coordinate origin.)

2 Determinants and Area

Vectors [e_{1}, e_{2}] define a parallelogram (unit square) with area one. Vectors [a_{1}, a_{2}] define a parallelogram with area

|A| = |\begin{matrix}a_{11} & a_{12} \\ a_{21} & a_{22} \end{matrix}| = a_{11}a_{22} − a_{12}a_{21},

where |A| is called the determinant of matrix A. In other words, A maps the unit square to a parallelogram of area |A|.

• |A| = 1: no area change

• 0 < |A| < 1: shrink

• |A| > 1: expand

• |A| < 0: change orientation

Handy relation: |AB| = |A||B|.

3 2D Linear Maps

All linear maps are composed of the following basic maps: scale, rotate, shear, projection.

Scale:

1. Scale uniformly: v̂ = [\begin{matrix}s & 0 \\ 0 & s \end{matrix}] v. See Figure 2. |A| = s^{2}.

2. Scale non-uniformly: v̂ = [\begin{matrix}s_{1} & 0 \\ 0 & s_{2} \end{matrix}] v. See Figure 3. |A| = s_{1}s_{2}.

Reflections:

Here are some examples of reflection matrices. A reflection will have |A| = −1

1. Reflections about the e_{1}-axis: v̂ = [\begin{matrix}1 & 0 \\ 0 & −1 \end{matrix}] v. See Figure 4. |A| = −1.

Figure 2: Uniform scale: v̂ = [\begin{matrix}1/2 & 0 \\ 0 & 1/2 \end{matrix}] v.

2. Reflection about the line x_{1} = x_{2}: v̂ = [\begin{matrix}0 & 1 \\ 1 & 0 \end{matrix}] v. See Figure 5. |A| =

−1.

Rotation:

A rotation of α^{∘} is achieved by

v̂ = [\begin{matrix}cos(α^{∘}) & − sin(α^{∘}) \\ sin(α^{∘}) & cos(α^{∘}) \end{matrix}] v.

Rotations of positive degrees (α > 0) result in a counterclockwise rotation. A rotation does not change areas, that is, |A| = cos^{2}(α^{∘}) + sin^{2}(α^{∘}) = 1. Additionally, a rotation is a rigid body motion because the shape of an object is not changed by a rotation.

Rotate 45^{∘}: v̂ = [\begin{matrix}cos(45^{∘}) & − sin(45^{∘}) \\ sin(45^{∘}) & cos(45^{∘}) \end{matrix}] v. See Figure 6.

Shear:

We can shear in either or both axes.

Figure 3: Non-uniform scale: v̂ = [\begin{matrix}1/2 & 0 \\ 0 & 3/2 \end{matrix}] v.

Shear in the e_{1} direction v̂ = [\begin{matrix}1 & 0.5 \\ 0 & 1 \end{matrix}] v. See Figure 7. |A| = 1. (Notice

that the parallelogram maintains a base and height of one!)

Projections:

All vectors are projected onto a projection line. The angle of incidence with the projection line characterizes the projection, as illustrated in Figure 8, and enumerate below.

1. Parallel: All vectors have the same angle of incidence with the projection line.

(a) Orthographic - angle of incidence is ninety-degrees to the projec-

tion line.

A = [\begin{matrix}1 & 0 \\ 0 & 0 \end{matrix}]

(b) Oblique - arbitrary angle to the projection line

A = [\begin{matrix}−1 & 0 \\ 1 & 0 \end{matrix}]

Figure 4: Reflection about the e_{1}-axis v̂ = [\begin{matrix}1 & 0 \\ 0 & −1 \end{matrix}] v.

2. General projections do not necessarily project all vectors with the same angle of incidence with the projection line. The general form:

A = [a_{1} ca_{1}] .

The columns are linearly dependent. The number of linearly independent columns is the rank of a matrix. Here: rank equals one.

The determinant of a projection matrix: |A| = 0 since our unit square is squished to a line.

4 Properties of Linear Maps

A linear map, v̂ = Av,

• Maps vectors → vectors

• Preserves linear combinations of vectors. Suppose we have

w = αu + βv

Figure 5: Reflection about the line x_{1} = x_{2}: v̂ = [\begin{matrix}0 & 1 \\ 1 & 0 \end{matrix}] v.

Apply the linear map:

v̂ = Av  û = Au  ŵ = Aw

And the relationship still holds:

ŵ = αû + βv̂

5 Matrix Multiplication

Matrix operations are not commutative: AB ≠ BA in general. For example, rotate×reflect ≠ reflect×rotate. See Figure 9.

However, rotations in 2D do commute: R_{α}R_{β} = R_{β}R_{α}. Additionally, R_{α}R_{β} = R_{α+β}.

Figure 6: Rotate 45^{∘}: v̂ = [\begin{matrix}cos(45^{∘}) & − sin(45^{∘}) \\ sin(45^{∘}) & cos(45^{∘}) \end{matrix}] v.

6 Affine Maps

Modeling transformations include translations. This is where affine maps come in, and affine maps give us a tools for applying transformations to points.

Suppose we have a point x in the [e_{1}, e_{2}]-system, and we would like to find the corresponding point x̂ in a system defined by a point p and [a_{1}, a_{2}]. This is illustrated in Figure 10.

We need to apply a linear map to the vector (x−o) to find the corresponding vector in the [a_{1}, a_{2}] system, and then translate the geometry by p, or in other words,

\begin{aligned}x̂ & = p + A(x − o) \\ & = p + Ax \end{aligned}

Thus an affine map is a translation plus a linear map. As mentioned in Section 1, it can appear that we apply a linear map to a point, but actually we are applying the linear map to the vector formed by the point and the

Figure 7: Shear in the e_{1} direction v̂ = [\begin{matrix}1 & 0.5 \\ 0 & 1 \end{matrix}] v.

origin.

Affine maps have the following properties.

1. A point is mapped to a point.

2. The ratio of three collinear points is preserved. For example, suppose points r, s, and x are collinear and ratio(r, x, s) = α : β. Apply an affine map to these points, resulting in points r̂, ŝ, and x̂, then these points are collinear and ratio(r̂, x̂, ŝ) = α : β. See Figure 11.

3. Parallel lines are mapped to parallel lines.

Translations (along with rotations) are rigid body motions – they transform the geometry without deforming it.

Exercise: As practice in constructing affine maps, try creating the affine map (by defining A and p) that takes the o, [e_{1}, e_{2}] local coordinates to the global coordinates defined by the target box g_{min}, g_{max}.

Figure 8: Projections are characterized by their angle of incidence with the projection line. Left: orthographic, Middle: oblique, Right: general.

Problem: Given points r and x, rotate x d degrees about r. This geometry is illustrated in Figure 12.

This is a problem that arises frequently in computer graphics. A constructive approach is necessary as a_{1} and a_{2} are not given directly. One way to think about it: Translate r and x to the origin, rotate, and then translate the geometry back to its original position, or in other words,

x̂ = r + A(x − r)

= r + [\begin{matrix}cos(d^{∘}) & − sin(d^{∘}) \\ sin(d^{∘}) & cos(d^{∘}) \end{matrix}] (x − r).

Figures extracted from The Geometry Toolbox for Graphics and Modeling Gerald Farin and Dianne Hansford AK Peters, 2nd edition, 2004

Figure 9: Matrix operations are not commutative. Top right: rotate(−120^{∘}) × reflect(about x). This is not the same as the bottom right: reflect(about x) × rotate(−120^{∘}).

Figure 10: Affine map: defines the transformation of a point x in the [e_{1}, e_{2}] system to a point x̂ in the system defined by p and [a_{1}, a_{2}].

Figure 11: Affine maps preserve the ratio of three collinear points.

Figure 12: Problem: Rotate point x d^{∘} about the point r, resulting in point x̂. Here: d = 90^{∘}.