Chapter Five

Geometrical Transformation
 2D Transformation
2D Matrix Transformation

 First of all let us review some basics of matrices.

 2x2 matrices can be multiplied according to the following equation.

 a b  e f   ae  bg af  bh 
    ………………………….… (1)
 c d  g h   ce  dg cf  dh 

 For example,
 3  1 1 2   3  1  1  2 3  2  1  0   1 6 
        
 2 1  2 0   2  1  1  2 2  2  1  0   4 4 
 2D Transformation

 In general, for matrices A and B to be multiplied, the number of columns

in A must be equal to the number of rows in B.
 Matrix multiplication is not commutative.
 In other words, for two matrices A and B, .
 We can see this from the following example.

 1 2  3  1  5  1 
     
 2 0  2 1   6  2 

 3  1 1 2   1 6 
     
 2 1  2 0   4 4 
 2D Transformation

 However, matrix multiplication is associative.

 This means that if we have three matrices A, B and C, then
• .
• We can see this from the following example.

 3  1 1 2  1 0   1 6  1 0  13 6 

          
 2 1  2 0  2 1   4 4  2 1  12 4 

 3  1  1 2  1 0   3  1 5 2  13 6 
           
 2 1   2 0  2 1   2 1  2 0  12 4 
 2D Translation
 Translation is the ability to reposition an image or object along a straight
line path from one location to another.
 The translation transformation shifts all points by the same amount.
 Therefore, in 2-D, we must define two translation parameters:
• the -translation
• the -translation
 To translate a point to we add on a vector :

 px  ………………………………………………….……….. (2)
P   
 py 
 px  ………………………………………………….……….. (3)
P   
 py 
 tx 
T    ………………………………………………….……….. (4)
ty 
 Cont’d

………………………………………………….……….. (5)

 Therefore, from Eq. (5) we can see that the relationship between points
before and after the translation is:

px  px  t x ………………………………………………….……….. (6)

py  p y  t y ………………………………………………….……….. (7)

Translation by
 2D Rotation

 Rotation is the ability to reposition an image along a circular path in .

 The rotation transformation rotates all points about a centre of rotation.

 Normally this centre of rotation is assumed to be at the origin ,

 although as we will see later on it is possible to rotate about any point.

 The rotation may be either clockwise or anticlockwise.

• Positive value of rotation angle provide an anticlockwise rotation

• negative value produce a clockwise rotation about the given point

 The rotation transformation has a single parameter: the angle of rotation, .

 Cont’d
 To rotate a point P anti-clockwise by , we apply the rotation matrix :

 cos  sin   ………………………………………………….……….. (8)

R   
 sin  cos 
 px   cos  sin   px  ………………………………………………….……….. (9)
     
 p 
 y   sin  cos  p y 

 Therefore, from ) we can see that the relationship between

points before and after the rotation is:
px  p x cos   p y sin  ………………………………………………….……….. (10)

p y  p y cos   px sin  ………………………………………………….……….. (11)

 Cont’d
 To rotate a point P anti-clockwise by , we apply the rotation matrix :
 cos  sin   ………………………………………………….……….. (8)
R   
 sin  cos 
 px   cos  sin   px 
      ………………………………………………….……….. (9)
 p 
 y   sin  cos  p y 

 Therefore, from ) we can see that the relationship between

points before and after the rotation is:
px  p x cos   p y sin  ………………………………………………….……….. (10)
p y  p y cos   px sin  ………………………………………………….……….. (11)

Rotation about the Origin

 2D Scaling

 Scaling is the ability to change the size of an image.

 The operation is necessary when we have to either ZOOM in an object so
that we can get a better view of the object or ZOOM out so that we can
see more object.
 The scaling transformation multiplies each coordinate of each point by a
scale factor.
 The scale factor can be different for each coordinate (e.g. for the and
coordinates).
 Cont’d
 To scale a point P by scale factors Sx and Sy we apply the scaling matrix S:

 Sx 0
S    ………………………………………………….……….. (12)
0 S y 

 px   S x 0  px 
    ………………………………………………….……….. (13)
 p   0 S y  p y 
 y 
 Cont’d

 Therefore, from we can see that the relationship between points

before and after the scaling is:

px  S x p x ………………………………………………….……….. (14)

py  S y p y ………………………………………………….……….. (15)

A 2-D Scaling by
 Homogeneous Coordinates

 Homogeneous coordinates are a system of coordinates used in projective

geometry.
 Points at infinity can be represented using finite coordinates.
 A single matrix can represent affine transformations and projective
