COL781: Computer Graphics

3. Linear and Af ne
Transformations

fi
Last class
• Triangle rasterization
• Object-order vs. image-order rendering
• Sampling and aliasing
Transformations

Translation Rotation

Scaling ???
 Applications: Instancing

Star Wars: Episode II – Attack of the Clones (2002)

Applications: Posing

Third Shift Vintage

Applications: Viewing

Cristian Goga
Transformation matrices
As you probably know, we can represent many transformations by matrices:

[ y] [ 21 22] [a21vx + a22vy]

vx a11 a12 a11vx + a12vy
v= v A= a a Av =

and similarly in 3D:

vx a11 a12 a13 a11vx + a12vy + a13vz

v = vy A = a21 a22 a23 Av = a21vx + a22vy + a23vz
vz a31 a32 a33 a31vx + a32vy + a33vy
 What
2.0 are the matrices for
2.0 these transformations? 2.0

1.5 1.5 1.5

1.0 1.0 1.0

2.0 2.0
0.5 0.5 0.5

1.5 1.5
0 -0.5 0.5
-1.5 1.0-1.0 1.5
-0.5 2.0 0.5 1.0 1.5 2.0 -1.5 -1.0 -0.5 0.5 1.0

1.0
Translation 1.0 Rotation
-0.5 -0.5 -0.5

0.5 0.5
-1.0 -1.0 -1.0

-1.5 -1.5
-1.0 -0.5 0.5 -1.5
1.0 1.5 2.0
-1.5 -1.0 -0.5 0.5 1.0-1.5 1.5 2.0
Scaling ???
-0.5 -0.5
 What can’t matrices do?
vnew ≠ Avold
2.0

1.5

1.0

So
rk
in
0.5

e
&
Al
ex
a
20
07
-1.0 -0.5 0.5 1.0 1.5 2.0
Translation Nonlinear deformation
-0.5
(not yet at least…)

-1.0
Transformations
Transformations are just functions that map points to points

T : ℝⁿ → ℝⁿ

Now: linear transformations

(easy to represent with matrices)

Later: af ne transformations T(·)

(linear transformations + translation) T(x)
x
fi
Linear algebra
Linear algebra
Linear algebra is not about little lists of numbers!

[1]
2
≠

A vector only has coordinates once you make an (arbitrary) choice of basis

[1] [0.5]
2 1
Outcomes of operations should be independent of arbitrary choices!

If a + 2b = c in my basis, then it should be true in your basis as well.

Best to think in a basis-independent way as much as possible

Though, to compute anything we will always need a basis in the end…

What are vectors, really?
A vector is an element of a vector space.

A vector space over ℝ is any set V equipped with two operations:

• scalar multiplication: ℝ × V → V
• vector addition: V × V → V
satisfying various identities, e.g. u + v = v + u, a(u + v) = au + av, etc.
To do geometry, we also need a third operation:

• dot product / inner product: V × V → ℝ

satisfying identities like u · v = v · u, (au + bv) · w = a(u · w) + b(v · w), etc.

This automatically gives us a norm ‖v‖ = ⎷(v · v).

Think of these three operations as the “public API” of the vector data type.

Try to always write your algorithm and code in terms of these, not by manipulating
coordinates individually! Then it will work for vectors in 2D, 3D, and any n dimensions.
Example: Find the multiple of u that is as close as possible to v.

(u ⋅ u)
u⋅v
w= u

Don’t write code like this:

Write this instead:
float u[3], v[3];
float n = u.x*v.x + u.y*v.y + u.z*v.z; #include <glm/glm.h>
float d = u.x*u.x + u.y*u.y + u.z*v.z;
float w[3]; glm::vec3 u, v;
w.x = (n/d)*u.x; glm::vec3 w =
w.y = (n/d)*u.x; (glm::dot(u,v)/glm::dot(u,u))*u;
w.z = (n/d)*u.z;
Example: Find the multiple of u that is as close as possible to v.

(u ⋅ u)
u⋅v
w= u

