2D Geometrical Transformations

Foley & Van Dam, Chapter 5

 2D Geometrical Transformations
• Translation
• Scaling
• Rotation
• Shear
• Matrix notation
• Compositions
• Homogeneous coordinates
 2D Geometrical Transformations
Assumption: Objects consist of points and lines.
A point is represented by its Cartesian coordinates:
P = (x, y)

Geometrical Transformation:
Let (A, B) be a straight line segment between the
points A and B.
Let T be a general 2D transformation.
T transforms (A, B) into another straight line segment
(A’, B’), where:
A’=TA and
B’=TB
 Translation
• Translate(a, b): (x, y) → (x+a, y+b)

Translate(2, 4)
 Scale
• Scale (a, b): (x, y) → (ax, by)

Scale (2, 3)

Scale (2, 3)
 Scale
• How can we scale an object without
moving its origin (lower left corner)?
Translate(-1,-1)

Translate(1,1)
Scale(2,3)
 Reflection
• Special case of scale

Scale(-1,1)

Scale(1,-1)
 Rotation
• Rotate(θ):
(x, y) → (x cos(θ)+y sin(θ), -x sin(θ)+y cos(θ))

Rotate(90)

Rotate(90)
 Rotation
• How can we rotate an object without
moving its origin (lower left corner)?
Translate(-1,-1)

Translate(1,1)
Rotate(90)
 Shear
• Shear (a, b): (x, y) → (x+ay, y+bx)

Shear(1,0)

Shear(0,2)
 Classes of Transformations
• Rigid transformation (distance preserving):
Translation + Rotation
• Similarity transformation (angle preserving):
Translation + Rotation + Uniform Scale
• Affine transformation (parallelism preserving):
Translation + Rotation + Scale + Shear

All above transformations Affine

are groups where
Similarity

Rigid ⊂ Similarity ⊂ Affine Rigid

 Matrix Notation
• Let’s treat a point (x, y) as a 2x1 matrix
(column vector):
 x 
 y 
 

• What happens when this vector is multiplied

by a 2x2 matrix?
a b   x   ax + by 
c    = 
 d   y   cx + dy 
 2D Transformations
• 2D object is represented by points and lines
that join them

• Transformations can be applied only to the the

points defining the lines

• A point (x, y) is represented by a 2x1 column

vector, so we can represent 2D transformations
by using 2x2 matrices:
 x ' a b   x 
 y ' =  c d   y 
     
 Scale
• Scale (a, b): (x, y) → (ax, by)
a 0   x   ax 
0 =
 b   y   by 
 

•If a or b are negative, we get reflection

• Inverse: S-1(a,b) = S(1/a, 1/b)

 Reflection
• Reflection through the y axis:
− 1 0
 0 1 

• Reflection through the x axis:
 1 0
0 − 1 

• Reflection through y = x:
0 1 
1 0 

• Reflection through y = -x:
 0 − 1
− 1 0 

 Shear
• Shear (a, b): (x, y) → (x+ay, y+bx)

1 a   x   x + ay 
b    =  
 1   y   y + bx 
 Rotation
• Rotate(θ):
(x, y) → (x cos(θ)+y sin(θ), -x sin(θ)+y cos(θ))

 cos θ sin θ   x   x cos θ + y sin θ 

 − sin θ = 


cos θ   y   − x sin θ + y cos θ 
 

• Inverse: R-1(q) = RT(q) = R(-q)

Composition of Transformations
• A sequence of transformations can be
collapsed into a single matrix:
 x   x 
[ A ][B ][C ]  = [D ] 
 y   y 
•Note: Order of transformations is important!
translate rotate

rotate translate
 Translation
• Translation (a, b):
 x   x + a 
 y  →  y + b 
   
Problem: Cannot represent translation
using 2x2 matrices

Solution:
Homogeneous Coordinates
 Homogeneous Coordinates
Is a mapping from Rn to Rn+1:
( x , y ) → ( X , Y , W ) = ( tx , ty , t )

Note: All triples (tx, ty, t) correspond to the

same non-homogeneous point (x, y)
Example (2, 3, 1) ≡ (6, 9, 3).

Inverse mapping:
 X Y 
( X ,Y ,W ) →  , 
 W W 
 Translation
• Translate(a, b):
1 0 a   x   x + a 
0 1 b   y  =  y + b 
    
 0 0 1   1   1 

Inverse: T-1(a, b) = T(-a, -b)

Affine transformations now have the
following form:
a b e 
c d f 

 0 0 1 
 Geometric Interpretation
A 2D point is mapped to a line (ray) in 3D
The non-homogeneous points are obtained
by projecting the rays onto the plane Z=1
W
Y
(X,Y,W)
1 y
x
(X,Y,1)

X
 Example
Rotation about an arbitrary point
(x0,y0)

1. Translate the coordinates so that the origin is at (x0,y0)

