Mod 1

Lecture 4
Transformations
 Transformations
- altering or manipulating displays
- animation sequences

◼ 2D Transformations
◼ Homogeneous Coordinates
◼ 3D Transformations
 Transformations
◼ Translation
◼ Rotation
◼ Scaling
◼ Reflection
◼ Shearing
 Transformations
◼ transforming an object = transforming all its
points

◼ transforming a polygon = transforming its

vertices
 Matrix Representation
◼ represent 2D transformation with matrix
◼ multiply matrix by column vector
apply transformation to point

 x' a b   x  x' = ax + by
 y ' =  c d   y  y ' = cx + dy
    
◼ transformations combined by multiplication
 x' a b   d e  h i   x 
 y ' =  c d   f     
    g  j k  y
◼ matrices are efficient, convenient way to represent
sequence of transformations!
 2D Translation

vector addition
(x′,y′)
 x  a   x + a   x' 
(x,y) ( a, b)  y  + b  =  y + b =  y '
       

◼ Rigid body transformation

that moves objects without deformation
 Scaling
◼ scaling a coordinate means multiplying each
of its components by a scalar
◼ uniform scaling means this scalar is the same
for all components:

2
 Scaling
◼ non-uniform scaling: different scalars per
component:

X  2,
Y  0.5
SCALING

Uniform scaling
◼

Non -uniform scaling

◼
 Scaling

scaling operation:  x' ax 

 y ' = by 
◼

   

or, in matrix form:  x'  a 0  x 

 y ' = 0 b  y 
◼

    
scaling matrix
2D rotation
2D rotation
 2D Rotation
◼ counterclockwise
(x′, y′)
◼ RHS

(x, y)

x′ = x cos() - y sin()
 y′ = x sin() + y cos()
2D Rotation From Trig Identities

x = r cos ()
y = r sin ()
x′ = r cos ( + )
y′ = r sin ( + )
(x′, y′)
Trig Identity…
(x, y) x′ = r cos() cos() – r sin() sin()
y′ = r sin() cos() + r cos() sin()

 Substitute…
x ′ = x cos() - y sin()
y ′ = x sin() + y cos()
 2D Rotation Matrix

◼ easy to capture in matrix form:

 x' cos( ) − sin ( )  x 

 y ' =  sin ( ) cos( )   y 
    
◼ even though sin(q) and cos(q) are nonlinear
functions of q,
◼ x′ is a linear combination of x and y

◼ y′ is a linear combination of x and y

 ROTATION
TRANSFORMATION
◼ A 90º rotation of an object about the origin
in the anti clockwise direction,
0 1 
[T ] =  
 − 1 0 

◼ A 180º rotation of an object about the

origin in the anti clockwise direction,
 − 1 0
[T ] =  
 0 − 1
 COND…
◼ A 270º rotation of an object about the
origin in the anti clockwise direction,
0 − 1
[T ] = 
1 0

◼ A 0º or either 360º rotation of an object

about the origin in the anti clockwise
direction,
1 0
[T ] =  
0 1
 Reflection
◼ reflect across x axis
◼ mirror  x  ? ?  x  ?
 y = ? ?  y  + ?
      

x x
 Reflection
◼ reflect across x axis
◼ mirror  x   1 0   x  0
 y  =  0    + 
− 1  y  0
  

x x
 ◼ Reflection about y=0; ie the x axis is obtained by

0 − 1
[T ] = 
1 0

◼In this case the new vertices D*E*F* for

◼the triangle are given by

8 1  8 − 1 
7 3 1 0  = 7 − 3
  0 − 1  
6 2   6 − 2 
 
 ◼ Reflection about the line y=x occurs for

0 1
[T ] = 
1 0

◼The transformed new vertices D+E+F+

◼are given by

8 1  1 8
7 3 0 1 = 3 7 
  1 0  
6 2   2
 6
 ◼ Similarly reflection about x=0, the y axis is
given by
− 1 0 
[T ] =  
 0 1
◼ Similarly a reflection about the line y=-x is
given by
0 −1 
[T ] = 
− 1 0

◼Each of these reflection matrices has a determinant that is

Identically -1.
◼ In general, if the determinant of the transformation matrix is

identically -1, then the Transformation produces a pure

reflection.
 2D Translation

(x’,y’)
 x  a   x + a   x' 
(x,y) ( a, b)  y  + b  =  y + b =  y '
       
 2D Translation