∑ ∫
u⋅v= uivi ⟨u, v⟩ = u(x)v(x) dx
Bases
A basis is just a set of vectors {e1, e2, …} such that any vector can be written uniquely as a
linear combination of them.

v1
[1]
v
v= v2 in this basis v = v1e1 + v2e2 + ⋯
2
e2
⋮
e1
What happens when you apply a matrix A to the basis vectors?

a11 a12 ⋯ 1 a11

Ae1 = a21 a22 ⋯ 0 = a21 = 1st column of A
⋮ ⋮ ⋱ ⋮ ⋮
This determines the action of A on all other vectors!

Av = A(v1e1 + v2e2 + ⋯) = v1(Ae1) + v2(Ae2) + ⋯ = v1a1 + v2a2 + ⋯

v Av
a2
e2

e1 a1

• Interpretation 1: A matrix transforms the basis vectors to its columns; all other vectors
follow.

• Interpretation 2: Matrix-vector multiplication Av produces a linear combination of the

columns of A, weighted by the components v1, v2, …
 2.0 2.0

Now, what is the matrix for this transformation?

1.5 1.5

1.0 1.0

0.5 0.5

-1.5 -1.0 -0.5 0.5 1.0 1.5 2.0

-1.5 -1.0 -0.5 0.5 1.0 1.5 2.0

[ 0.5 ] [0.2]
-0.5 -0.5
−0.8 1.1
a1 = image of e1 ≈ , a2 = image of e2 ≈
-1.0 -1.0

[ 0.5 0.2]
-1.5 −0.8 1.1 -1.5
A≈
 2.0 2.0

1.5 1.5

1.0 1.0

[ sin θ cos θ ]
cos θ −sin θ
0.5 0.5
2.0 2.0

-1.0 -0.5 1.5 0.5 1.0 -1.5

1.5 -1.0
2.0 -0.5 0.5 1.0 1.5 1.5
2.0
Rotation
-0.5 -0.5
1.0 1.0

-1.0 -1.0

[ 0 1]
0.5 0.5
sx 0 −1 0
-1.5 [ 0 sy]-1.5
-1.0 -0.5 0.5 1.0 1.5 2.0 -1.5 -1.0 -0.5 0.5 1.0 1.5 2.0
Scaling Re ection
-0.5 -0.5
fl
 Puzzle:

It’s just as easy to scale x and y by different amounts as it is to scale by the same amount.

So why do video players show black bars instead of scaling the image to ll the screen?

fi
 Invariants
Different types of transformations preserve different quantities:

• Rotations: distances, angles, orientation (anti-/clockwiseness, left-/right-handedness)

• Re ections: distances, angles
• Uniform scaling (sx = sy): angles, directions, relative distances
• Nonuniform scaling (sx ≠ sy): ?
fl
Composition of transformations
Apply transformation A then transformation B:

v → Av → B(Av) = (BA)v

Column interpretation:
Av
a2 Ba1
B [a1 a2 ⋯] = [Ba1 Ba2 ⋯]
a1 Ba2 (BA)v

Often, want to apply a sequence of n transformations on millions of vertices.

Just compute the product: then only 1 matrix-vector multiplication per vertex.
 2.0 2.0 2.0

AB ≠ BA
1.5 1.5 1.5

1.0 1.0 1.0

0.5
Stretch x, 0.5
Rotate 0.5
shrink y by 90°
2.0 2.0 2.0

-0.5 0.5 1.0 -1.51.5 -1.02.0 -0.5 0.5 1.0 1.5 2.0 -1.5 -1.0 -0.5 0.5
1.5 1.5 1.5
-0.5 -0.5 -0.5

1.0 1.0 1.0

-1.0 -1.0 -1.0

0.5
Rotate 0.5
Stretch x, 0.5
-1.5
by 90° -1.5
shrink y -1.5

-0.5 0.5 1.0 1.5 2.0 -1.5 -1.0 -0.5 0.5 1.0 1.5-1.5 2.0-1.0 -0.5 0.5