transformations.
 Homogeneous coordinates allow us to do combinational transformation.
 With homogeneous coordinates we add an extra coordinate, the homogenous
parameter, to each point in Cartesian coordinates
 So 2-D points are stored as three values:
• the -coordinate,
• the -coordinate and
• the parameter.
 Cont’d

 The relationship between homogeneous points and their corresponding

Cartesian points is:

 Homogeneous point = , Cartesian point =

 Normally the homogenous parameter is given the value 1, , in which case

homogenous coordinates are the same as Cartesian coordinates but with an extra
value which is always 1.
 2D Translation homogeneous coordinates

 we can express a translation transformation using a single matrix multiplication:

 px 
  ………………………………………………….……….. (16)
P   py 
1
 
 px 
 
P   py  ………………………………………………….……….. (17)
1
 
1 0 tx 
 
T  0 1 ty  ………………………………………………….……….. (18)
0 0 1 
 
 px   1 0 t x  px 
    
p 
 y   0 1 t y  p y  ………………………………………………….……….. (19)
 1   0 0 1  1 
    
 Cont’d

 Therefore, px  px  t x and py  p y  t y

 exactly the same as before, but we used a matrix multiplication instead of an

addition.
 2D Rotation homogeneous coordinates
 with the exception that the rotation matrix has an extra row and extra column.

 cos  sin  0
 
R   sin  cos 0 ………………………………………………….……….. (20)
 0 0 1 


 px   cos  sin  0  px 

     ………………………………………………….……….. (21)
 py    sin  cos 0  p y 
1  0 0 1  1 
  

 Therefore, px  p x cos   p y sin  p y  p y cos   px sin 

• which is the same outcome as before.

 2D Scaling homogeneous coordinates

 Finally, we can also express scaling using homogeneous coordinates, as shown by

the following equations

 Sx 0 0 ………………………………………………….……….. (22)
 
S  0 Sy 0
0 0 1 


 px   S x 0 0  px 
    
 py    0 Sy 0  p y  ………………………………………………….……….. (23)
1 0 0 1  1 
  

 Therefore, px  S x p x py  S y p y exactly the same as before.

 Matrix Composition

 The use of homogenous coordinates allows us to compose a sequence of

transformations into a single matrix.
 This can be very useful in the graphics viewing pipeline,
 but also allows us to define different types of transformation from those we have
already seen.
 Using matrix composition, we can achieve this using the following sequence of
transformations:
• Translate from pivot point to origin
• Rotate about origin
• Translate from origin back to pivot point
 Cont’d

 An example of this sequence of transformations is shown in Figure bellow.

 Here we perform a rotation about the pivot point (2,2),
• Translating by (-2,-2) to the origin,
• Rotating about the origin and
• Then translating by (2,2) back to the pivot point.
 Let us denote our transformations as follows:
a. T1 is a matrix translation by (-2,-2)
b. R is a matrix rotation by about the origin
c. T2 is a matrix translation by (2,2)
 Therefore, using homogenous coordinates we can compose all three matrices into
one composite transformation, C:

2 1…………………………………………………………………………………..…………..(24)
 Cont’d

 The composite matrix C can now be computed from the three constituent
matrices T2, R and T1,
• and represents a rotation about the pivot point (2,2) by θo.
 Note from Eq. (24) that 𝟏 is applied first, followed by and then 2.

 For instance, if we were to apply the three transformations to a point P the result
would be

2 1
 3D Matrix Transformation

 The concept of homogenous coordinates is easily extended into 3-D:

 we just introduce a fourth coordinate in addition to the
• and -coordinates.
 In this section we review the forms of 3-D translation, rotation and
scaling matrices using homogeneous coordinates.
 3D Translation homogeneous coordinates

 The 3-D homogeneous coordinate’s translation matrix is similar in form to the 2-D
matrix, and is given by:

1 0 0 t 
 
0 1 0 ty  ………………………………………….. (25)
T  
0 0 1 tz 
 
0 0 0 1 


 We can see that 3-D translations are defined by three translation

parameters: tx, ty and tz.
 Cont’d
 We apply this transformation as follows:

 px   1 0 0 t  px 
    
 py   0 1 0 t y  p y 
 p    0 
0 1 t z pz  ………………………………………….. (26)
 z   
 1  0 0 0 1  1 
  

 Therefore, px  p x  t x py  p y  t y and pz  pz  t z

 3D Scaling homogeneous coordinates

 Similarly, 3-D scaling are defined by three scaling parameters, Sx, Sy and Sz.
 The matrix is:

 Sx 0 0 0
 
