Computer Graphics

(CoSc3121)
1

BULE HORA UNIVERSITY

COLLEGE OF COMPUTING AND INFORMATICS
COMPUTER SCIENCE DEPARTMENT

CHAPTER FOUR
TRANSFORMATIONS
 Computer Graphics Chapter Four -
Transformations
2
2
2-D Matrix
Transformation
s
Homogeneous
Coordinates

Matrix
Composition
3-D Matrix
Transformation
s
Right-Handed vs.
Left-Handed
Coordinate Systems

Defining
Transformations in
OpenGL
 3
2-D Matrix
Transformations
2-D Matrix  2x2 matrices can be multiplied
Transformation according to the following equation:
s
Matrix
Multiplication
 For example,
2-D Translation

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

2-D Rotation
 5
2-D Translation
2-D Matrix  The translation transformation shifts all
Transformation points by the same amount.
s  Therefore, in 2-D, we must define two
Matrix translation 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:
 6
2-D Translation
2-D Matrix  For example,
Transformation The translation transformation shifts all
s points by the same amount.
Matrix
Multiplication

2-D Translation

2-D Scaling

2-D Rotation

Figure: 2-D Translation

 7
2-D Scaling
2-D Matrix  The scaling transformation multiplies
Transformation
each coordinate of each point by a
s
scale factor.
Matrix  The scale factor can be different for
Multiplication
each coordinate (e.g. for the x and y
coordinates).
2-D Translation  If all scale factors are equal we call it
uniform scaling,
 whereas if they are different we call it
2-D Scaling
differential scaling.
 To scale a point P by scale factors Sx
2-D Rotation and Sy we apply the scaling matrix S:
 Therefore, we can see that the relationship between
points before and after the scaling is:
 8
2-D Scaling
2-D Matrix  For example,
Transformation The scaling transformation multiplies each
s coordinate of each point by a scale factor.
Matrix
Multiplication

2-D Translation

2-D Scaling

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

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

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

2-D Translation

2-D Scaling

2-D Rotation

Figure: 2-D Rotation about the Origin

 11
Homogeneous Coordinates
2-D Matrix  Introduce an extra homogeneous
Transformation parameter to standard Cartesian
s coordinates.
 The homogenous parameter normally has the
Homogeneous
value 1.
Coordinates
 With homogeneous coordinates we add an
extra coordinate, the homogenous parameter,
2-D Translation to each point in Cartesian coordinates.
 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

2-D Rotation
points and their corresponding Cartesian
points is:
Matrix
Composition
 12 2-D Translation with Homogenous
Coordinates
2-D Matrix  Now we can express a translation
Transformation transformation using a single matrix
s multiplication, as shown below.
Homogeneous
Coordinates

2-D Translation

2-D Scaling

 Therefore 2-D Translation with Homogenous

2-D Rotation coordinates exactly the same as before,
but we used a matrix multiplication
Matrix instead of an addition.
Composition
 13
2-D Scaling with Homogenous Coordinates
2-D Matrix  We can also express scaling using
Transformation homogeneous coordinates, as shown
s by the following equations.
Homogeneous
Coordinates

2-D Translation

2-D Scaling

2-D Rotation  Therefore 2-D Scaling with

Homogenous coordinates exactly the
Matrix same as before.
Composition
 14
2-D Rotation with Homogenous Coordinates
2-D Matrix  Rotations can also be expressed using
Transformation homogenous coordinates.
s  The following equations are similar to the
Homogeneous form of the 2-D rotation given before, with
Coordinates the 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
Composition before.
 15
Matrix Composition
2-D Matrix  Matrix composition refers to
Transformation
s combining (i.e. multiplying
Homogeneous
together) a sequence of
Coordinates transformations to 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:
2-D Rotation
 Translate from pivot point to
origin,
Matrix
 Rotate about origin, θ=90°
Composition  Translate from origin back to
pivot point.
 16
Matrix Composition
2-D Matrix  Here we perform a rotation about the pivot point
Transformation (2,2) by translating by (-2,-2) to the origin,
s rotating about the 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

2-D Translation origin (θ=90°).

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

 Therefore, using homogenous coordinates we

2-D Scaling can 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
 17
Matrix Composition
2-D Matrix  For example,
Transformation
s  Therefore because T1 is right next to the point

Homogeneous P it gets applied first, followed by the next

transformation to the 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
 18

3-D Matrix Transformations

3-D Matrix
Transformation The concept of homogenous
s
coordinates is easily
3-D Translation
extended into 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
Right-Handed vs. forms of 3-D translation,
Left-Handed
Coordinate Systems rotation and scaling matrices
Defining using homogeneous
Transformations in
OpenGL
coordinates.
 19 3-D Translation with Homogenous