(x′,y′)
 x  a   x + a   x' 
(x,y) ( a, b)  y  + b  =  y + b =  y '
       

 x '   a 0  x   x' cos( ) − sin ( )  x 

 y ' = 0 b  y   y ' =  sin ( ) cos( )   y 
         

scaling matrix rotation matrix

 2D Translation

vector addition
(x′,y′)
 x  a   x + a   x' 
(x,y) ( a, b)  y  + b  =  y + b =  y '
       
matrix multiplication matrix multiplication
 x '   a 0  x   x' cos( ) − sin ( )  x 
 y ' = 0 b  y   y ' =  sin ( ) cos( )   y 
         

scaling matrix rotation matrix

REFLECTION AND ROTATION
◼ The result of 4 1  4 − 1 
  1 0   
reflection about x [ X *] = [ X ] [T1 ] = 5 2  =
  5 − 2 
 0 − 1
axis is 4 3  4 − 3

◼ Reflecting the 4 − 1  1 − 4 
0 − 1 
triangle A*B*C* [ X + ] = [ X *] [T2 ] = 5 − 2  = − 
− 1 0  
2 5
4 − 3   3 − 4
about the line y=-x
yields
 If two pure reflection transformations about
lines passing through the origin are applied
successively, the result is pure rotation about the
origin.
◼ Rotation about the origin by an angle
θ=270º yields the identical results.

4 1  1 − 4 
+   0 − 1  
[ X ] = [ X *] [T3 ] = 5 2  = −
0  
2 5
4 3  1
3 − 4
Combined 2D transformations

◼ Consider the
triangle ABC, the 0 1 
two transformation [T1 ] =  
 − 1 0
are +90 degree
rotation about the
origin: 0 − 1
◼ And a reflection [T2 ] =  
 − 1 0
through the line
y=-x
 ◼Intermediate
◼ result

Final result
◼
◼ The effect of the combined transformation [T3] =
[T1] [T2] on the triangle ABC is
[X*] =[X ][T1] [T2] = [X][T3] ----(A)

REVERSING the order of application of the

transformation yields
[X*] =[X ][T2] [T1] = [X][T4] ----(B)

(A)≠(B)
The results are different confirming that the order of
application of the transformation is important.
 Exercises 1
◼ Translate the shape below by (7, 2)
◼ y
◼ 6

◼ 5

◼ 4

◼ 3 ◼ (2, 3)
◼ 2◼ (1, 2) (3, 2)
◼

◼ 1
◼ (2, 1)
0
◼
◼ 1 ◼ 2 ◼ 3 ◼ 4 ◼ 5 ◼ 6 ◼ 7 ◼ 8 ◼ 9 ◼ 10 x
◼
 Exercises 2

◼ Scale the shape below by 3 in x and 2 in y

◼ y
◼ 6

◼ 5

◼ 4

◼ 3 ◼ (2, 3)
◼ 2◼ (1, 2) (3, 2)
◼

◼ 1
◼ (2, 1)
0
◼
◼ 1 ◼ 2 ◼ 3 ◼ 4 ◼ 5 ◼ 6 ◼ 7 ◼ 8 ◼ 9 ◼ 10 x
◼
 Exercises 3

◼ Rotate the shape below by 30° about the

y
origin
◼
◼ 6

◼ 5

◼ 4

◼ 3 ◼ (7, 3)
◼ 2 (6, 2)
◼ (8, 2)
◼

◼ 1
◼ (7, 1)
0
◼
◼ 1 ◼ 2 ◼ 3 ◼ 4 ◼ 5 ◼ 6 ◼ 7 ◼ 8 ◼ 9 ◼ 10 x
◼
 Exercise 4
◼ Write out the homogeneous matrices for the
previous three transformations

◼ Translation ◼ Scaling ◼ Rotation

 __ __ __   __ __ __   __ __ __ 
 __ __ __   __ __ __   __ __ __ 
     
 __ __ __   __ __ __   __ __ __ 
 Exercises 5

◼ Using matrix multiplication calculate the

rotation of the shape below by 45° about its
centre (5, 3)
◼y
◼5

◼ 4
◼ (5, 4)

◼ 3 (4, 3)
◼ (6, 3)
◼

◼ 2
◼ (5, 2)
◼ 1