0 Sy 0 0
S 
0 0 Sz 0
 
0 0 0 1 


We apply this transformation as follows:

 px   S x 0 0 0  px 
    
 py   0 Sy 0 0  p y 
 p    0 0 Sz 0  pz 
 z   
1 0 0 0 1  1 
  

 Therefore, p x  S x p x p y  S y p y and pz  S z pz

 3D Rotation homogeneous coordinates

 For rotations in 3-D we have three possible axes of rotation:

• the , and axes.
 Therefore the form of the rotation matrix depends on which type of rotation we
want to perform.
 For a rotation about the the matrix is:

1 0 0 0
 
 0 cos  sin  0
Rx  
0 sin  cos 0
 
0 0 0 1 

 For a rotation about the the matrix is:

 cos  0 sin  0
 
 0 1 0 0
Ry  
 sin  0 cos  0
 
 0 0 0 1 

 3D Rotation homogeneous coordinates

 For a rotation about the the matrix is:

 cos  sin  0 0
 
 sin  cos 0 0
Rz  
0 0 1 0
 
 0 0 0 1 

 OpenGL Rotation Function

glRotatef(angle, 0.0, 0.0, 1.0);

• angle : This is the angle of rotation, specified in degrees.

• 0.0 : This is the x-component of the rotation axis. In this case, it's set to zero, which
means there is no rotation around the x-axis.
• 0.0 : This is the Y-component of the rotation axis. In this case, it's set to zero, which
means there is no rotation around the Y-axis.
• 1.0 : This is the z-component of the rotation axis. The value of 1.0 means that the
rotation will occur around the z-axis.
 OpenGL Translation Function

glTranslatef( , , 0.0f);

• : It specifies how much the subsequent geometry will be moved horizontally.

• : It specifies how much the subsequent geometry will be moved vertically.
• 0.0f : This is the translation along the z-axis In this case, it's set to 0.0f because we
are dealing with 2D translation.
 OpenGL Scaling Function
GLfloat = 3.0f;
GLfloat = 3.0f;
glScalef( , , 1.0f); // you can omit -Scaling factor in 2D

• : It specifies how much the subsequent geometry will be stretched or compressed

horizontally.
• If is greater than 1, the geometry will be stretched; if it's less than 1, the geometry
will be compressed.
• : It specifies how much the subsequent geometry will be stretched or compressed
vertically.
• If is greater than 1, the geometry will be stretched; if it's less than 1, the geometry
will be compressed.
 Chapter Six

State Management and Drawing

Geometric objects
 Basic State Management

 OpenGL maintains many states and state variables.

 An object may be rendered with lighting, texturing, hidden surface
removal, fog, and other states affecting its appearance.
 By default, most of these states are initially inactive.
 These states may be costly to activate; for example, turning on texture
mapping will almost certainly slow down the speed of rendering a
primitive.
 However, the quality of the image will improve and look more realistic, due
to the enhanced graphics capabilities.
 Cont’d

 To turn on and off many of these states, use these two simple commands:
• void glEnable(GLenum cap);
• void glDisable(GLenum cap);
 glEnable() turns on a capability, and glDisable() turns it off.
 The glEnable function is used to enable specific OpenGL capabilities.
 It takes a single argument ‘cap’ which is an enumeration (GLenum)
representing the capability to be enabled.
 Examples

 // Enable depth testing for accurate rendering of 3D scenes

• glEnable(GL_DEPTH_TEST);
 // Enable blending for transparency
• glEnable(GL_BLEND);
 // Enable face culling for efficient rendering of closed surfaces
• glEnable(GL_CULL_FACE);
• Face culling is a technique used to improve rendering performance by omitting
the drawing of polygons that are facing away from the viewer.
 // Enable Fog
• glEnable(GL_FOG);
• By enabling fog, you simulate effects like foggy weather or mist, and distant
objects appear less distinct.
 Displaying Point, Lines, and Polygons

 By default, a point is drawn as a single pixel on the screen,

 A line is drawn solid and one pixel wide, and
 polygons are drawn solidly filled in.
 Points Details

 To control the size of a rendered point, use glPointSize() and supply the desired size
in pixels as the argument.
 void glPointSize(GLfloat size);
• Sets the width in pixels for rendered points; size must be greater than 0.0 and
by default is 1.0.
• if the width is 1.0, the square is 1 pixel by 1 pixel;
• if the width is 2.0, the square is 2 pixels by 2 pixels, and so on.
 Lines Details

 With OpenGL, you can specify lines with different widths and lines that are stippled