2. Rotate by θ
3. Translate back
 1 0 x 0   cos θ sin θ 0  1 0 − x 0   x 
0 1 y   − sin θ cos θ 0   0 1 − y   y  =
 0   0   
 0 0 1   0 0 1   0 0 1   1 

 cos θ − sin θ x ( 1 − cos θ ) + y

0 0 sin θ   x 
=  sin θ cos θ y 0 ( 1 − cos θ ) − x 0 sin θ   y 
 
 0 0 1   1 
 Example
Reflection about an arbitrary line
p2
L = p1 + t (p2-p1) = t p2 + (1-t) p1
p1

1. Translate the coordinates so that P1 is at the

origin
2. Rotate so that L aligns with the x-axis
3. Reflect about the x-axis
4. Rotate back
5. Translate back
 Change of Coordinates
It is often required to transform the description of an
object from one coordinate system to another

Rule: Transform one coordinate frame towards the

other in the opposite direction of the representation
change ion
entat
res y’
R ep x’
y

at ion
s f orm
x Tra
n
 Example
• Change of coordinates: Represent P = (xp, yp, 1)
in the (x’, y’) coordinate system
P ' = MP
Where:
 cos θ sin θ 0  1 0 − x 
  0

M =  − sin θ cos θ 0  0 1 − y 0 
 0 0 1  0 0 1 
  
y’ x’
y
θ
(x0, y0)
(xp, yp)
x
 Example
• Change of coordinates:
Alternative method: assume x’ = (ux, uy) and
y’ = (vx, vy) in the (x, y) coordinate system

where
P ' = MP
 u x u 0  1 0 − x 
 y
 0

M =  v x v y 0  0 1 − y 0 
 0 0 1   0 0 1 
 

y’ x’
y
(vx, vy) (ux, uy)
(x0, y0)

x
 Example
Reflection about an arbitrary line
p2
L = p1 + t (p2-p1) = t p2 + (1-t) p1
p1

Define a coordinate systems (u, v) parallel to

P1P2: p2 − p1  u x 
u = ≡  
p 2 − p1  u y 
 − u   v 
v =  y
 =  v x

 u x   y 
1 0 p 1x  u x vx 0  1 0 0   u x uy 0  1 0 − p 1x 
    
M = 0 1 p 1y  u y vy 0  0 −1 0  v x vy 0  0 1 − p 1y 
 0  0 1   0
0
 0 1  0 1  0
 0 1   0 0 1 

3D Viewing Transformation Pipeline
Viewing coordinates

World Coordinates Object in World

p ing
m ap
:2 D
3 D

2D:2D mapping

Viewport

Device Coordinates
 World to Viewing Coordinates
In order to define the viewing window we have to
specify:
•Windowing-coordinate origin P0 = (x0,y0)
•View vector up v = (vx,vy)
•Using v, we can find u: u = v x (0,0,1)
yv
ie w (vx,vy).

y world
(x0,y0)x v
ie w
(ux,uy).
x world
Transformation from world to viewing coordinates :
ux uy 0  1 0 − x0 
 
M wc − vc = vx vy 0   0 1 − y 0 
 0
 0 1   0 0 1 
 Window to Viewport Coordinates
(xmax,ymax)

(xmin,ymin)

Window is Viewing Coordinates Window translated to origin

(umaxn,vmaxn)

(umin,vmin)

Window scaled and translated to Window scaled to Normalized

Viewport location in device coordinates Viewport size
 1 0 0 
 1 0 u min  u max − u min 0 0  x max − x min
 1 0 − x min 
   1 
M vc − dc=  0 1 v min  0 v max − v min 0  0 0  0 1 − y min 
0 0  y max − y min 
 1  0 0 1  0 0 1  0 0 1 
 
 

Normalized Device Coordinates

 Efficiency Considerations
A 2D point transformation requires 9 multiplies and 6
adds
 a b c   x  ax + by + cz 
d e f   y  =  d x + e y + fz 
    
 g h i   z   g x + h y + i z 
But since affine transformations have always the form:
 a b c   x   ax + by + c 
d e    
f   y  = dx + ey + f  

 0 0 1   1   1 
The number of operations can be reduced to 4
multiplies and 4 adds
 Efficiency Considerations
The rotation matrix is:

 cos θ sin θ   x   x cos θ + y sin θ 

 − sin θ = 


cos θ   y   − x sin θ + y cos θ 
 

When rotating of small angles θ, we can use the fact

that cos(θ) ≅ 1 and simplify

 1 sin θ   x   x + y sin θ 
 − sin θ    =  
 1   y   − x sin θ + y 
 Determinant of a Matrix
a b
= ad − bc
c d
a b c
d e f = aei + bfg + cdh − ceg − afh − bdi
g h i
e f d f d e
= a −b +c
h i g i g h

If P is a polygon of area AP, transformed by a matrix

M, the area of the transformed polygon is AP∗|M|