◼ 0 ◼ 1 ◼ 2 ◼ 3 ◼ 4 ◼ 5 ◼ 6 ◼ 7 ◼ 8 ◼ 9 ◼ 10
 Scratch

◼ y
◼ 6

◼ 5

◼ 4

◼ 3

◼ 2

◼ 1

0
◼
◼ 1 ◼ 2 ◼ 3 ◼ 4 ◼ 5 ◼ 6 ◼ 7 ◼ 8 ◼ 9 ◼ 10 x
◼
 Equations
◼ Translation:
◼ xnew = xold + dx ynew = yold + dy

◼ Scaling:
◼ xnew = Sx × xold ynew = Sy × yold
◼ Rotation
◼ xnew = xold × cosθ – yold × sinθ
◼ ynew = xold × sinθ + yold × cosθ
 Linear Transformations
◼ linear transformations are combinations of
◼ scale
 x' a b   x  x' = ax + by
 y ' =  c d   y 
◼ rotate
◼ Reflect      y ' = cx + dy

◼ properties of linear transformations

◼ satisifes T(sx+ty) = s T(x) + t T(y)
◼ origin maps to origin
◼ lines map to lines
◼ parallel lines remain parallel
◼ ratios are preserved
◼ closed under composition
 Affine Transformations
◼ affine transforms are combinations of
 x'  a b c  x 
◼ linear transformations  y ' = d e f   y 
◼ translations   
 w  0 0 1   w
◼ properties of affine transformations

◼ origin does not necessarily map to origin

◼ lines map to lines
◼ parallel lines remain parallel
◼ ratios are preserved
◼ closed under composition
 Next Challenge
◼ matrix multiplication
◼ for everything except translation
◼ how to do everything with multiplication?
◼ then just do composition, no special cases
◼ homogeneous coordinates trick
◼ represent 2D coordinates (x,y) with 3-vector (x,y,1)
◼ With their aid, geometric transformations are
embedded in graphics hardware to increase speed
 Homogeneous Coordinates
◼ A point (x, y) can be re-written in homogeneous
coordinates as (xh, yh, h)
◼ The n-dimensional space is mapped into n+1
coordinates
◼ The homogeneous parameter h is a non-
zero value such that:
xh yh
x= y=
h h
◼ We can then write any point (x, y) as (hx, hy, h)
◼ We can conveniently choose h = 1 so that
(x, y) becomes (x, y, 1)
 Homogeneous Translation
◼ The translation of a point by (dx, dy) can be
written in matrix form as:
1 0 dx 
0 1 dy 

0 0 1 
◼ Representing the point as a homogeneous
column vector we perform the calculation as:
1 0 dx   x  1* x + 0 * y + dx *1  x + dx 
0 1 dy    y  = 0 * x + 1* y + dy *1 =  y + dy 
       
0 0 1  1   0 * x + 0 * y + 1*1   1 
 Remember Matrix Multiplication
◼ Recall how matrix multiplication takes place:

a b c   x  a * x + b * y + c * z 
d e    
f    y  = d * x + e * y + f * z 

 g h i   z   g * x + h * y + i * z 
 Homogenous Coordinates

◼ To make operations easier, 2-D points are

written as homogenous coordinate column
vectors
1 0 dx   x   x + dx 
0 1 dy    y  =  y + dy  : v' = T (dx, dy )v
◼Translation:
     
0 0 1  1   1 

sx 0 0  x   sx  x 
 0 sy 0   y  = sy  y  : v' = S ( sx, sy )v
Scaling:
◼
     
 0 0 1 1   1 
 Homogenous Coordinates (cont…)

◼ Rotation:

cos  − sin  0  x  cos   x − sin   y 

 sin  cos  0   y  = sin   x + cos   y  : v' = R( )v

 0 0 1 1   1 
 Inverse Transformations
◼ Transformations can easily be reversed using
inverse transformations

1 0 − dx 
−1   1 
T = 0 1 − dy  s 0 0
0 0 1   x 
1 
S −1 =  0 0
 cos sin  0  sy 
  0 0 1
R = − sin  cos 0
−1
 
 
 0 0 1
 Composite Transformation (1/2)
◼ Translation
◼ If two successive translation factor (t , t ) and x1 y1

(t , t ) are applied to a coordinate point P

x2 y2

