BCT 2405 Computer Graphical systems

Karanja Mwangi
Lesson objective

 At the end of this class you will

 Perform Basic 2-Dimensional transformation namely
translation, rotation, reflection, scaling and shear
 Describe various components of coordinate systems used in
computer graphics pipelining
 Appreciate the role of homogenous coordinates
 Implement Raster Methods for Transformations and OpenGL
 Understand the transformations between 2D Coordinate
Systems and OpenGL
Geometric transformations

 Also known as Modeling Transformations

 Geometric transformations: Changing an object’s
position (translation), orientation (rotation) or size
(scaling)…. reflection and shearing operations
 Modeling transformations: Constructing a scene or
hierarchical description of a complex object through
a combination of various geometric transformations
2D - Transformations

 Why are they called 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
Basics about Vertices and matrices -1

 We have always represented vertices as (x,y)

But …..  x 3.3


( x, y )    (3.3,7.5)   
 y 7.5
 Matrix is an array of numbers
 Various operations on Matrix
 Scalar multiplication
Basics about Vertices and matrices -2

 To multiply to Matrices (they need to be compatible)-

number of columns in the first matrix must be equal to the
number of rows in the second matrix.
 The operation is a Dot Product operation

• (1, 2, 3) • (7, 9, 11) = 1×7 + 2×9 + 3×11

= 58

 For more exercises on matrices

…https://www.khanacademy.org/math/precalculus/x9e81a4f98389efdf:matrices/x9e81a4f98389efdf:multiplying-matrices-
by-matrices/a/multiplying-matrices
Basics about Vertices and matrices -3

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

1 7  3 3
A  ,B   
 2 4 5 2
AB  ?
Practice (You got this?)

38 17
AB    ,
26 14
2D 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)
2D Translation

 2D Translation
 To move a line segment, apply the transformation
equation to each of the two line endpoints and redraw
the line between new endpoints
 To move a polygon, apply
x' the transformation equation
to coordinates of each vertex and regenerate the
polygon using the new set of vertex coordinates

The process is as follows

 Initial coordinates of the object O = (x, y)
 New coordinates of the object O after translation = (x,, Y,)
 Translation vector or Shift vector = (tx, ty)
2D Translation
P  (3,4)
 Given: P  ( x, y )
T  (7,8)
T  (t x , t y )
 We want:
x '  3  7
x'  x  t x
y '  4  8
 Matrix form:
y'  y  t y

 x '    3  7 
 x '   x  t x   y '   4  8 
 y '   y   t       
     y x'  3
P'  P  T y'  4
Translation Exercises

 Given a square with coordinate points A(0, 3), B(3, 3),

C(3, 0), D(0, 0). Apply the translation with distance 2
towards X axis and 2 towards Y axis. Obtain the new
coordinates of the square.
 Can you implement the same in OpenGL (try out)
2D Rotation-1
 2D Rotation
 Rotation axis

 Rotation angle

 rotation point or pivot point (xr,yr)

yr θ

xr

14
2D Translation-2
 2D Rotation
 If θ is positive  counterclockwise rotation
 If θ is negative  clockwise rotation
 Remember:
• cos(a + b) = cos a cos b - sin a sin b
• cos(a - b) = cos a sin b + sin a cos b

15
2D Translation-2
P  ( x, y )
R  ( )
x'  r cos  cos   r sin  sin 
x  r cos 
y '  r cos  sin   r sin  cos 
y  r sin 
x'  x cos   y sin 
x'  r cos(  )
y '  x sin   y cos 
y '  r cos(  )
 x' cos   sin    x 
(x’,y’)  y '   sin  cos    y 
  
r θ P'  R  P
r (x,y)
Φ
16
2D Translation-3
 Rotation of a point about any specified position (xr,yr)
x’=xr+(x - xr) cos θ – (y - yr) sin θ
y’=yr+(x - xr) sin θ + (y - yr) cos θ

 Rotations also move objects without deformation

 A line is rotated by applying the rotation formula to each of
the endpoints and redrawing the line between the new end
points
 A polygon is rotated by applying the rotation formula to
each of the vertices and redrawing the polygon using new
vertex coordinates

