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
–  Transformations
x  x  cosθ - y  sinθ
– 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 , yr  R  T  xr , yr   Rxr , yr , 

1 0 xr  cos  sin  0 1 0  xr  cos  sin  xr (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 sx , sy T  x f , y f   S x f , y f , sx , sy 
1 0 xf  s x 0 0 1 0  x f  s x 0 x f (1  s x ) 
0 1 yf 0 sy 0  0 1  y f    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  1 0  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 y
(0,1) (1,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 shx  shx  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)
(1,2)
 1 0 0  y
(0,3/2)
y
sh 1  sh y  x ref  (1,1)
 y (0,1)
(0,1/2) (1,1)
 0 0 1 
x x
(0,0) (1,0) (-1,0)

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

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