◼ then
P' = T2(tX2,ty2)  {T1(tx1,ty1)  P} = {T2(tX2,ty2)  T1(tx1,ty1)}  P
1 0 tx2 1 0 tx1 1 0 tx1 + tx2
◼ ex) 0 1 ty2   0 1 ty1 = 0 1 ty1 + ty2 

0 0 1  0 0 1  0 0 1 

T(tx2,ty2)  T(tx1,ty1) = T(tx1 + tx2,ty1 + ty2)

i.e,
◼ Two successive Translation are additive
 Composite Transformation (2/2)
◼ Rotation
◼ two successive rotation
 , 
P = R( 2)  {R( 1)  P} = {R( 2)  R( 1)}  P
R( 1)  R( 2) = R( 1 +  2)
P' = R( 1 +  2)  P
◼ two successive rotations are also additive
◼ Scaling
sx2 0 0 sx1 0 0 sx1  sx2 0 0
 0 sy2 0 0 sy1 0 =  0 sy1  sy2 0
    

 0 0 1
0 0 1
   0 0 1

S(SX2,SY2)  S(SX1,SY1) = S(SX1  SX2,SY1  SY2)
 General pivot-point Rotation (1/2)
◼ Rotation about arbitrary point p (x , y )
r r

◼ step1) Translate P to origin

◼ step2) Rotation about origin
◼ step3) Retranslation to position P.
 General pivot-point Rotation (2/2)
◼ Composite transformation matrix

  xr  cos  − sin      − xr 
  yr   sin  cos      − yr 
   
            
cos  − sin  xr ( − cos  ) + yr sin  
=  sin  cos  yr ( − cos  ) − xr sin  
    

T(x r , yr )  R( )  T(-xr ,-yr ) = R(xr , yr , )

 General Fixed-Point Scaling
◼ Scaling about arbitrary point p(x , y ) r r

◼ step 1) translate p to origin

◼ step 2) scaling about origin
◼ step 3) Retranslate to position P
  xr  sx      − xr 
  yr    sy     − yr 

            
sx  xr ( − sx )
=   sy yr ( − sy )  T(xf , yf )  S(sx , sy )  T(-xf ,-yf ) = S(xf , yf , sx , sy )
    
 Homogeneous Coordinates Summary
◼ may seem unintuitive, but they make graphics
operations much easier
◼ allow all linear transformations to be expressed
through matrix multiplication
◼ use 4x4 matrices for 3D transformations
◼ They are used in projective geometry,perspective
views, removes anamolous situations in cartesian
geometry, points of infinity and non intersection of
parallel lines
◼ Their application is used for mechanism analysis
and design and robotics
3D transformation
 3D Transformation
Matrix for translation
◼
 A point has coordinates in the x, y, z direction i.e., (5,
6, 7). The translation is done in the x-direction by 3
coordinate and y direction. Three coordinates and in
the z- direction by 2 coordinates. Shift the object. Find
coordinates of the new position.
Matrix for scaling
◼ Given a 3D object with coordinate points A(0, 3, 3),
B(3, 3, 6), C(3, 0, 1), D(0, 0, 0). Apply the scaling
parameter 2 towards X axis, 3 towards Y axis and 3
towards Z axis and obtain the new coordinates of
the object.
Matrix for translation
◼ Given a 3D object with coordinate points A(0, 3, 1),
B(3, 3, 2), C(3, 0, 0), D(0, 0, 0). Apply the
translation with the distance 1 towards X axis, 1
towards Y axis and 2 towards Z axis and obtain the
new coordinates of the object.
Matrix for about X-axis rotation
Matrix for about Y-axis rotation
Matrix for about Z-axis rotation
◼ Given a homogeneous point (1, 2, 3). Apply rotation
90 degree towards X, Y and Z axis and find out the
new coordinate points.
A homogenous co-ordinate point p(3,2,1) is
translated in x,y and z direction by -2,-2, and -2 unit
respectively followed by successive rotation 60
degree about x-axis. Find the final position of
homogenous co-ordinate.
Windowing:
◼ A scene/picture is made up of a collection
of objects specified in world coordinates

World Coordinates
Windowing:
◼ When we display a scene/picture only
those objects within a particular window
are displayed
◼Window
wymax
◼

wymin
◼

◼ wxmin ◼wxmax

World Coordinates
Windowing:
◼ Because drawing things to a display takes
time we clip everything outside the window

◼Window
wymax
◼

wymin
◼

◼wxmin ◼wxmax