17
2D Translation-4

 2D Rotation
(x’,y’)
 P’=R·P
θ
cos   sin  r
r (x,y)
R
 sin  cos   Φ

18
2D rotation Exercises-1

 Given line segment with starting point as (0, 0) and

ending point as (4, 4). Apply 30 degree rotation
anticlockwise direction on the line segment and find out
the new coordinates of the line.

Always remember that

cos   sin 
R 
 sin  cos  
2D rotation Exercises-2

 Xnew  Ynew
• = Xold x cosθ – Yold x sinθ • = Xold x sinθ + Yold x cosθ
• = 4 x cos30º – 4 x sin30º • = 4 x sin30º + 4 x cos30º
• = 4 x (√3 / 2) – 4 x (1 / • = 4 x (1 / 2) + 4 x (√3 /
2) 2)
• = 2√3 – 2 • = 2 + 2√3
• = 2(√3 – 1) • = 2(1 + √3)
• = 2(1.73 – 1) • = 2(1 + 1.73)
• = 1.46 • = 5.46
 Thus, New ending
coordinates of the line
after rotation = (1.46,
5.46).
2D rotation Exercises-1
2D rotation Exercises-2

 Given a triangle with corner coordinates (0, 0), (1, 0)

and (1, 1). Rotate the triangle by 90 degree
anticlockwise direction and find out the new
coordinates.

 Always remember that

 We rotate a polygon by rotating each vertex of it with the
same rotation angle.

cos   sin 
R
 sin  cos  
2D rotation Exercises-2

For Coordinates A(0, 0) For Coordinates C(1, 1)

Xnew Xnew
= Xold x cosθ – Yold x sinθ = Xold x cosθ – Yold x sinθ
= 0 x cos90º – 0 x sin90º = 1 x cos90º – 1 x sin90º
=0 =0–1
= -1
Ynew
= Xold x sinθ + Yold x cosθ Ynew
= 0 x sin90º + 0 x cos90º = Xold x sinθ + Yold x cosθ
=0 = 1 x sin90º + 1 x cos90º
=1+0
Thus, New coordinates of corner A after =1
rotation = (0, 0).

For Coordinates B(1, 0) Thus, New coordinates of corner C after

rotation = (-1, 1).
Xnew
= Xold x cosθ – Yold x sinθ
= 1 x cos90º – 0 x sin90º Thus, New coordinates
=0
of the triangle after
Ynew
= Xold x sinθ + Yold x cosθ
rotation = A (0, 0),
= 1 x sin90º + 0 x cos90º B(0, 1), C(-1, 1).
=1+0=1
Thus, New coordinates of corner B after
rotation = (0, 1)
2D Scaling -1
 Scale - Alters the size of an object. If scaling factor > 1,
then the object size is increased. If scaling factor < 1,
then the object size is reduced.
 When sx and sy are assigned the same value, a uniform
scaling is produced, which maintains relative object
proportions.
 Unequal values for sx and sy result in a differential
scaling that is often used in design applications, where
pictures are constructed from a few basic shapes that
can be adjusted by scaling and
 In some systems, negative values can also be specified
for the scaling parameters. This not only resizes an
object, it reflects it about one or more of the coordinate
axes. (see more on page 194 of the Hearn, Baker and
Carithers book called Computer Graphics with 24
 2D Scaling -2
P  ( x, y ) P  (1,2)
• Given:
S  (sx , s y ) S  (3,3)

x'  s x x x '  3 *1
• We want: y'  s y y y '  3 * 2.
 x '   3 0  1 
 y '  0 3 2
 x'  s x 0  x     
 y '   0 s y   y  x'  3
• Matrix form:   
P'  S  P y'  6
2D Scaling -3
• 2D Scaling
• We can control the location of the scaled object by
choosing a position called the fixed point (xf,yf)
• x’ – xf = (x – xf) sx y’ – yf = (y – yf) sy
• x’=x · sx + xf (1 – sx)
• y’=y · sy + yf (1 – sy)
• Polygons are scaled by applying the above formula to
each vertex, then regenerating the polygon using the
transformed vertices

26
 Combining Transformations

 Many graphics applications involve sequences of geometric

transformations
• Animations
• Design and picture construction applications
 We will now consider matrix representations of these
operations
 Sequences of transformations can be efficiently processed
using matrices
 To produce a sequence of operations, such as scaling
followed by rotation then translation, we could calculate
the transformed coordinates one step at a time.
 A more efficient approach is to combine transformations,
without calculating intermediate coordinate values
 Combining Transformations-2

Translation
T(tx, ty)
Translation distances
Scale
S(sx,sy)
Scale factors
Rotation
R()
Rotation angle
 Combining Transformations-3

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

Homogeneous Coordinates
A point(x, y) can be re-written in homogeneous coordinates as
(xh, yh, h)
 The homogeneous parameter h is a non- zero value such that:

yh
x
xh 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)

