2D Geometric Transformations

CS-1206
Course Coordinator
Dr. Badal Soni
 Contents
• Definition & Motivation
• 2D Geometric Transformation
– Translation
– Rotation
– Scaling
• Matrix Representation
• Homogeneous Coordinates
• Matrix Composition
• Composite Transformations
– Pivot-Point Rotation
– General Fixed-Point Scaling
– Reflection and Shearing
– Transformations Between Coordinate Systems
 Geometric Transformation
• Definition

– Translation, Rotation, Scaling

• Motivation – Why do we need geometric

transformations in CG?
– As a viewing aid
– As a modeling tool
– As an image manipulation tool
 Example: 2D Geometric
Transformation
Modeling
Coordinates

World Coordinates
 Example: 2D Scaling
Modeling
Coordinates

Scale(0.3, 0.3)

World Coordinates
 Example: 2D Rotation
Modeling
Coordinates

Scale(0.3, 0.3)
Rotate(-90)

World Coordinates
 Example: 2D Translation
Modeling
Coordinates

Scale(0.3, 0.3)
Rotate(-90)
Translate(5, 3)

World Coordinates
 Example: 2D Geometric
Transformation
Modeling
Coordinates
Again?

World Coordinates
 Example: 2D Geometric
Transformation
Modeling
Coordinates
Scale
Translate

Scale
Rotate
Translate
World Coordinates
 Basic 2D Transformations
• Translation
– x   x  tx
– y  y  ty
• Scale
– x  x  sx
– y  y  sy
• Rotation
– x   x  cosθ - y  sinθ
–
y  y  sinθ  y  cosθ
• Shear
–
x   x  hx  y
–
y  y  hy  x
 Basic 2D Transformations
• Translation
– x   x  tx
– y  y  ty
• Scale
– x  x  sx
– y  y  sy
• Rotation
– x   x  cosθ - y  sinθ Transformations
– can be combined
y  y  sinθ  y  cosθ
• Shear (with simple algebra)
–
x   x  hx  y
–
y  y  hy  x
 Basic 2D Transformations
• Translation
– x   x  tx
– y  y  ty
• Scale
– x  x  sx
– y  y  sy
• Rotation
– x   x  cosθ - y  sinθ
–
y  y  sinθ  y  cosθ
• Shear x   x  sx
–
x   x  hx  y y  y  sy
–
y  y  hy  x
 Basic 2D Transformations
• Translation
– x   x  tx
– y  y  ty
• Scale
– x  x  sx
– y  y  sy
• Rotation
– x   x  cosθ - y  sinθ
–
y  y  sinθ  y  cosθ
• Shear x  ((x  sx)  cos  (y  sy)  sin )
–
x   x  hx  y y  ((x  sx)  sin  (y  sy)  cos )
–
y  y  hy  x
 Basic 2D Transformations
• Translation
– x   x  tx
– y  y  ty
• Scale
– x  x  sx
– y  y  sy
• Rotation
– x   x  cosθ - y  sinθ
–
y  y  sinθ  y  cosθ
• Shear x   ((x  sx)  cos  (y  sy)  sin )  tx
–
x   x  hx  y y  ((x  sx)  sin  (y  sy)  cos )  ty
–
y  y  hy  x
 Basic 2D Transformations
• Translation
– x   x  tx
– y  y  ty
• Scale
– x  x  sx
– y  y  sy
• Rotation
– x   x  cosθ - y  sinθ
–
y  y  sinθ  y  cosθ
• Shear x   ((x  sx)  cos  (y  sy)  sin )  tx
–
x   x  hx  y y  ((x  sx)  sin  (y  sy)  cos )  ty
–
y  y  hy  x
 Matrix Representation
• Represent a 2D Transformation by a Matrix

a b 
c d 
 

• Apply the Transformation to a Point

x  ax  by  x   a b   x 
     

y  cx  dy 
 y  c d   y 
Transformation
Point
Matrix
 Matrix Representation
• Transformations can be combined by matrix
multiplication
 x   a b  e f  i j   x 
 y   c d   g     
h  k l   y 
   
Transformation
Matrix
Matrices are a convenient and efficient way
to represent a sequence of transformations
 2×2 Matrices
• What types of transformations can be
represented with a 2×2 matrix?
2D Identity
x  x  x  1 0  x 
 y  0 1  y 
y  y     
2D Scaling
x  sx  x  x   sx 0   x 
y  sy  y  y  0 sy   y 
    
 2×2 Matrices
• What types of transformations can be
represented with a 2×2 matrix?
2D Rotation
x  cos  x  sin   y  x  cos  sin    x 
 y  sin  cos   y 
y  sin   x  cos  y     
2D Shearing
x  x  shx  y  x  1 shx   x 
y  shy  x  y  y   shy 1  y 
    
 2×2 Matrices
• What types of transformations can be
represented with a 2×2 matrix?
2D Mirror over Y axis
x   x  x    1 0   x 
y  y  y    0 1   y 
    
2D Mirror over (0,0)
x   x  x    1 0   x 
y   y  y  0  1  y 
    
 2×2 Matrices
• What types of transformations can be
represented with a 2×2 matrix?
2D Translation
x   x  tx
y  y  ty NO!!

Only linear 2D transformations

can be Represented with 2x2 matrix
 2D Translation
• 2D translation can be represented by a 3×3
matrix
– Point represented with homogeneous coordinates
 x  1 0 tx   x 
x   x  tx  y  0 1 ty   y 
y  y  ty     
1  0 0 1  1 
 Basic 2D Transformations
