Computer Graphics

CHAPTER FOUR
TRANSFORMATIONS
 Computer Graphics Chapter Four -Transformations
2
2

2-D Matrix  Transformation means changing some

Transformations
graphics into something else by applying
Homogeneous rules.
Coordinates
 We can have various types of
Matrix transformations such as translation, scaling
Composition up or down, rotation, etc.
3-D Matrix  When a transformation takes place on a 2D
Transformations plane, it is called 2D transformation.
Right-Handed vs.  Transformations play an important role in
Left-Handed
Coordinate Systems computer graphics to reposition the graphics
Defining on the screen and change their size or
Transformations in
OpenGL
orientation
 Computer Graphics Chapter Four -Transformations
3
3

2-D Matrix
Transformations

Homogeneous
Coordinates

Matrix
Composition

3-D Matrix
Transformations

Right-Handed vs.
Left-Handed
Coordinate Systems

Defining
Transformations in
OpenGL
 4
2-D Matrix Transformations
 2x2 matrices can be multiplied according to
2-D Matrix
Transformations the following equation:

Matrix
Multiplication
 For example,
2-D Translation

2-D Scaling
 Matrix multiplication is not commutative.
In other words, for two matrices A and B, AB≠BA.
2-D Rotation  We can see this from the following example.
 5
2-D Matrix Transformations
2-D Matrix  However, matrix multiplication is
Transformations associative. This means that if we
Matrix
have three matrices A, B and C, then
Multiplication (AB)C = A(BC).
 We can see this from the following
2-D Translation example.

2-D Scaling

2-D Rotation
 6
2-D Translation
 The translation transformation shifts all points
2-D Matrix
by the same amount.
Transformations
 Therefore, in 2-D, we must define two translation
Matrix parameters:
Multiplication  The x-translation tx
 The y-translation ty
2-D Translation  To translate a point P to P’ we add on a vector T:

2-D Scaling

2-D Rotation  Therefore, we can see that the

relationship between points
before and after the translation is:
 7
2-D Translation
 For example,
2-D Matrix
The translation transformation shifts all points by
Transformations the same amount.

Matrix
Multiplication

2-D Translation

2-D Scaling

2-D Rotation
Figure: 2-D Translation
 8
2-D Scaling
2-D Matrix  The scaling transformation multiplies each
Transformations coordinate of each point by a scale factor.
 The scale factor can be different for each
Matrix
coordinate (e.g. for the x and y coordinates).
Multiplication
 If all scale factors are equal we call it
uniform scaling,
2-D Translation  whereas if they are different we call it
differential scaling.
 To scale a point P by scale factors Sx and Sy
2-D Scaling
we apply the scaling matrix S:

2-D Rotation

 Therefore, we can see that the relationship between

points before and after the scaling is:
 9
2-D Scaling
 For example,
2-D Matrix
Transformations The scaling transformation multiplies each
coordinate of each point by a scale factor.
Matrix
Multiplication

2-D Translation

2-D Scaling

2-D Rotation
Figure: 2-D Scaling
 10
2-D Rotation
2-D Matrix  The rotation transformation rotates
Transformations all points about a centre of rotation.
Matrix  The rotation transformation has a
Multiplication
single parameter:
 The angle of rotation,θ.
2-D Translation
 To rotate a point P anti-clockwise by θ, we apply
the rotation matrix R:
2-D Scaling

2-D Rotation  Therefore, we can see that the relationship

between points before and after the rotation is:
 11
2-D Rotation
 For example,
2-D Matrix
Transformations The rotation transformation rotates all points
about a centre of rotation.
Matrix
Multiplication

2-D Translation

2-D Scaling

2-D Rotation
Figure: 2-D Rotation about the Origin
 12
Homogeneous Coordinates
 Introduce an extra homogeneous parameter
2-D Matrix
to standard Cartesian coordinates.
Transformations
 The homogenous parameter normally has the
Homogeneous value 1.
Coordinates  With homogeneous coordinates we add an extra
coordinate, the homogenous parameter, to each
point in Cartesian coordinates.
2-D Translation
 So 2-D points are stored as three values:
 The x-coordinate,

2-D Scaling  The y-coordinate and

 The homogeneous parameter.

 The relationship between homogeneous points

2-D Rotation and their corresponding Cartesian points is:

Matrix
Composition
 13
2-D Translation with Homogenous Coordinates
 Now we can express a translation transformation
2-D Matrix using a single matrix multiplication, as shown below.
Transformations

Homogeneous
Coordinates

2-D Translation

2-D Scaling
 Therefore 2-D Translation with Homogenous
coordinates exactly the same as before, but we
2-D Rotation used a matrix multiplication instead of an
addition.

Matrix
Composition
 14
2-D Scaling with Homogenous Coordinates
 We can also express scaling using
2-D Matrix
Transformations homogeneous coordinates, as shown by the
following equations.
Homogeneous
Coordinates

2-D Translation

