Reading

Required:

Š Shirley, Sec. 2.4, 2.7 Š Shirley, Ch. 5.1-5.3 Š Shirley, Ch. 6 Affine transformations Further reading:

Š Foley, et al, Chapter 5.1-5.5. Š David F. Rogers and J. Alan Adams, Brian Curless Mathematical Elements for Computer Graphics, CSE 557 2nd Ed., McGraw-Hill, New York, 1990, Chapter 2. Fall 2009

1 2

Geometric transformations Representation

Geometric transformations will map points in one We can represent a point, p = (x,y), in the plane space to points in another: (x', y‘, z‘ ) = f (x, y, z).

Š as a column vector These tranformations can be very simple, such as ⎡⎤x scaling each coordinate, or complex, such as non- ⎢⎥y linear twists and bends. ⎣⎦ Š as a row vector xy We'll focus on transformations that can be [] represented easily with matrix operations.

We'll start in 2D...

3 4 Canonical axes Vector length and dot products

5 6

Vector cross products Representation, cont.

We can represent a 2-D transformation M by a matrix

⎡⎤ab ⎢⎥ ⎣⎦cd

If p is a column vector, M goes on the left:

p'= M p ⎡⎤⎡xabx' ⎤⎡⎤ ⎢⎥⎢= ⎥⎢⎥ ⎣⎦⎣ycdy' ⎦⎣⎦

If p is a row vector, MT goes on the right:

p'= pMT ⎡⎤ac [][]xy''= xy⎢⎥ ⎣⎦bd

We will use column vectors.

7 8 Two-dimensional transformations Identity

Here's all you get with a 2 x 2 transformation matrix Suppose we choose a=d=1, b=c=0: M: Š Gives the identity matrix: ⎡⎤⎡xabx' ⎤⎡⎤ = ⎢⎥⎢ycdy' ⎥⎢⎥ ⎡⎤10 ⎣⎦⎣ ⎦⎣⎦ ⎢⎥ ⎣⎦01 So: Š Doesn't move the points at all xaxby' =+ ycxdy' =+

We will develop some intimacy with the elements a, b, c, d…

9 10

Scaling ______

Suppose we set b=c=0, but let a and d take on any Suppose we keep b=c=0, but let either a or d go positive value: negative.

Š Gives a scaling matrix: Examples: ⎡⎤a 0 ⎢⎥ ⎣⎦0 d Š Provides differential (non-uniform) scaling in x and y: x ' = ax ⎡⎤−10 ⎡⎤10 ⎢⎥ ⎢⎥ y ' = dy ⎣⎦01 ⎣⎦01− y y y y

⎡⎤20 ⎢⎥ 2 2 ⎣⎦02 1 1 x x x x 12 12 y

⎡12 0⎤ ⎢ ⎥ 2 ⎣ 02⎦ 1 x 12 11 12 ______Effect on unit square

Now let's leave a=d=1 and experiment with b. . . . Let's see how a general 2 x 2 transformation M affects the unit square: The matrix ⎡1 b⎤ ⎡⎤ab ⎢01⎥ ⎢⎥[][]pqrs= p'q'r's' ⎣ ⎦ ⎣⎦cd gives:

xxby' =+ ⎡⎤⎡ab0110 ⎤⎡ 0 aabb+ ⎤ yy' = ⎢⎥⎢ ⎥⎢= ⎥ ⎣⎦⎣cd0011 ⎦⎣ 0 ccdd+ ⎦

y y y y

⎡11⎤ ⎢ ⎥ 1 1 ⎣01⎦ s r 1 x x 1 1 p q x x 1

13 14

Effect on unit square, cont. Rotation

Observe: From our observations of the effect on the unit square, it should be easy to write down a matrix for Š Origin invariant under M “rotation about the origin”: Š M can be determined just by knowing how the corners (1,0) and (0,1) are mapped Š a and d give x-and y-scaling y y Š b and c give x-and y-shearing

1

x θ x 1

⎡⎤1 Š ⎢⎥→ ⎣⎦0

⎡⎤0 Š ⎢⎥→ ⎣⎦1 Thus, ⎡⎤ MR() ⎢⎥ ==θ ⎢⎥ ⎣⎦⎢⎥ 15 16 Degrees of freedom Linear transformations

For any transformation, we can count its degrees of The unit square observations also tell us the 2x2 freedom – the number of independent (though not matrix transformation implies that we are necessarily unique) parameters needed to specify the representing a point in a new coordinate system: transformation. p'= M p One way to count them is to add up all the ab x apparently free variables and subtract the number of ⎡⎤⎡⎤ = ⎢⎥⎢⎥ equations that constrain them. ⎣⎦⎣⎦cdy x How many degrees of freedom does an arbitrary 2X2 ⎡⎤ = []uv⎢⎥ transformation have? ⎣⎦y =⋅+⋅xyuv How many degrees of freedom does a 2D rotation have? where u=[ac]T and v=[bd]T are vectors that define a new basis for a linear space.

The transformation to this new basis (a.k.a., change of basis) is a linear transformation.

17 18

Limitations of the 2 x 2 matrix Affine transformations

A 2 x 2 linear transformation matrix allows In order to incorporate the idea that both the basis and the origin can change, we augment the linear Š Scaling space u, v with an origin t. Š Rotation Š Reflection We call u, v, and t (basis and origin) a frame for an Š Shearing affine space.

Then, we can represent a change of frame as: Q: What important operation does that leave out? p'=⋅+⋅+xy u v t

This change of frame is also known as an affine transformation.

How do we write an affine transformation with matrices?

19 20 Homogeneous coordinates Anatomy of an affine matrix

Idea is to loft the problem up into 3-space, adding a In matrix form, 2D affine transformations always look third component to every point: like this:

⎡⎤x ⎡⎤abtx ⎡⎤x ⎢⎥⎡⎤A t ⎢⎥y Mcdt== ⎢⎥→ ⎢⎥ ⎢⎥y ⎢⎥ ⎣⎦y ⎣⎦001 ⎣⎦⎢⎥1 ⎣⎦⎢⎥00 1

And then transform with a 3 x 3 matrix: 2D affine transformations always have a bottom row of [0 0 1]. ⎡x ' ⎤ ⎡⎤xx⎡⎤10tx ⎡⎤ ⎢y ' ⎥==Tt()t ⎢⎥yy⎢⎥ 0 1 ⎢⎥ ⎢ ⎥ ⎢⎥⎢⎥y ⎢⎥ An “affine point” is a “linear point” with an added w- ⎣⎢w '1 ⎦⎥ ⎣⎦⎢⎥⎣⎦⎢⎥00 1 ⎣⎦⎢⎥ 1 coordinate which is always 1: ⎡⎤x y y ⎡⎤plin ⎢⎥ paff ==⎢⎥y ⎣⎦1 ⎢⎥ ⎡⎤10 1 ⎣⎦⎢⎥1 ⎢⎥0112 11⎢⎥ Applying an affine transformation gives another ⎣⎦⎢⎥00 1 affine point: x x Apt+ 1 1 ⎡⎤lin Mpaff = ⎢⎥ ⎣⎦1

. . . gives translation!

21 22

Rotation about arbitrary points Points and vectors Vectors have an additional coordinate of w=0. Thus, Until now, we have only considered rotation about a change of origin has no effect on vectors. the origin. Q: What happens if we multiply a vector by an affine With homogeneous coordinates, you can specify a matrix? T rotation, θ, about any point q = [qx qy] with a matrix: y y y y These representations reflect some of the rules of affine operations on points and vectors:

θθθθτ vector + vector → q x x x x scalar ⋅→ vector point - point → point + vector → point + point → One useful combination of affine operations is: 1. Translate q to origin

2. Rotate ppu()tt=+o

3. Translate back Q: What does this describe?

Note: Transformation order is important!!

23 24 Barycentric coordinates Computing barycentric coordinates

Starting from a triangle in the x-y plane A set of points can be used to create an affine frame. Consider a triangle ABC and a point P:

we can compute the barycentric coordinates of P:

We can form a frame with an origin C and the vectors ⎡⎤⎡⎤⎡⎤Ax BCxxα P x from C to the other vertices: αβγA ++=BCABC⎢⎥⎢⎥⎢⎥ β = P ⎢⎥⎢⎥⎢⎥y yy y uvt=−AC =− BC = C ⎣⎦⎣⎦⎣⎦⎢⎥⎢⎥⎢⎥111γ 1 Simple matrix analysis gives the solution: We can then write P in this coordinate frame: PBC APC ABP P =++αuvtβ xxx xxx xxx PBC APC ABP = yyy yyy yyy 111 111 111 αβγ=== AxxxBC ABC xxx ABC xxx

AyyyBC ABC yyy ABC yyy 111 111 111

Computing the determinant of the denominator The coordinates (α, β, γ) are called the barycentric gives: coordinates of P relative to A, B, and C. BCxy−+−+− BC yx AC yx AC xy AB xy AB yx

25 26

Cross products in 2D Barycentric coords from area ratios

Recall the 3D cross product: Now, let’s rearrange the equation from two slides ago:

ijk BCxy−+−+−= BC yx AC yx AC xy AB xy AB yx uv×=uuuxyz (BACAx −−−−−xy )( y ) ( BACA y yx )( x ) vvvxyz

=−()()()uvyz uv zyijk +− uv zx uv xz +− uv xy uv yx The determinant is then just the z-component of (B- A) x (C-A), which is two times the area of triangle ABC! ⎡⎤uvyz− uv zy ⎢⎥ =−⎢⎥uvzx uv xz Thus, we find: ⎢⎥ ⎣⎦uvxy− uv yx SArea(PBC ) SArea( APC ) SArea( ABP ) What happens when u and v lie in the x-y plane? αβγ=== SArea(ABC ) SArea( ABC ) SArea( ABC )

Where SArea(RST) is the signed area of a triangle, which can be computed with cross-products.

What does it mean for a barycentric coordinate to be negative?

27 28 Affine, vector, and convex combinations Basic 3-D transformations: scaling

Note that we seem to have constructed a point by Some of the 3-D transformations are just like the 2-D adding points together, which we said was illegal, but ones. as long as they have coefficients that sum to one, it’s ok. For example, scaling: More generally: ⎡⎤⎡xs'000 ⎤⎡⎤ x PA=++α " α A x 11 nn ⎢⎥⎢ys'0 00 ⎥⎢⎥ y ⎢⎥⎢= y ⎥⎢⎥ is an affine combination if: ⎢⎥⎢zsz'00z 0 ⎥⎢⎥ n ⎢⎥⎢ ⎥⎢⎥ 100011 ∑αi =1 ⎣⎦⎣ ⎦⎣⎦ i=1 It is a vector combination if: n y y ∑αi = 0 i=1 And it is a convex combination if: n x x ∑ααii=1 and ≥ 0 i=1 Q: Why is it called a convex combination? z z

29 30

Translation in 3D Rotation in 3D

Rotation now has more possibilities in 3D: ⎡⎤⎡xtx'100x ⎤⎡⎤ ⎢⎥⎢ ⎥⎢⎥ yty'010y ⎢⎥⎢= ⎥⎢⎥ 10 0 0 ⎢⎥⎢ztz'001 ⎥⎢⎥ ⎡⎤ z ⎢⎥0cosθθ− sin0 ⎢⎥⎢ ⎥⎢⎥ R ()θ = ⎢⎥ ⎣⎦⎣1 000 11 ⎦⎣⎦ x ⎢⎥0sincos0θθ ⎢⎥ ⎣⎦00 0 1 y

⎡⎤cosθθ 0 sin 0 Ry ⎢⎥0100 R ()θ = ⎢⎥ y ⎢⎥−sinθθ 0 cos 0 y y ⎢⎥ x ⎣⎦0001 Rx Rz ⎡⎤cosθθ− sin 0 0 z ⎢⎥sinθθ cos 0 0 R ()θ = ⎢⎥Use right hand rule x x z ⎢⎥0010 ⎢⎥ 0001 z z ⎣⎦

31 32 Rotation in 3D (cont’d) Shearing in 3D

How many degrees of freedom are there in an Shearing is also more complicated. Here is one arbitrary rotation? example:

⎡⎤⎡xb'1 00 ⎤⎡⎤ x ⎢⎥⎢yy'0100 ⎥⎢⎥ ⎢⎥⎢= ⎥⎢⎥ ⎢⎥⎢zz'0010 ⎥⎢⎥ ⎢⎥⎢ ⎥⎢⎥ ⎣⎦⎣100011 ⎦⎣⎦

y y

x x

z z How else might you specify a 3D rotation?

We call this a shear with respect to the x-z plane.

33 34

Preservation of affine combinations Properties of affine transformations

A transformation F is an affine transformation if it preserves affine combinations: Here are some useful properties of affine transformations: FA()()()α ++""αα A = FA ++ α FA 11nn 1 1 n n Š Lines map to lines Š Parallel lines remain parallel where the Ai are points, and: n Š Midpoints map to midpoints (in fact, ratios are always preserved) ∑αi =1 i=1 Clearly, the matrix form of F has this property. r t One special example is a matrix that drops a p' : q' dimension. For example: s s q : r' t ⎡⎤x p Æ ⎡⎤⎡⎤1000 x ⎢⎥y ⎢⎥⎢⎥0100⎢⎥= y ⎢⎥⎢⎥⎢⎥z pqs p'q' ⎣⎦⎣⎦⎢⎥⎢⎥0001⎢⎥ 1 ratio === ⎣⎦1 qrt q'r'

This transformation, known as an orthographic projection is an affine transformation.

We’ll use this fact later…

35 36 Affine transformations in OpenGL

OpenGL maintains a “modelview” matrix that holds the current transformation M.

The modelview matrix is applied to points (usually vertices of polygons) before drawing.

It is modified by commands including:

Š glLoadIdentity() M ← I –set M to identity

Š glTranslatef(tx, ty, tz) M ← MT – translate by (tx, ty, tz)

Š glRotatef(θ, x, y, z) M ← MR – rotate by angle θ about axis (x, y, z)

Š glScalef(sx, sy, sz) M ← MS – scale by (sx, sy, sz)

Note that OpenGL adds transformations by postmultiplication of the modelview matrix.

37