-0.5 -0.5 -0.5

 y
Rotations in 3D
Rotation
about x-axis

x
Rotations about the coordinate axes:
z

1 0 0 cos θ 0 sin θ cos θ −sin θ 0

0 cos θ −sin θ 0 1 0 sin θ cos θ 0
0 sin θ cos θ −sin θ 0 cos θ 0 0 1
Rotation about x-axis Rotation about y-axis Rotation about z-axis
= Rotation in yz-plane = Rotation in zx-plane = Rotation in xy-plane

Are these all the possible rotations?

Rotations in 3D
Are these all possible rotations?

Not at all!

A rotation is any transformation which:

• preserves distances and angles

• preserves orientation

Equivalently, RTR = , and det R = 1

𝐈
 Rodrigues’ rotation formula
Rotation around an axis n by angle θ:

R = cos θ + [n]× sin θ + n nT (1 − cos θ)

0 −nz ny
where [n]× = nz 0 −nx
−ny nx 0

How? Hints:

• [n]× is the “cross-product matrix”: [n]× v = n × v

• Assume an orthogonal basis n, e1, e2 and see what R does to it
semath.info
𝐈
Euler angles
Any 3D rotation can also be expressed using 3 rotations about coordinate axes:

e.g. R = Ry(θy) Rz(θz) Rx(θx) heading

θx, θy, θz are called Euler angles

Often more intuitive, e.g. specify aircraft’s

heading (N/S/E/W), pitch (up/down), roll

Note: Order of rotation matters! Need to

know which angle for which axis, and also
which order to multiply them. roll pitch

Tannous 2018
Homework exercise
Given unit vectors u and v, nd a way to construct a rotation matrix R which maps u to v,
i.e. Ru = v. Is it unique, or are there many different such rotations?

Hint: What happens to u R=?

vectors other than u?
fi
 2.0

Translations 1.5

1.0
Move all points by a constant displacement
0.5
T(p) = p + t
t

-1.5 -1.0 -0.5 0.5 1.0 1.5 2.0

So a linear transformation followed by a translation
will be of the form T(p) = Ap + b -0.5

A bit tedious to compose:

-1.0
T2(T1(p)) = A2(A1p + b1) + b2
= (A2A1)p + (A2b1 + b2) -1.5
 Suppose
2.0 I have both positions and directions/velocities/etc.
2.0 to transform.
2.0

1.5 1.5 1.5

v p v?
1.0 1.0 1.0
p p
0.5 0.5 0.5
v

0 -0.5 0.5 1.0 1.5-1.5 2.0-1.0 -0.5 0.5

-1.5 1.0
-1.0 1.5
-0.5 2.0 0.5 1.0 1.5 2.0

-0.5 Original: Rotation

-0.5 by 45°: Translation
-0.5 by (0.0, 0.5):
p = (0.5, 0.5) p = (0.0, 0.7) p = (0.5, 1.0)
-1.0 v = (1.0, 0.0) v= (0.7, 0.7)
-1.0 -1.0 v = (1.0, 0.5)?

-1.5 -1.5 -1.5

It seems translation should only affect some things, not others. But why?
Are positions really vectors?
p1 + p2 = ?

5p3 = ?

p1

How about I just choose an origin and then

add the displacement vectors?
p2
p3
Points vs. vectors
Points form an af ne space A over the vector space V.

• Point-vector addition: A × V → A
• Point subtraction: A × A → V
with the obvious properties e.g. (p + u) + v = p + (u + v), p + (q − p) = q, etc.
fi
Example: midpoint of two points p and q
p
m = ½(p + q)? m

Not allowed! But can rewrite as q

m = p + ½(q − p)
= q + ½(p − q)

In fact it’s valid to take any af ne combination w1p1 + w2p2 + ⋯ + wnpn

as long as w1 + w2 + ⋯ + wn = 1. So we will allow this too.

(Exercise: Check that this can be done using only the af ne space operations)
fi
fi
Coordinate frames
v
To specify a vector numerically, we need a basis e2

v1
e1
v = v1e1 + v2e2 + ⋯ v= v2 in the basis
⋮

To specify a point numerically, we need a coordinate frame: origin and basis.

Then we can just store its displacement vector from the origin.

p1 p
p2 e2
p = p1e1 + p2e2 + ⋯ + o so maybe we should write p = ?
⋮
o e1
1
 p1
p2
Write a point as an (n+1)-tuple p = to mean p = p1e1 + p2e2 + ⋯ + o.
⋮
1

[ 0 1]
A 0
Linear transformations are now , mapping ei → Aei and o → o

sx 0 0 px sx px
e.g. 0 sy 0 py = sy py
0 0 1 1 1
 [0 1]
I t
Translation by a vector t: , mapping ei → ei but o → o + t

1 0 tx px px + tx
e.g. 0 1 ty py = py + ty
0 0 1 1 1
What about vectors?

v1
v2
v = v1e1 + v2e2 + ⋯ + 0o v=
⋮
0

Apply a translation:

1 0 tx vx vx
0 1 ty vy = vy
0 0 1 0 0
Homogeneous coordinates
Add an extra coordinate w at the end.

• Points: w = 1
• Vectors: w = 0
Transformations become (n+1)×(n+1) matrices

[ 0 1]
A 0
• Linear transformations:

[0 1]
I t
• Translations:
 1 0 tx
0 1 ty
0 0 1
w=1 w=1
px
py
1

vx x x
vy
y 0 y
 [ 0 1]
A t
General af ne transformation:

• Corresponds to linearly transforming basis vectors ei → Aei

and translating origin o → o + t

• Maps parallel lines to parallel lines, but does not preserve the origin
• Composition: just matrix multiplication again.
fi
 2.0 2.0 2.0 2.0

Example: Rotate by given angle θ about given point p (instead of about origin)
1.5 1.5 1.5 1.5

1.0 1.0 1.0 1.0

p
0.5 0.5 0.5 0.5

-0.5 0.5 -1.5

1.0 -1.0
1.5 -0.5
2.0 0.5
-1.5 1.0
-1.0 1.5
-0.5 2.0
-1.5 0.5
-1.0 1.0
-0.5 1.5 2.0
0.5 1.0 1.5

-0.5 -0.5 -0.5 -0.5

-1.0 -1.0
Translate by −p -1.0
Rotate by θ -1.0Translate by p
about origin
-1.5 -1.5 -1.5 -1.5

M = T(p) R(θ) T(−p)

Usually, we will have an implicit global coordinate system (or world coordinate system) in
which the entire scene is speci ed

We may also have many local

coordinate frames, often
corresponding to different objects,
e.g.

• Shape of rigid object speci ed

using vertex positions in object
frame

• Motion of character’s arm

Marschner & Shirley

speci ed as rotation relative to
body frame
fi
fi
fi
Given p’s coordinates in local frame, what are its coordinates in global frame?

p = p1e1 + p2e2 + ⋯ + o
p
Write coords of e1, e2, … and o in global frame:
∙ ∙
∙ ∙
ei = ⋮ , o= ⋮
0 1
∙ ∙ ⋯ ∙ p1
∙ ∙ ⋯ ∙ p2
Then pglobal = ⋮ ⋮ ⋱ ⋮ ⋮ Change of coordinates looks
0 0 ⋯ 1 1 exactly like a transformation matrix!
e1 e2 o
Active transformation: Moves points
to new locations in the same frame

Change of coordinates (passive

transformation): Gives coordinates
of the same point in a different frame

Matrices are the same but the meaning

is different! You have to keep track.

e.g. driver_in_world = car_to_world * driver_in_car

vec3 mat3x3 vec3
 Puzzle:
• To draw a transformed polygon, I can just transform the vertices.
• To draw a shape speci ed by a function f (x,y) ≤ 0, I can just test each pixel (x,y).

f (x,y) = x2 + y2 − r2

How can I draw a transformed version of a shape speci ed by a function?

fi
fi