2D transformations and
homogeneous coordinates
Dr Nicolas Holzschuch
University of Cape Town
e-mail: holzschu@[Link]
Modified by Longin Jan Latecki
latecki@[Link]
Map of the lecture
• Transformations in 2D:
– vector/matrix notation
– example: translation, scaling, rotation
• Homogeneous coordinates:
– consistent notation
– several other good points (later)
• Composition of transformations
• Transformations for the window system
Transformations in 2D
• In the application model:
– a 2D description of an object (vertices)
– a transformation to apply
• Each vertex is modified:
• x’ = f(x,y)
• y’ = g(x,y)
• Express the modification
Translations
• Each vertex is modified:
• x’ = x+tx
• y’ = y+ty
Before After
Translations: vector notation
• Use vector for the notation:
– makes things simpler
• A point is a vector: x
y
• A translation is merely a vector sum:
P’ = P + T
Scaling in 2D
• Coordinates multiplied by the scaling
factor:
• x’ = sx x
• y’ = sy y
Before After
Scaling in 2D, matrix notation
• Scaling is a matrix multiplication:
P’ = SP
x sx 0 x
y 0 sy y
Rotating in 2D
• New coordinates depend on both x and y
• x’ = cosx - sin y
• y’ = sinx + cos y
Before After
Rotating in 2D, matrix notation
• A rotation is a matrix multiplication:
P’=RP
x cos sin x
y sin
cos y
2D transformations, summary
• Vector-matrix notation simplifies writing:
– translation is a vector sum
– rotation and scaling are matrix-vector
multiplication
• I would like a consistent notation:
– that expresses all three identically
– that expresses combination of these also
identically
• How to do this?
Homogeneous coordinates
• Introduced in mathematics:
– for projections and drawings
– used in artillery, architecture
– used to be classified material (in the 1850s)
• Add a third coordinate, w x
• A 2D point is a 3 coordinates vector: y
w
Homogeneous coordinates (2)
• Two points are equal if and only if:
x’/w’ = x/w and y’/w’= y/w
• w=0: points at infinity
– useful for projections and curve drawing
• Homogenize = divide by w.
• Homogenized points: x
y
1
Translations with homogeneous
x 1
y 0
0 t x x
t x
x
w
x
w
1 ty y
y
t y
w
0 0 1
w
y
w w
x x wt x
y y wt y
w w
Scaling with homogeneous
x sx
y 0
0 0x
s
x
w
x
x w
sy 0y
y
s
w
0 0 1
w
y
w y w
x sx x
y sy y
w w
Rotation with homogeneous
x cos sin 0x
y sin cos 0y
xw cos wx sin y
w
0 0 1
w
y
w
w sin w cos
x y
w
x cos x sin y
y sin x cos y
w w
Composition of transformations
• To compose transformations, multiply
the matrices:
– composition of a rotation and a translation:
M = RT
• all transformations can be expressed as
matrices
– even transformations that are not
translations, rotations and scaling
Rotation around a point Q
• Rotation about a point Q:
– translate Q to origin (TQ),
– rotate about origin (R)
– translate back to Q (- TQ).
P’=(-TQ)RTQ P
Beware!
• Matrix multiplication is not commutative
• The order of the transformations is vital
– Rotation followed by translation is very different
from translation followed by rotation
– careful with the order of the matrices!
• Small commutativity:
– rotation commute with rotation, translation with
translation…
From World to Window
• Inside the application:
– application model
– coordinates related to the model
– possibly floating point
• On the screen:
– pixel coordinates
– integer
– restricted viewport: umin/umax, vmin/vmax
From Model to Viewport
ymax
ymin
xmin xmax
From Model to Viewport
• Model is (xmin,ymin)-(xmax,ymax)
• Viewport is (umin,vmin)-(umax,vmax)
• Translate by (-xmin,-ymin)
• Scale by ( xmax-xmin
umax-umin
, vmax-vmin )
ymax-ymin
• Translate by (umin,vmin)
M = T’ST
From Model to Viewport
Pixel Coordinates Model Coordinates
u x
v M y
w
w
Mouse position: inverse problem
• Mouse click: coordinates in pixels
• We want the equivalent in World
Coord
– because the user has selected an object
– to draw something
– for interaction
• How can we convert from window
coordinates to model coordinates?
Mouse click: inverse problem
• Simply inverse the matrix:
1 1
M (T ST )
Model Coordinates
Pixels coordinates
x u
y M 1 v
w
w
2D transformations: conclusion
• Simple, consistent matrix notation
– using homogeneous coordinates
– all transformations expressed as matrices
• Used by the window system:
– for conversion from model to window
– for conversion from window to model
• Used by the application:
– for modeling transformations