2-D Scaling

2-D Rotation  Therefore 2-D Scaling with Homogenous

coordinates exactly the same as before.
Matrix
Composition
 15
2-D Rotation with Homogenous Coordinates
 Rotations can also be expressed using
2-D Matrix
homogenous coordinates.
Transformations
 The following equations are similar to the form of
Homogeneous the 2-D rotation given before, with the
Coordinates exception that the rotation matrix R has an
extra row and extra column.

2-D Translation

2-D Scaling

2-D Rotation

 Therefore 2-D Rotation with Homogenous

Matrix coordinates, which is the same outcome as before.
Composition
 16
Matrix Composition
2-D Matrix  Matrix composition refers to
Transformations combining (i.e. multiplying together)
Homogeneous
a sequence of transformations to
Coordinates produce a single transformation
matrix.
2-D Translation  For example, Using matrix
composition, we can achieve this
2-D Scaling using the following sequence of
transformations:
 Translate from pivot point to
2-D Rotation
origin,
Matrix
 Rotate about origin, θ=90°
Composition  Translate from origin back to
pivot point.
 17
Matrix Composition
 Here we perform a rotation about the pivot point (2,2) by
2-D Matrix translating by (-2,-2) to the origin, rotating about the
Transformations origin (θ=90°) and then translating by (2,2) back to the
pivot point.
Homogeneous  Let us denote our transformations as follows:
Coordinates  T1 is a matrix translation by (-2,-2)

 R is a matrix rotation by θ about the origin

2-D Translation (θ=90°).

 T2 is a matrix translation by (2,2)

 Therefore, using homogenous coordinates we can

2-D Scaling compose all three matrices into one composite

transformation, C:

2-D Rotation
 For instance, if we were to apply the three
transformations to a point P the result would be:
Matrix
Composition
 18
Matrix Composition
 For example,
2-D Matrix
Transformations
 Therefore because T1 is right next to the point P it gets
applied first, followed by the next transformation to the
Homogeneous
left, R, and so on.
Coordinates

2-D Translation

2-D Scaling

2-D Rotation
 Figure: Composing Transformations to Achieve Rotation about an Arbitrary Pivot
Point

Matrix
Composition
 19

3-D Matrix Transformations

3-D Matrix
Transformations The concept of homogenous
coordinates is easily extended into
3-D Translation
3-D:
 We just introduce a fourth
3-D Scaling
coordinate in addition to the x, y
and z-coordinates.
3-D Rotation
In this section we review the forms
Right-Handed vs. of 3-D translation, rotation and
Left-Handed
Coordinate Systems scaling matrices using homogeneous
Defining coordinates.
Transformations in
OpenGL
 20
3-D Translation with Homogenous Coordinates
 The 3-D homogeneous coordinates translation
3-D Matrix
matrix is similar in form to the 2-D matrix, and is
Transformations
given by:

3-D Translation

3-D Scaling

3-D Rotation

Right-Handed vs.
Left-Handed
Coordinate Systems

Defining  Therefore,
Transformations in
OpenGL
 21
3-D Scaling with Homogeneous Coordinates
 Similarly, 3-D scaling are defined by three scaling
3-D Matrix
parameters, Sx, Sy and Sz.
Transformations
 The matrix is:

3-D Translation

3-D Scaling

3-D Rotation

Right-Handed vs.
Left-Handed
Coordinate Systems

Defining  Therefore,
Transformations in
OpenGL
 22
3-D Rotation with Homogenous Coordinates
 For rotations in 3-D we have three possible
3-D Matrix
axes of rotation: the x, y and z axes.
Transformations
 For a rotation about the x-axis the matrix is:

3-D Translation

3-D Scaling

3-D Rotation
 Therefore,

Right-Handed vs.
Left-Handed
Coordinate Systems

Defining
Transformations in
OpenGL
 23
3-D Rotation with Homogenous Coordinates
 For a rotation about the y-axis we use:
3-D Matrix
Transformations

3-D Translation

3-D Scaling

 Therefore,
3-D Rotation

Right-Handed vs.
Left-Handed
Coordinate Systems

Defining
Transformations in
OpenGL
 24
3-D Rotation with Homogenous Coordinates
 And for a rotation about the z-axis we have:
3-D Matrix
Transformations

3-D Translation

3-D Scaling

 Therefore,
3-D Rotation

Right-Handed vs.
Left-Handed
Coordinate Systems

Defining
Transformations in
OpenGL
 25
Right-Handed vs. Left-Handed
Coordinate Systems
3-D Matrix
Transformations  Most graphics packages use a right-
handed coordinate system.
3-D Translation  We can visualize the axes of a right-handed
coordinate system by extending the thumb and
first two fingers of the right hand so that they
3-D Scaling are perpendicular to each other.
 The first finger is the x-axis,

3-D Rotation  The second finger is the y-axis and

 The thumb is the z-axis.

Right-Handed vs.
Left-Handed
Coordinate Systems

