TRANSFORMATIONS

2DIMENTIONAL
 TRANSFORMATIONS
• Geometric transformations will map points in
one space to points in another: (x',y',z') =
f(x,y,z).
• These transformations can be very simple, such
as scaling each coordinate, or complex, such as
non-linear twists and bends.
• We'll focus on transformations that can be
represented easily with matrix operations.
• We'll start in 2D...
 Representation
• We can represent a point, p = (x,y), in the plane

– as a column vector x

 
y

– as a row vector

x y

University of Texas at Austin CS384G -

 Computer Graphics Fall 2008 Don

Fussell 3
 Representation, cont.
• We can represent a 2-D transformation M by a matrix
a b
M  
c d

• If p is a column vector, M goes on the left:

pMp
x 
 a bx
    
y 
 c dy
T
• If p is a row vector, M goes on the right: ppM T
a c 
  x  y   x y   
b d 
• We will use column vectors.
University of Texas at Austin CS384G -
Computer Graphics Fall 2008 Don
Fussell 4
 Two-dimensional transformations
• Here's all you get with a 2 x 2 transformation
matrix M:
x 
 a bx
   

y  c dy

• So: x ax  by
y cx  dy

• We will develop some intimacy with the

elements a, b, c, d…

University of Texas at Austin CS384G -
Computer Graphics Fall 2008 Don
Fussell 5
 Identity
• Suppose we choose a=d=1, b=c=0:
– Gives the identity matrix:
1 0
 
0 1

– Doesn't
move the points at all

University of Texas at Austin CS384G -

Computer Graphics Fall 2008 Don
Fussell 6
 Scaling
• Suppose b=c=0, but let a and
a d0take
 on any positive value:
– Gives a scaling matrix:  
0 d
– Provides differential (non-uniform) scaling in x and y:

 2 0 x ax

 
0 2
y dy

1 2 0
  
0 2



University of Texas at Austin CS384G -
Computer Graphics Fall 2008 Don
Fussell 7
 Reflection
• Suppose b=c=0, but let either a or d go negative.
• Examples:

 1 0 1 0 

   
0 1 0  1

 
University of Texas at Austin CS384G -
Computer Graphics Fall 2008 Don
Fussell 8
 Shear
• Now leave a=d=1 and experiment with b
• The matrix 1 b
 
0 1

gives: x x  by
 y y

1 1
 
 0 1

University of Texas at Austin CS384G -


Computer Graphics Fall 2008 Don
Fussell 9
 Effect on unit square
• Let's see how a general 2 x 2
transformation M affects the unit square:
a b
 p q r s p q r  s

c d
a b0 1 1 0 0 a a  b b
   
c d 0
 0 1 1 0 c c  d d 



University of Texas at Austin CS384G -

Computer Graphics Fall 2008 Don
Fussell 10
 Effect on unit square, cont.
• Observe:
– Origin invariant under M
– M can be determined just by knowing how the
corners (1,0) and (0,1) are mapped
– a and d give x- and y-scaling
– b and c give x- and y-shearing

University of Texas at Austin CS384G -

Computer Graphics Fall 2008 Don
Fussell 11
 Rotation About the Origin
y-axis

To rotate a line or polygon, we must (x2,y2)

rotate each of its vertices.
(x1,y1)

To rotate point (x1,y1) to point (x2,y2) B

r

we observe: A
(0,0)
x-axis

From the illustration we know that:

sin (A + B) = y2/r cos (A + B) = x2/r
sin A = y1/r cos A = x1/r
 Rotation About the Origin
From the double angle formulas: sin (A + B) = sinAcosB + cosAsinB
cos (A + B)= cosAcosB - sinAsinB

Substituting: y2/r = (y1/r)cosB + (x1/r)sinB

Therefore: y2 = y1cosB + x1sinB

We have x2 = x1cosB - y1sinB

y2 = x1sinB + y1cosB

P2 = R . P
1

(x2) (cosB -sinB) (x1)

=
(y2) (sinB cosB) (y1)
 Translations
Moving an object is called a translation. We translate a point by adding to
the x and y coordinates, respectively, the amount the point should be
shifted in the x and y directions. We translate an object by translating
each vertex in the object.

P2 = P 1 + T
Ty

P1 = ( x1 ) T = ( tx )
Tx ( y1 ) ( ty )

P2 = (x1 + tx)
(y1 + ty)
 Scaling

Changing the size of an object is called a scale. We scale an object by scaling

the x and y coordinates of each vertex in the object.

P2 = S .P1

S = (sx 0) P1 = ( x1 )
(0 sy) ( y1 )

P2 = (sxx1)
(syy1)
 2D Scaling
x  x sx , y  y s y
Sx
 x  sx 0   x
 y  0 s y   y 
Sy   
P S P
y Scaling about a fixed point  x f , y f 
x  x sx  x f 1  sx 

y  y s y  y f 1  s y 
x f , yf 
x
P P S  P f 1 - S 

April 2010 16
 Limitations of the 2 x 2 matrix
• A 2 x 2 linear transformation matrix allows
– Scaling
– Rotation
– Reflection
– Shearing

• But the origin is invarient with respect to all these

transformations .
• Can modify origin by translation.
• But we can’t have a single matrix having all
transformation coefficients …simply in 2X2 there is
University of Texas at Austin CS384G -
no room for translation
Computer Graphics
Fussell
constants.
Fall 2008 Don
17
 Homogeneous Coordinates
Displacement is unfortunately a non linear operation.

Make displacement linear with Homoheneous Coordinates.

 x, y    x, y,1. Transformations turn into 3 3 matrices.

Very big advantage. All transformations are concatenated by
matrix multiplication.
Point [x y] is represented as [x’ y’ h] in homogeneous co-ordinate
system.
Where x = x’/h , y = y’/h and h is any real number.
h=0 has special meaning.
One form of homogeneous co-ordinate is always [x y h] other  [hx
hy h]
[6April
4 2010
2] ,[12 8 4] ,[3 2 1] all represent the point (3 , 2). 18
  x  1 0 t x   x 
 y  0 1 t   y  , P T t , t P
2D Translation
   y    x y
 1   0 0 1   1 

 x  cos   sin  0  x 

2D Rotation  y  sin  cos  0   y  , P R  P
  
 1   0 0 1   1 

 x  S x 0 0  x 
2D Scaling  y  0 Sy 0   y  , P S S x , S y P
  
 1   0 0 1   1 

April 2010 19
 Inverse transformations:

 1 0  tx   cos  sin  0 1 S x 0 0
T 1  0 1  t y  , R  1   sin  cos  0  , S  1  0 1 S y 0 
 0 0 1   0 0 1   0 0 1 

Composite transformations: P M 2 M1 P  M 2 M1 P M P

  
P T t2 x , t2 y  T t1x , t1 y P  T t2 x , t2 y T t1x , t1 y  P
 1 0 t2 x   1 0 t1x   1 0 t1 x  t2 x 
 0 1 t   0 1 t   0 1 t  t 
Composite translations:  2y   1y   1y 2y 

 0 0 1   0 0 1   0 0 1 

T t2 x , t2 y T t1x , t1 y  T t1x  t2 x , t1 y  t2 y 

April 2010 20
 P R  2  R 1  P  R  2  R 1  P

Composite Rotations: R  2  R 1  R 1   2 

P R 1   2  P

 S2 x 0 0   S1x 0 0   S1x S 2 x 0 0
 0 S2 y 0   0 S1 y 0   0 S1 y S 2 y 0 

 0 0 1   0 0 1   0 0 1 

Composite Scaling: S S 2 x , S 2 y S S1x , S1 y  S S1x S 2 x , S1 y S 2 y 

April 2010 21
 General 2D Rotation
Move to origin Rotate Move back

 xr , yr 

1 0 xr   cos   sin  0   1 0  xr 
0 1 yr   sin  cos  0   0 1  yr  

 0 0 1   0 0 1   0 0 1 

 cos   sin  xr 1  cos    yr sin  

 
 sin  cos  yr 1  cos    xr sin  
 0 0 1 

April 2010 22
 General 2D Scaling
Move to origin Scale Move back

x f , yf 

1 0 x f   Sx 0 0  1 0  x f   S x 0 x f 1  S x 
0 1  
 y f   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

 

April 2010 23
 2D Directional Scaling
x
S2
R  1   S S1 , S 2  R   

 S1 cos 2   S 2 sin 2  S2  S1 cos  sin  0

 
y  S 2  S1  cos  sin  S1 sin 2   S2 cos 2  0
 
 0 0 1 
S1
x x
S1 1

S 2 2

 45O
y y

April 2010 24
 2D Reflections
y y y

x x

 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 

April 2010 25
 3

2
y x y  x
2
1
1

3
2 1 1 3

 0 1 0  0  1 0
 1 0 0   1 0 0
   
 0 0 1   0 0 1 

April 2010 26
 3D TRANSFORMATIONS
• TRANSLATION
• SCALING
• ROTATION
• REFLECTION
 3D Transformations
Very similar to 2D. Using 4x4 matrices rather than 3x3.

Translation x  x  t x
y
y  y  t y

z z  t z

 x, y, z  x  1 0 0 tx   x 

 x, y , z   y  0
   1 0 t y   y 

 z   0 0 1 tz   z 
z x      
 1  0 0 0 1   1

April 2010 28
 Shearing in 3D
• Shearing is also more complicated. Here is one
x 
 1 b 0 0x
example:     
y 
0 1 0 0y
z 0 0 1 0z 
    
1
   0 0 0 11



• We call this a shear with respect to the x-z plane.

University of Texas at Austin CS384G -
Computer Graphics Fall 2008 Don
Fussell 29
 Basic 3-D transformations: scaling
Some of the 3-D transformations are just like the
2-D ones.
For example, scaling:
x 
 sx 0 0 0x
    
y 
0 sy 0 0y
z 0 0 sz 0z 
    
1  0 0 0 11


University of Texas at Austin CS384G -
Computer Graphics Fall 2008 Don
Fussell 30
 Rotation in 3D
Rotation now has more possibilities in 3D:
1 0 0 0
 
0 cos( )  sin( ) 0
Rx ( ) 
0 sin( ) cos( ) 0 Ry
 
0 0 0 1
cos( ) 0 sin( ) 0
  Rx
 0 1 0 0 Rz
Ry ( ) 
 sin( ) 0 cos( ) 0
 
 0 0 0 1 Use right hand
cos( )  sin( ) 0 0 rule
 
sin( ) cos( ) 0 0
Rz ( ) 
 0 0 1 0
 
 0 0 0 1
University of Texas at Austin CS384G -
Computer Graphics Fall 2008 Don
Fussell 31
ROTATION ABOUT AN ARBITRARY
AXIS
 General 3D Rotation

1. Translate the object such that rotation axis passes through

the origin.
2. Rotate the object such that rotation axis coincides with one
of Cartesian axes.
3. Perform specified rotation about the Cartesian axis.
4. Apply inverse rotation to return rotation axis to original
direction.
5. Apply inverse translation to return rotation axis to original
position.

April 2010 33
 y y y
P2
P2
P1
P1 P1
x x x
P2
z z z

y y y
P2 P2

P1 P1 P1

P2 x x x

z z z

April 2010 34
 1 0 0  x1 
0 1 0  y1 
The vector from P1 to P2 is: T 
0 0 1  z1 
 
V P2  P1  x2  x1 , y2  y1 , z2  z1  0 0 0 1 

Unit rotation vector: u V | V |a, b, c 

a  x2  x1  | V | y u a, b, c 
b  y2  y1  | V |

c  z2  z1  | V |
x
a 2  b 2  c 2 1
z
April 2010 35
 Rotating u to coincide with z axis

First rotate u around x axis to lay in x  z plane.

Equivqlent to rotation u 's projection on y  z plane around x axis.

cos  c b 2  c 2 c d , sin  b d .

 
We obtained a unit vector w  a, 0, b 2  c 2 d in x  z plane.
y u a, b, c 
1 0 0 0
0 c d b d 0  u
R x   
0 b d c d 0 
   x
0 0 0 1
z
April 2010 36
 Rotate w counterclockwise around y axis.

w is a unit vector whose x  component is a, y  component is 0,

hence z  component is b 2  c 2 d . y u a, b, c 

cos  d , sin   a

d 0 a 0  x
 0 1 0 0 
R y    
 a 0 d 0 z
 
 0 0 0 1 w a, 0, d 

R   T  1 R x1   R y1  R z  R y  R x  T

April 2010 37
  cos   sin  0 0
 sin  cos  0 0 
R z   
 0 0 1 0
 
 0 0 0 1

R   T  1 R x1  R y1  R z  R y  R x  T

M R   

 a 2 1  cos    cos  ab 1  cos    c sin  ac 1  cos    b sin  

 
            
2
ba 1  cos  c sin b 1  cos  cos bc 1  cos  a sin 
 ca 1  cos    b sin  cb 1  cos    a sin  c 2 1  cos    cos  
 

April 2010 38
 Efficient 3D Rotations by Quaternions
Quaternions are extensions of complex numbers to 4-dimension.

q s  ia  jb  kc s, v  s : real v a, b, c : imaginary

i 2  j 2 k 2  1, ij  ji k , jk  kj i, ki  ik  j

Addition: q1  q2 s1  s2 , v1  v 2 

Multiplication: q1q2 s1s2  v1 v 2 , s1 v 2 + s2 v1  v1 v 2 

1
2 
s,  v , qq  1 q  1q 1, 0 
2 2 1
q s  v v, q 
q

April 2010 39
 Rotate a point position p  x, y, z  about the unit vector u.

y
 Quarternion representation:
u   
Rotation: q  cos , u sin 
 2 2
x Position: P 0, p , p  x, y, z 
z
Rotation of P is carried out with the quarternion operation:

P qPq  1 0, s 2p  v p v   2s v p   v v p 

This can be calculated by efficient HW for fast 3D rotations

when many rotation operations are involved.

April 2010 40
 3D Scaling
y y
x  x S x

y  y S y

z   x S z

z x z x
Enlarging object also moves it from origin

 x  S x 0 0 0  x 
 y  0 Sy 0 0   y 
P       S P
 z   0 0 Sz 0  z 
     
 1  0 0 0 1  1 

April 2010 41
 Scaling with respect to a fixed point (not necessarily of object)

y y y

x f , yf , zf  x f , yf , zf  x f , yf , zf 
z x z x z x

y
 Sx 0 0 1  Sx  x f 
 
1
T S T  0 Sy 0 1  S y  y f 
x f , y f , z f  0 0 Sz 1  S z  z f 
 0 0 0 1 
z x

April 2010 42
 Properties of affine
transformations
• Here are some useful properties of affine
transformations:
– Lines map to lines
– Parallel lines remain parallel
– Midpoints map to midpoints (in fact, ratios are
always preserved)
pq s pq
 ratio   
qr t q
r

University of Texas at Austin CS384G -


Computer Graphics Fall 2008 Don
Fussell 43