• Basic 2D transformations as 3x3 Matrices
 x  1 0 tx   x   x   sx 0 0   x 
 y  0 1 ty   y   y  0 sy 0  y 
         
1  0 0 1  1  1  0 0 1  1 
Translate Scale
 x  cos  sin  0   x   x  1 shx 0   x 
 y  sin  cos 0  y  y   shy 1 0  y 
         
1  0 0 1  1  1  0 0 1 1 

Rotate Shear
 Homogeneous Coordinates
• Add a 3rd coordinate to every 2D point
– (x, y, w) represents a point at location (x/w, y/w)
– (x, y, 0) represents a point at infinity
– (0, 0, 0) Is not yallowed
2 (2, 1, 1) or (4, 2, 2) or (6, 3, 3)
1
x
1 2

Convenient Coordinate System to

Represent Many Useful Transformations
 Linear Transformations
• Linear transformations are combinations of …
– Scale
 x   a b 0   x 
– Rotation  y    c d 0   y 
– Shear, and     
– Mirror  w 0 0 1   w
• Properties of linear transformations
– Satisfies: T ( s1 p1  s2 p2 )  s1T ( p1 )  s2T ( p2 )
– Origin maps to origin
– Lines map to lines
– Parallel lines remain parallel
– Ratios are preserved
– Closed under composition
 Affine Transformations
• Affine transformations are combinations of
– Linear transformations, and
– Translations
 x   a b c   x 
 y   d e f   y 
    
 w 0 0 1   w
• Properties of affine transformations
– Origin does not map to origin
– Lines map to lines
– Parallel lines remain parallel
– Ratios are preserved
– Closed under composition
 Projective Transformations
• Projective transformations…
– Affine transformations, and
– Projective warps
 x   a b c   x 
 y   d e f   y 
    
 w  g h i   w
• Properties of projective transformations
– Origin does not map to origin
– Lines map to lines
– Parallel lines do not necessarily remain parallel
– Ratios are not preserved
– Closed under composition
 Matrix Composition
• Transformations can be combined by matrix
multiplication

 x   1 0 tx  cos θ - sinθ 0  sx 0 0   x 

 y    0 1 ty   sinθ cosθ 0 0 sy 0    y 
       
 w  0 0 1   0 0 1  0 0 1    w 
p  T(tx, ty) R( ) S(sx, sy) p
• Efficiency with premultiplication
– Matrix multiplication is associative
p  (T  (R  (S  p))) p  (T  R  S)  p
 Matrix Composition
• Rotate by  around arbitrary point (a,b)
– M  T(a, b)  R(θ )  T(-a,-b)
(a,b)

• Scale by sx, sy around arbitrary point (a,b)

– M  T(a, b)  S(sx, sy)  T(-a,-b)
(a,b)
 Pivot-Point Rotation

(xr,yr) (xr,yr) (xr,yr) (xr,yr)

Translate Rotate Translate

T  xr , y r   R    T   xr ,  y r   R  xr , y r ,  
1 0 x r  cos   sin  0 1 0  x r  cos   sin  x r (1  cos  )  y r sin  
0 1 y    sin  cos  0  0 1  y    sin  cos  y (1  cos  )  x sin  
 r    r  r r 
0 0 1   0 0 1 0 0 1   0 0 1 
 General Fixed-Point Scaling

(xf,yf) (xf,yf) (xf,yf) (xf,yf)

Translate Scale Translate

T  x f , y f   S  s x , s y   T   x f , y f   S  x f , y f , s x , s y 
1 0 xf  s x 0 0 1 0  xf  s x 0 x f (1  s x ) 
0 1 yf 0 sy 0  0 1  yf 0 sy y f (1  s y )
    
0 0 1   0 0 1 0 0 1   0 0 1 

cgvr.korea.ac.kr
 Reflection
• Reflection with respect to the axis
• x • y • xy
  1 0 0   1 0 0
1 0 0   0 1 0  0  1 0
0  1 0    
   0 0 1  0 0 1
0 0 1

y 1 y y
1 1’ 1’

2 3 2 3 3’ 2 3’ 2
x x 3 x
2’ 3’ 1

1’ 2
 Reflection
 Reflection with respect to a Line

y
0 1 0 
1 0 0 
  x
0 0 1
y=x


 Clockwise rotation of 45  Reflection about the x
axis  Counterclockwise rotation of 45 
y y 1
y
2 3
x x
2’ 3’ x

1’
 Shear
• Converted to a parallelogram
y (1,1) y
(0,1)
1 sh x 0 (2,1) (3,1)
0 1 0
 (0,0) (1,0) x
(0,0) (1,0)
x
0 0 1
x’ = x + shx · y, y’ = y
x (Shx=2)
• Transformed to a shifted parallelogram
(Y = Yref)

y y
(1,1) (1,1) (2,1)
1 sh x  sh x  y ref  (0,1)
0 1 0  (1/2,0)
  (0,0) (1,0)
x (3/2,0) x
0 0 1 
(0,-1)

x’ = x + shx · (y-yref), y’ = y
(Shx=1/2, yref=-1)
 Shear
• Transformed to a shifted parallelogram
(X = Xref)

(0,3/2) (1,2)
 1 0 0  y y
 sh 1  sh y  x ref  (1,1)
 y  (0,1)
 0 0 1  (0,1/2) (1,1)
x x
(0,0) (1,0) (-1,0)

x’ = x, y’ = shy · (x-xref) + y

(Shy=1/2, xref=-1)