CAP4730: Computational

Structures in Computer Graphics

2D Transformations
 2D Transformations
• World Coordinates
• Translate
• Rotate
• Scale
• Viewport Transforms
• Putting it all together
 Transformations
• Rigid Body Transformations - transformations that do
not change the object.
• Translate
– If you translate a rectangle, it is still a rectangle
• Scale
– If you scale a rectangle, it is still a rectangle
• Rotate
– If you rotate a rectangle, it is still a rectangle
 Vertices
• We have always represented vertices as
(x,y)
• An alternate method is:
 x
( x, y )   
 y
• Example:
 2.1
(2.1,4.8)   
4.8
 Matrix * Vector
 x' a b   x   x'  a b c   x 
 y '   c d   y   y '   d e f   y 
         
 z '   g h i   z 

x'  ax  by x'  ax  by  cz
y '  dx  ey  fz
y '  cx  dy
z '  gx  hy  iz
1 0 0
1 0
I   I  0 1 0
 0 1  0 0 1
 Matrix * Matrix

a b  x y  Does A*B = B*A?

A  ,B   
 c d   z w  What does the identity do?

ax  bz ay  bw
A* B   
 cx  dz cy  dw
a b  1 0
?  0 1 
 c d  
 Practice

2  3 2
A  ,X  
1 5   3
AX  ?
2  3  0.5 1 
A  ,B   
 1 5   3 2 .5 
A* B  ?
A* I  ?
 Translation
• Translation - repositioning an object along a
straight-line path (the translation
distances) from one coordinate location to
another. (x’,y’)

(tx,ty)

(x,y)
 Translation
P  (3.7,4.1)
P  ( x, y )
• Given: T  (7.1,8.2)
T  (t x , t y )

x'  3.7  7.1

x'  x  t x
y '  4.1  8.2
• We want: y'  y  t y

 x'  3.7   7.1

 x'  x  t x   y '    4.1  8.2
 y '   y   t       
• Matrix form:      y  x'  3.4
P'  P  T y '  4.1
 Translation Examples
• P=(2,4), T=(-1,14), P’=(?,?)
• P=(8.6,-1), T=(0.4,-0.2), P’=(?,?)
• P=(0,0), T=(1,0), P’=(?,?)
 Which one is it?

(x’,y’)

(tx,ty)
(tx,ty)

(x,y) (x,y)
 Recall
• A point is a position specified with
coordinate values in some reference frame.
• We usually label a point in this reference
point as the origin.
• All points in the reference frame are given
with respect to the origin.
Applying to Triangles

(tx,ty)
 What do we have here?
• You know how to:
 Scale
• Scale - Alters the size of an object.
• Scales about a fixed point
(x’,y’)

(x,y)
 Scale
P  ( x, y ) P  (1.4,2.2)
• Given:
S  (sx , s y ) S  (3,3)

x'  s x x x'  3 *1.4

• We want: y'  s y y y '  3 * 2.2
 x' 3 0 1.4 
 y '  0 3 2.2
 x'  s x 0  x     
 y '   0 s y   y  x'  4.2
• Matrix form:   
P'  S  P y '  6.6
Non-Uniform/Differential Scalin’

(x’,y’)

(x,y)

S=(1,2)
 Rotation
• Rotation - repositions an object along a
circular path.
• Rotation requires an  and a pivot point
 Rotation

P  ( x, y ) x'  r cos  cos  r sin  sin 

R  ( ) y '  r cos  sin   r sin  cos
x  r cos  x'  x cos  y sin 
y  r sin  y '  x sin   y cos
x'  r cos(  )  x' cos  sin    x 
y '  r cos(  )  y '   sin  cos   y 
  
P'  R  P
 Example
• P=(4,4)
 =45 degrees
 What is the difference? Revisited
V(-0.6,0) V(0,-0.6) V(0.6,0.6) Translate (1.2,0.3)
Translate (1.2,0.3) V(0.6,0.3) V(1.2,-0.3) V(1.8,0.9)
V(0,0.6) V(0.3,0.9) V(0,1.2) V(0,0.6) V(0.3,0.9) V(0,1.2)
 Rotations
V(-0.6,0) V(0,-0.6) V(0.6,0.6)
Rotate -30 degrees
V(0,0.6) V(0.3,0.9) V(0,1.2)
 Combining Transformations
Q: How do we
specify each
transformation?
 Specifying 2D Transformations
• Translation
– T(tx, ty)
– Translation distances
• Scale
– S(sx,sy)
– Scale factors
• Rotation
– R()
– Rotation angle
 Combining Transformations
• Using translate, rotation, and scale, how do
we get:
 Combining Transformations
• Note there are two ways to combine
rotation and translation. Why?
 Let’s look at the equations