Defining
Transformations in
OpenGL
26
 27
Defining Transformations in
3-D Matrix OpenGL
Transformations  To define matrix transformations in OpenGL we must
introduce the concepts of premultiplying and
postmultiplying.
3-D Translation
 If we pre-multiply matrix A by matrix B the
result is BA.
 If we post-multiply A by B the result is AB.
3-D Scaling
 Whenever we apply a transformation in OpenGL it is
applied to a current matrix.
3-D Rotation  Almost all transformations in OpenGL post-
multiply by this current matrix.
Right-Handed vs.  OpenGL always uses a right-handed
Left-Handed
Coordinate Systems
coordinate system.
 OpenGL always pos-tmultiplies by the current matrix.
Defining
This means that the sequence of transformations
Transformations in
OpenGL must be specified in the reverse order to that
which we want them to be applied.
 28
Defining Transformations in
3-D Matrix OpenGL
Transformations  Now let us look at OpenGL functions for
defining transformations.
3-D Translation
 In total, there are six functions that
affect the current matrix.
3-D Scaling  The following routines can be used in
OpenGL to define transformations:
 glTranslate*(tx,ty,tz)
3-D Rotation
 glRotate*(θ,vx,vy,vz)
Right-Handed vs.  glScale*(Sx,Sy,Sz)
Left-Handed
Coordinate Systems  glLoadMatrix*(elements16)

Defining  glMultMatrix*(elements16)
Transformations in  glLoadIdentity(elements16)
OpenGL
 29
Defining Transformations in
3-D Matrix OpenGL
Transformations  The following routines can be used in
OpenGL to define transformations:
3-D Translation  glTranslate*(tx,ty,tz) – Postmultiply
the current matrix by a translation matrix
3-D Scaling formed from the translation parameters tx,
ty and tz.
 glRotate*(θ,vx,vy,vz) – Postmultiply
3-D Rotation
the current matrix by a rotation matrix
Right-Handed vs.
that rotates by θ about the axis defined by
Left-Handed the direction of the vector (vx,vy,vz).
Coordinate Systems
 glScale*(Sx,Sy,Sz) – Postmultiply the
Defining
Transformations in current matrix by a scaling matrix formed
OpenGL from the scale factors Sx, Sy and Sz.
 30
Defining Transformations in
3-D Matrix OpenGL
Transformations  The following routines can be used in OpenGL to
define transformations:
3-D Translation  glLoadMatrix*(elements16) -Replaces the
current matrix with the 16-element array
element16.
3-D Scaling The array should be defined in column-major
order (i.e. the first four elements represent the
first column; the next four represent the second
3-D Rotation
column, etc.).
 glMultMatrix*(elements16)Postmultiplies
Right-Handed vs.
Left-Handed the current matrix with the 16-element array
Coordinate Systems element16.
Defining The array should be defined in column-major.
Transformations in
 glLoadIdentity(elements16) - Replaces the
OpenGL
current matrix with a 4x4 identity matrix.
 31
Defining Transformations in
3-D Matrix OpenGL
Transformations  Each current matrix in OpenGL has an
associated matrix stack.
3-D Translation  This is a standard FIFO stack that can be used to
‘remember’ different transformations.
 The following routines can be used to
3-D Scaling
manipulate the matrix stack:
 glPushMatrix: Copy the current matrix to

3-D Rotation the next position down in the stack, push all
other matrices down one position. The current
Right-Handed vs. matrix (i.e. the top matrix on the stack) is left
Left-Handed unchanged.
Coordinate Systems
 glPopMatrix: Destroy the current matrix,
Defining
Transformations in and move all other matrices on the stack up
OpenGL one position.
 32
Defining Transformations in
3-D Matrix OpenGL
Transformations  To finish this chapter, let us look at an
example of using these OpenGL routines
3-D Translation
to define a composite transformation.
 Consider the following code:
3-D Scaling

3-D Rotation

Right-Handed vs.
Left-Handed
Coordinate Systems

Defining
Transformations in
OpenGL
33
 glMatrixMode (GL_MODELVIEW);
 glColor3f (0.0, 0.0, 1.0);
 glRecti (50, 100, 200, 150); // Display blue rectangle.
 glColor3f (1.0, 0.0, 0.0);
 glTranslatef (-200.0, -50.0, 0.0); // Set translation
parameters.
 glRecti (50, 100, 200, 150); // Display red, translated
rectangle.
 glLoadIdentity ( ); // Reset current matrix to identity.
 glRotatef (90.0, 0.0, 0.0, 1.0); // Set 90-deg. rotation
about z axis.
 glRecti (50, 100, 200, 150); // Display red, rotated
rectangle.
 glLoadIdentity ( ); // Reset current matrix to identity.
 glScalef (-0.5, 1.0, 1.0); // Set scale-reflection
parameters.
 glRecti (50, 100, 200, 150); // Display red, transformed
rectangle.