Coordinates
3-D Matrix  The 3-D homogeneous coordinates
Transformation translation matrix is similar in form to the
s 2-D matrix, and is given by:

3-D Translation

3-D Scaling

3-D Rotation

Right-Handed vs.
Left-Handed
Coordinate Systems

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

3-D Translation

3-D Scaling

3-D Rotation

Right-Handed vs.
Left-Handed
Coordinate Systems

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

3-D Scaling

3-D Rotation

Right-Handed vs.  Therefore,

Left-Handed
Coordinate Systems

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

3-D Translation

3-D Scaling

 Therefore,
3-D Rotation

Right-Handed vs.
Left-Handed
Coordinate Systems

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

3-D Translation

3-D Scaling

3-D Rotation  Therefore,

Right-Handed vs.
Left-Handed
Coordinate Systems

Defining
Transformations in
OpenGL
 24
Right-Handed vs. Left-Handed
3-D Matrix Coordinate Systems
Transformation  Most graphics packages use a right-
s
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
3-D Scaling right hand so that they are
perpendicular to each other.
 The first finger is the x-axis,
3-D Rotation
 The second finger is the y-axis and

Right-Handed vs.  The thumb is the z-axis.

Left-Handed
Coordinate Systems

Defining
Transformations in
OpenGL
 25
Defining Transformations in
3-D Matrix OpenGL
Transformation  To define matrix transformations in OpenGL we
s must introduce the concepts of premultiplying
and postmultiplying.
3-D Translation  If we premultiply matrix A by matrix B the

result is BA.
 If we postmultiply 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
postmultiply by this current matrix.
Right-Handed vs.  OpenGL always uses a right-handed
Left-Handed coordinate system.
Coordinate Systems
 OpenGL always postmultiplies by the current
Defining matrix. This means that the sequence of
Transformations in transformations must be specified in the
OpenGL
reverse order to that which we want them to
be applied.
 26
Defining Transformations in
3-D Matrix OpenGL
Transformation
 Now let us look at OpenGL
s
functions for defining
3-D Translation
transformations.
 In total, there are six functions
3-D Scaling that affect the current matrix.
 The following routines can be used in
3-D Rotation OpenGL to define transformations:
 glTranslate*(tx,ty,tz)

Right-Handed vs.  glRotate*(θ,vx,vy,vz)

Left-Handed
Coordinate Systems  glScale*(Sx,Sy,Sz)

 glLoadMatrix*(elements16)
Defining
Transformations in  glMultMatrix*(elements16)
OpenGL
 glLoadIdentity(elements16)
 27
Defining Transformations in
3-D Matrix OpenGL
Transformation  The following routines can be used in
s
OpenGL to define transformations:
3-D Translation  glTranslate*(tx,ty,tz) – Postmultiply
the current matrix by a translation
matrix formed from the translation
3-D Scaling
parameters tx, ty and tz.
 glRotate*(θ,vx,vy,vz) – Postmultiply
3-D Rotation the current matrix by a rotation matrix
that rotates by θ about the axis defined
Right-Handed vs. by the direction of the vector (vx,vy,vz).
Left-Handed
 glScale*(Sx,Sy,Sz) – Postmultiply the
Coordinate Systems
current matrix by a scaling matrix
Defining
Transformations in formed from the scale factors Sx, Sy
OpenGL and Sz.
 28
Defining Transformations in
3-D Matrix OpenGL
Transformation  The following routines can be used in OpenGL
s to define transformations:
 glLoadMatrix*(elements16) -Replaces the
3-D Translation
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
3-D Rotation second column, etc.).
 glMultMatrix*(elements16)Postmultiplies

Right-Handed vs. the current matrix with the 16-element array

Left-Handed element16.
Coordinate Systems
The array should be defined in column-
Defining major.
Transformations in  glLoadIdentity(elements16) - Replaces the
OpenGL
current matrix with a 4x4 identity matrix.
 29
Defining Transformations in
3-D Matrix OpenGL
Transformation  Each current matrix in OpenGL has an
s
associated matrix stack.
3-D Translation  This is a standard FIFO stack that can be
used to ‘remember’ different
transformations.
3-D Scaling  The following routines can be used to
manipulate the matrix stack:
3-D Rotation  glPushMatrix: Copy the current matrix

to the next position down in the stack,

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

3-D Rotation

Right-Handed vs.
Left-Handed
Coordinate Systems

Defining
Transformations in
OpenGL
Any Question?