in various ways :
• dotted,
• dashed,
• drawn with alternating dots and dashes, and so on.

Wide Lines
 void glLineWidth(GLfloat width);
 Sets the width in pixels for rendered lines; width must be greater than 0.0 and by
default is 1.0.
 Cont’d
Stippled Lines

 To make stippled (dotted or dashed) lines,

 You use the command glLineStipple() to define the stipple pattern, and then you
enable line stippling with glEnable().

glEnable(GL_LINE_STIPPLE);
glLineStipple(1, 0x3F07);
Cont’d

Figure 6.1 Stippled Lines

 Polygons Details

 Polygons are typically drawn by filling in all the pixels enclosed within the boundary,
 but you can also draw them as outlined polygons or simply as points at the vertices.
 A filled polygon might be solidly filled or stippled with a certain pattern.

Polygons as Points, Outlines, or Solids

 A polygon has two sides:

• Front and
• Back
 and might be rendered differently depending on which side is
facing the viewer.
 Cont’d

 By default, both front and back faces are drawn in the same way.
 To change this, or to draw only outlines or vertices, use glPolygonMode().

glPolygonMode(GL_FRONT, GL_FILL);
glPolygonMode(GL_BACK, GL_LINE);

Stippling Polygons
glEnable(GL_POLYGON_STIPPLE);
 Normal Vectors

 A normal vector (or normal, for short) is a vector that points in a direction that’s
perpendicular to a surface.
 An object’s normal vectors define the orientation of its surface in space in
particular, its orientation relative to light sources.
 Cont’d

 normal vectors are essential for simulating realistic lighting and shading effects in
computer graphics. glVertex3f(0.0, 0.0, 3.0); // length
glVertex3f(0.0, 0.0, 0.0);

glVertex3f(0.0, 0.0, 0.0);

glVertex3f(2.0, 0.0, 0.0); // length
 Vector Arrays

 You may have noticed that OpenGL requires many function calls to render
geometric primitives.
 Drawing a 3−sided polygon requires 5 function calls:
• one call to glBegin(), one call for each of the vertices, and a final call to glEnd().
• Generally, to draw sided polygon, call.
 In the others code, additional information (polygon boundary edge flags or surface
normal) added function calls for each vertex.
 This can quickly double or triple the number of function calls required for one
geometric object.
 For some systems, function calls have a great deal of overhead and can hinder
performance.
 Cont’d

 OpenGL has vertex array routines that allow you to specify a lot of vertex−related

data with just a few arrays and to access that data with equally few function calls.

 Using vertex array routines, all vertices in a −sided polygon could be put into

one array and called with one function.

 Arranging data in vertex arrays may increase the performance of your application.

 Also, using vertex arrays may allow non−redundant processing of shared

vertices(Vertex sharing is not supported on all implementations of OpenGL).

 Cont’d

 There are three steps to using vertex arrays to render geometry.

i. Activate (enable) up to six arrays, each to store a different type of data:

vertex coordinates, RGBA colors, color indices, surface normals, texture

coordinates, or polygon edge flags.

ii. Put data into the array or arrays. The arrays are accessed by the addresses

of (that is, pointers to) their memory locations.

iii. Draw geometry with the data. OpenGL obtains the data from all activated

arrays by dereferencing the pointers.

 Cont’d

 Step 1: Enabling Arrays

• The first step is to call glEnableClientState() with an enumerated
parameter, which activates the chosen array.

glEnableClientState(GL_COLOR_ARRAY);
glEnableClientState(GL_VERTEX_ARRAY);

 Step 2: Specifying Data for the Arrays

Specify Vertex Array and Color Array

static GLint vertices[] = {25, 25, static GLfloat colors[] = {1.0, 0.2, 0.2,

100, 325, 0.2, 0.2, 1.0,

175, 25}; 0.8, 1.0, 0.2};

 Cont’d

 Step 3: Setting up the pointer

glColorPointer(3, GL_FLOAT, 0, colors);

Color (RGB) DataType starting Offset(index) colorArrays

glVertexPointer(2, GL_INT, 0, vertices);

2D DataType starting Offset(index) Vertexarrays

 Cont’d

 Step 4: Draw then polygon

glDrawArrays(GL_POLYGON, 0, 3);

PrimitiveType starting Offset(index) Ending Offset(index)

 Step 5: Disable client states

glDisableClientState(GL_COLOR_ARRAY);
glDisableClientState(GL_VERTEX_ARRAY);

 Step 6: Swap Buffers

glutSwapBuffers(); // Swap the front and back buffers
o // Perform rendering operations in the back buffer