World Coordinates
Clipping:
◼ When we have to display a large portion of the
picture, then not only scaling & translation is
necessary, the visible part of picture is also
identified. This process is not easy. Certain parts of
the image are inside, while others are partially
inside. The lines or elements which are partially
visible will be omitted.
◼ For deciding the visible and invisible portion, a
particular process called clipping is used. Clipping
determines each element into the visible and
invisible portion. Visible portion is selected. An
invisible portion is discarded.
Types of clipped lines:
◼ Visible: A line or lines entirely inside the
window is considered visible
◼ Invisible: A line entirely outside the window
is considered invisible
◼ Clipped: A line partially inside the window
and partially outside is clipped. For clipping
point of intersection of a line with the window
is determined.
Types of clipped lines:
Continued..
◼ Clipping can be applied through hardware as
well as software.
◼ In some computers, hardware devices
automatically do work of clipping. In a system
where hardware clipping is not available
software clipping applied.
Application of clipping:
◼ It will extract part we desire.
◼ For identifying the visible and invisible area in
the 3D object.
◼ For creating objects using solid modeling.
◼ For drawing operations.
◼ Operations related to the pointing of an
object.
◼ For deleting, copying, moving part of an
object.
Types of clipping:
◼ Point Clipping
◼ Line Clipping
◼ Area Clipping (Polygon)
◼ Curve Clipping
◼ Text Clipping
◼ Exterior Clipping
Point clipping:
Point Clipping is used to determining, whether
the point is inside the window or not. For this
following conditions are checked.
◼ x ≤ xmax

◼ x ≥ xmin

◼ y ≤ ymax

◼ y ≥ ymin

The (x, y) is coordinate of the point. If anyone from the above

inequalities is false, then the point will fall outside the window
and will not be considered to be visible.
Line clipping:
The line clipping algorithms are:
◼ Cohen Sutherland Line Clipping Algorithm
◼ Midpoint Subdivision Line Clipping Algorithm
◼ Liang-Barsky Line Clipping Algorithm
Cohen Sutherland Line Clipping Algorithm
Visible: If a line lies within the window, i.e., both
endpoints of the line lies within the window. A line is
visible and will be displayed as it is.

Not Visible: If a line lies outside the window it will be

invisible and rejected. Such lines will not display. If
any one of the following inequalities is satisfied, then
the line is considered invisible. Let A (x1,y2) and B
(x2,y2) are endpoints of line. ymin,ymax are also
coordinates of the window.
x1>xmax,x2>xmax ;y1>ymax,y2>ymax ;
x1<xmin , x2<xmin; y1<ymin, y2<ymin
◼ Clipping Case: If the line is neither visible case nor
invisible case. It is considered to be clipped case. First of all,
the category of a line is found based on nine regions given
below. All nine regions are assigned codes. Each code is of
4 bits. If both endpoints of the line have end bits zero, then
the line is considered to be visible.
Line AB is the visible case
Line OP is an invisible case
Line PQ is an invisible line
Line IJ are clipping candidates
Line MN are clipping candidate
Line CD are clipping candidate
Algorithm of Cohen Sutherland line clipping
Step1:Calculate positions of both endpoints of the line
Step2:Perform OR operation on both of these end-points
Step3:If the OR operation gives 0000
Then
line is considered to be visible
else
Perform AND operation on both endpoints
If And ≠ 0000
then the line is invisible
else
And=0000
Line is considered the clipped case.
Step4:If a line is clipped case, find an intersection with boundaries of the
window
m=(y2-y1 )/(x2-x1)
(a) If bit 1 is "1" line intersects with left boundary of rectangle window
y3=y1+m(x-x1)
where X = Xwmin
where Xwmin is the minimum value of X co-ordinate of window
(b) If bit 2 is "1" line intersect with right boundary
y3=y1+m(x-x1)
where X = Xwmax
where X more is maximum value of X co-ordinate of the window
(c) If bit 3 is "1" line intersects with bottom boundary
x3=x1+(y-y1)/m
where y = ywmin
ywmin is the minimum value of Y co-ordinate of the window
(d) If bit 4 is "1" line intersects with the top boundary
x3=x1+(y-y1)/m
where y = ywmax
ywmax is the maximum value of Y co-ordinate of the window
Let R be the rectangular window whose lower left-hand corner
is at L (-3, 1) and upper right-hand corner is at R (2, 6). Find
the region codes for the endpoints in fig: