CS 536
Computer Graphics
Transformations
Week 9, Lecture 18
David Breen, William Regli and Maxim Peysakhov
Department of Computer Science
Drexel University
1
2D Transformations
3
2D Affine Transformations
All represented as matrix operations on vectors!
Parallel lines preserved, angles/lengths not
• Scale
• Rotate
• Translate
• Reflect
• Shear
4
Pics/Math courtesy of Dave Mount @ UMD-CP
2D Affine Transformations
• Example 1: rotation
and non uniform
scale on unit cube
• Example 2: shear
first in x, then in y
Note:
– Preserves parallels
– Does not preserve
lengths and angles
5
1994 Foley/VanDam/Finer/Huges/Phillips ICG
2D Transforms: Translation
• Rigid motion of
points to new
locations
• Defined with column
vectors:
as
6
1994 Foley/VanDam/Finer/Huges/Phillips ICG
2D Transforms: Scale
• Stretching of points
along axes:
In matrix form:
or just: 7
1994 Foley/VanDam/Finer/Huges/Phillips ICG
2D Transforms: Rotation
• Rotation of points
about the origin
Positive Angle: CCW
Negative Angle: CW
Matrix form:
or just: 8
1994 Foley/VanDam/Finer/Huges/Phillips ICG
2D Transforms: Rotation
• Substitute the
1st two equations
into the 2nd two
to get the general
equation
rcos(θ + φ) rcos(φ)
x'= x cos(θ ) − y sin(θ )
y'= x sin(θ ) + y cos(θ ) 9
1994 Foley/VanDam/Finer/Huges/Phillips ICG
Homogeneous Coordinates
• Observe: translation
is treated differently
from scaling and
rotation
• Homogeneous
coordinates:
allows all
transformations to be Example: A 2D point (x,y) is the line
(x,y,w), where w is any real #, in 3D
treated as matrix homogenous coordinates.
multiplications
To get the point, homogenize by
dividing by w (i.e. w=1) 10
1994 Foley/VanDam/Finer/Huges/Phillips ICG
Recall our
Affine Transformations
11
Pics/Math courtesy of Dave Mount @ UMD-CP
Matrix Representation of
2D Affine Transformations
• Translation:
• Scale:
• Rotation:
• Shear: Reflection: Fy=
12
Composition of 2D Transforms
• Rotate about a point P1
– Translate P1 to origin
– Rotate
– Translate back to P1
P’ = T ✴ P T
13
1994 Foley/VanDam/Finer/Huges/Phillips ICG
Composition of 2D Transforms
• Scale object around point P1
– P1 to origin
– Scale
– Translate back to P1
– Compose into T
P’ = T ✴ P
14
1994 Foley/VanDam/Finer/Huges/Phillips ICG
Composition of 2D Transforms
• Scale + rotate object
around point P1 and P’ = T ✴ P
move to P2
– P1 to origin
– Scale
– Rotate
– Translate to P2
15
1994 Foley/VanDam/Finer/Huges/Phillips ICG
Composition of 2D Transforms
• Be sure to multiple transformations in
proper order!
P’ = (T✴(R✴(S✴ (T✴ P))))
P’ = ((T✴ (R✴ (S ✴ T)))✴ P)
P’ = T ✴ P
16
The Window-to-Viewport
Transformation
• Problem: Screen windows cannot display the whole
world (window management)
• How to transform and clip:
Objects to Windows to Screen
18
Pics/Math courtesy of Dave Mount @ UMD-CP
Window-to-Viewport
Transformation
• Given a window Three steps:
and a viewport, • Translate
what is the • Scale
transformation from • Translate
WCS to VPCS?
19
1994 Foley/VanDam/Finer/Huges/Phillips ICG
Transforming World
Coordinates to Viewports
• 3 steps
1. Translate
2. Scale
3. Translate
Overall Transformation:
P'= M wv P
20
1994 Foley/VanDam/Finer/Huges/Phillips ICG
3D Transformations
24
Representation of 3D
Transformations
• Z axis represents depth
• Right Handed System
– When looking “down” at the
origin, positive rotation is CCW
• Left Handed System
– When looking “down”, positive
rotation is in CW
– More natural interpretation for
displays, big z means “far” (into screen)
25
1994 Foley/VanDam/Finer/Huges/Phillips ICG
3D Homogenous Coordinates
• Homogenous
coordinates for 2D
space requires 3D
vectors & matrices
• Homogenous
coordinates for 3D
space requires 4D
vectors & matrices
• [x,y,z,w]
26
3D Transformations: Scale
• Scale
– Parameters for each
axis direction
27
3D Transformations: Translate
• Translation
28
3D Transformations:
Rotation
• One rotation for
each world
coordinate axis
29
Rotation Around an
Arbitrary Axis
• Rotate a point P
around axis n (x,y,z)
by angle θ
# tx 2 + c txy + sz txz − sy 0&
% (
% txy − sz ty 2 + c tyz + sx 0(
R=
%txz + sy tyz − sx tz 2 + c 0(
% (
$ 0 0 0 1'
• c = cos(θ)
• s = sin(θ)
• t = (1 - c)
Graphics Gems I, p. 466 & 498 30
Rotation Around an
Arbitrary Axis
• Also can be expressed as the
Rodrigues Formula
Prot = P cos(ϑ ) + (n × P)sin(ϑ ) + n(n ⋅ P)(1− cos(ϑ ))
31
Improved Rotations
• Euler Angles have problems
– How to interpolate keyframes?
– Angles aren’t independent
– Interpolation can create Gimble Lock, i.e.
loss of a degree of freedom when axes
align
• Solution: Quaternions!
32
33
34
p = (0, x )
35
36
37
A & B are quaternions
slerp – Spherical linear interpolation
Need to take equals steps on the sphere
38
What about interpolating
multiple keyframes?
• Shoemake suggests using Bezier
curves on the sphere
• Offers a variation of the De Casteljau
algorithm using slerp and quaternion
control points
• See K. Shoemake, “Animating rotation
with quaternion curves”, Proc.
SIGGRAPH ’85
39
3D Transformations:
Reflect
• Reflection:
about x-y plane
" −1 0 0 0 %
$ '
about y-z plane 0 1 0 0
Fx = $ '
$ 0 0 1 0 '
$ 0 0 0 1 '
# &
40
Reflection
corresponds to negative scale factors
sx = -1 sy = 1 original
sx = -1 sy = -1 sx = 1 sy = -1
E. Angel and D. Shreiner: Interactive Computer
Graphics 6E © Addison-Wesley 2012
3D Transformations: Shear
! 1 sh 0 0 $
x
# &
• Shear: Hx = # 0 1 0 0 &
(function of y) # 0 0 1 0 &
# &
" 0 0 0 1 %
x ' = x +shx ⋅ y
43
3D Transformations:
Shear
" X'% " 1 Sh y
x Sh z
x 0% " X %
$ ' $ x z ' $ '
Y '
$ ' = $ Shy 1 Sh y 0' $ Y '
∗
$ Z' ' $ Shzx Shzy
1 0' $ Z '
$ ' $ ' $ '
#1& # 0 0 0 1& # 1 &
y z
X ' = X + Sh Y + Sh Z
x x
x z
Y ' = Sh X +Y + Sh Z
y y
€
Z ' = Shzx X + ShzyY + Z
45
Example: Composition of 3D
Transformations
• Goal: Transform P1P2 and P1P3
46
1994 Foley/VanDam/Finer/Huges/Phillips ICG
Example (Cont.)
(1)
• Process
1. Translate P1 to (0,0,0)
2. Rotate about y
3. Rotate about x
4. Rotate about z
(2-3)
(4)
47
1994 Foley/VanDam/Finer/Huges/Phillips ICG
Final Result
• What we’ve really
done is transform
the local coordinate
system Rx, Ry, Rz
to align with the
origin x,y,z
48
1994 Foley/VanDam/Finer/Huges/Phillips ICG
Example 2: Composition of 3D
Transformations
• Airplane defined in x,y,z
• Problem: want to point it
in Dir of Flight (DOF)
centered at point P
• Note: DOF is a vector
• Process:
– Rotate plane
– Move to P
49
1994 Foley/VanDam/Finer/Huges/Phillips ICG
Example 2 (cont.)
• Zp axis to be DOF
• Xp axis to be a horizontal
vector perpendicular to
DOF
– y x DOF
• Yp, vector perpendicular to
both Zp and Xp (i.e.Zp x Xp)
50
1994 Foley/VanDam/Finer/Huges/Phillips ICG
Transformations to Change
Coordinate Systems
• Issue: the world has many different relative
frames of reference
• How do we transform among them?
• Example: CAD Assemblies & Animation Models
51
Transformations to Change
Coordinate Systems
• 4 coordinate systems
1 point P
M 1←2 = T (4,2)
M 2←3 = T (2,3) • S (0.5,0.5)
M 3←4 = T (6.7,1.8) • R(45 )
52
1994 Foley/VanDam/Finer/Huges/Phillips ICG
Coordinate System Example (1)
• Translate the House
to the origin
M1←2 = T(x1, y1 )
−1
M 2←1 = ( M1←2 )
= T(−x1,−y1 ) P1
The matrix Mij that maps points from coordinate system j
€ to i is the inverse of the matrix Mji that maps points from
53
coordinate system j to coordinate system i. 1994 Foley/VanDam/Finer/Huges/Phillips ICG
Coordinate System Example (2)
• Transformation
M 5←1 = M 5←4 • M 4←3 • M 3←2 • M 2←1
Composition:
54
1994 Foley/VanDam/Finer/Huges/Phillips ICG
World Coordinates and
Local Coordinates
• To move the tricycle,
we need to know how
all of its parts relate to
the WCS
• Example: front wheel
rotates on the ground
wrt the front wheel’s z
(wo) (wh )
axis: P = T(αr,0,0) ⋅ Rz (α ) ⋅ P
Coordinates of P in
wheel coordinate
system: P'(wh ) = Rz (α ) ⋅ P (wh ) 55
1994 Foley/VanDam/Finer/Huges/Phillips ICG
€
Properties of
Transformation Matrices
• Note that matrix multiplication is not
commutative
• i.e. in general M1M2 ≠ M2M1
• T – reflection around y axis
• T’ – rotation in the plane