Why Homogeneous Coordinates?

 Mathematicians commonly use homogeneous coordinates

as they allow scaling factors to be removed from equations
 We will see in a moment that all of the transformations we
discussed previously can be represented as 3*3 matrices
 Using homogeneous coordinates allows us use matrix
multiplication to calculate transformations – extremely
efficient!
Homogenous Coordinates
 Combine the geometric transformation into a single matrix with
3by3 matrices
 Expand each 2D coordinate to 3D coordinate with homogenous
parameter
 Two-Dimensional translation matrix
 x'  1 0 t x   x 
     
y '
    0 1 t y   y
 1  0 0 1   1

 Two-Dimensional rotation matrix

 x' cos  cos 0  x 
     
 y'   sin cos 0   y 
 1   0 0 1  1

 Two-Dimensional scaling matrix

 x '  s x 0 0  x 
     
 y '   0 s y 0   y 
 1   0 0 1  1
Inverse transformations
 Inverse translation matrix

1 0  t x 
1
T 1
 
 0 1  t y 
0 0 1 
T *T  I
 Two-Dimensional Rotation matrix

 cos sin 0
1

R 1   sin cos 0
 R *R  I
 0 0 1
 Two-Dimensional Scaling matrix
 1 
s 0 0
 x  1
S 1 0
1
0 S *S  I
 sx 
0 0 1
 
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 x 0 0  x 
 x'  s x 0   x    
S s x , s y            y '   0 sy 0  y 
 y '  0 s y   y   1   0 1  1 
   0
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 1  1 
   0
P  R   P  P  R   P
Matrix Operations on OpenGL

 glMatrixMode(.);
 Projection Mode: Determines how the scene is projected onto
the screen
 Modelview Mode: Used for storing and combining geometric
transformations
 Texture Mode: Used for mapping texture patterns to surfaces
 Color Mode: Used to convert from one color mode to another
OpenGL Matrix Operations

 Modelview matrix, used to store and combine geometric

transformations
 glMatrixMode(GL_MODELVIEW);
 A call to a transformation routine generates a matrix that
is multiplied by the current matrix
 To assign the identity matrix to the current matrix
 glLoadIdentity();

37
OpenGL Matrix Operations (cont.)

 Alternatively:
 glLoadMatrix* (elements16);
 To assign other values to the elements of the current matrix
 In column-major order:
• First four elements in first column
• Second four elements in second column
• Third four elements in third column
• Fourth four elements in fourth column

38
OpenGL Matrix Operations (cont.)

 Concatenating a specified matrix with current matrix:

 glMultMatrix* (otherElements16);
 Current matrix is postmultiplied (right-to-left) by the
specified matrix

 By now you know that

 Matrix notation mjk means:
 In OpenGL: j  column, k  row
 In mathematics: j  row, k  column

39
OpenGL Transformation Functions
Summary

 You have learnt how to

 Perform Basic 2-Dimensional transformation namely
translation, rotation, reflection, scaling and shear (read
about the ones in red)
 Describe various components of coordinate systems used in
computer graphics pipelining
 Appreciate the role of homogenous coordinates
 Implement Raster Methods for Transformations and OpenGL
 Understand the transformations between 2D Coordinate
Systems and OpenGL

 Read more from Page 189 -Two-Dimensional Geometric

Transformations –Hearn, Baker and Carithers book called
Computer Graphics with Open GL)