P ( x, y ) x"  x  t x cos  y  t y ' sin 
T (t x , t y ) y"  x  t x sin   y  t y ' cos
R( ) P'  R  P
P'  P  T P"  P 'T
P' '  R  P' x'  x cos  y sin 
x'  x  t x y '  x sin   y cos
y'  y  t y x"  x cos  y sin    t x
x"  x' cos  y ' sin  y"  x sin   y cos   t y
y"  x' sin   y ' cos
 Combining them
• We must do each step in turn. First we
rotate the points, then we translate, etc.
• Since we can represent the transformations
by matrices, why don’t we just combine
them?
P'  P  T
P'  R  P
P'  S  P
 2x2 -> 3x3 Matrices
• We can combine transformations by
expanding from 2x2 to 3x3 matrices.
1 0 t x 
 x  t x 
T t x , t y         0 1 t y 
 y  t y  0 0 1 
 
 s x 0 0
s
 x 0  
S s x , s y       0 s y 0
 0 s y   0 0 1
 
cos  sin  0
cos  sin   
R        sin  cos 0
 sin  cos   0 0 1

 Homogenous Coordinates
• We need to do something to the vertices
• By increasing the dimensionality of the
problem we can transform the addition
component of Translation into
multiplication.
 xh   6
 x  3 
 xh   h  4  6  2
 x   yh  4   3    14 
P      yh    y   Ex.   2, Ex.   14  7  
 y  h   h  2
1   7 
 2   2 
2
   h 
 h   2 
 Homogenous Coordinates
• Homogenous Coordinates - term used in
mathematics to refer to the effect of this
representation on Cartesian equations. Converting a
pt(x,y) and f(x,y)=0 -> (xh,yh,h) then in homogenous
equations mean (v*xh,v*yh,v*h) can be factored out.
• What you should get: By expressing the
transformations with homogenous equations and
coordinates, all transformations can be expressed as
matrix multiplications.
 Final Transformations -
Compare Equations
 x '  1 0 t x   x 
 x '  t x   x    
 
T t x , t y            y '  0 1 t y   y 
 y ' t y   y    
 1  0 0 1   1 
P  T t x , t y  P  P  T t x , t y  P
 x'  s 0 0  x 
0  x    x
 x'  s x
S s x , s y            y '   0 sy 0  y 
 y '  0sy  y
 1   0 0 1  1 
P  S s x , s y  P  P  S s x , s y  P
 x' cos   sin  0  x 
 x' cos  sin    x    
R             y '   sin  cos 0  y 
 y '  sin  cos   y   1   0 0 1  1 
  
P  R   P  P  R  P
 Combining Transformations
P '  A  P, P"  B  P '  P"  A  B  P
P (3,4), T (0.4641,2), R(60)
 x '  1 0 t x   x   x" cos  sin  t x cos  t y sin    x 
 y '  0 1 t   y   y"   sin  cos t sin   t cos   y 
   y  
   x y  
 1  0 0 1   1   1   0 0 1   1 
 x" cos  sin  0  x '   x" 1 0 t x  cos  sin  0  x 
 y"   sin  cos 0  y '  y"  0 1 t   sin  cos 0  y 
      y   
 1   0 0 1  1   1  0 0 1   0 0 1  1 
 x" cos  sin  0  1 0 t x   x '   x" cos  sin  t x   x 
 y"   sin  cos 0 0 1 t y   y '  y"   sin  cos t   y 
      y  
 1   0 0 1 0 0 1   1   1   0 0 1   1 
How would we get:
How would we get:
 Coordinate Systems
• Object Coordinates
• World Coordinates
• Eye Coordinates
Object Coordinates
World Coordinates
Screen Coordinates
 Coordinate Hierarchy
S c re en C oo rd in a te s

T ra n sfo rm a tion
W o rld -> S c re en

W o rld C o o rdin a te s

T ra n sfo rm a tio n T ra n sfo rm a tion T ra n sfo rm a tio n

O b je ct # 1 -> O b je ct # 2 -> O b je ct # 3 ->
W o rld W o rld W o rld

O b je c t # 1 O b jec t #2 O b jec t #3
O b jec t C oo rd in a tes O b je c t C oo rd in a tes O b jec t C oo rd in a tes
Let’s reexamine assignment 2b
 Transformation Hierarchies
• For example:
 Transformation Hierarchies
• Let’s examine:
 Transformation Hierarchies
• What is a better way?
 Transformation Hierarchies
• What is a better way?
Transformation Hierarchies W o rld C o o rdin a te s

T ra n sfo rm a tion
G re e n -> W o rld

• We can have transformations be

in relation to each other
G re en
O b je ct's C o o rd in a te s

T ra n sfo rm a tion
R e d -> G re en

R ed
O b jec t C o o rd in a te s

T ra n sfo rm a tion
B lu e -> R e d

B lue
O b jec t C o o rd in a te s
More Complex Models