TOPI C 6:

GEOMETRI C TRANSFORMATI ON

CGMB214: Introduction to
Computer Graphics
Objectives
To provide an understanding on the geometric
transformation
So far.
We have been discussing the basic elements of
geometric programming. We have discussed points,
vectors and their operations and coordinate frames
and how to change the representation of points and
vectors from one frame to another.
Next topic involves how to map points from one
place to another (transformation).
Affine Transformation
In this topic, we will concentrate on one particular
transformation called affine transformations.
Examples of affine transformations are:
translations
Rotations
Uniform and non-uniform scaling
reflections (flipping objects about a line)
shearing ( which deform squares into parallelogram)

Affine Transformation

Examples of affine transformation
Affine Transformation
Transformation in 2-D and 3-D
Affine Transformation-Characteristics
These transformations all have a number of things
in common.
They all map lines to lines ( parallel lines will still be parallel
after the transformations)
Translation, rotation and reflection preserve the lengths of
line segments and the angles between segments
Uniform scaling preserve angles but not length
Non-uniform scaling and shearing do not preserve angles or
lengths


Affine Transformation-Usage
Transformations are useful in a number of
situations:
1. We can compose a scene out a number of objects

Affine Transformation-Usage


Affine Transformation-Usage
2. Can design a single motif and manipulate the
motif to produce the whole shape of an object
especially if the object has certain symmetries.

Example of snowflake after reflections, rotations and translations of the
motif
Affine Transformation-Usage
3. To view an object from a different angle

Affine Transformation-Usage
4. To produce animation

Affine Transformation
The two special types of affine transformation are
1. Rigid transformation: These transformations
preserve both angles and lengths (I.e. translations,
rotations and reflections)
2. Orthogonal transformation: These
transformations preserve angles but not necessarily
length.

Affine Transformation -why?
The most common transformations used in
computer graphics.
They simplify operations to scale, rotate and
reposition objects.
Several affine transformations can be combined into
a simple overall affine transformation in terms of a
compact matrix representation

Transformation Matrix (2-D)
For a point P that map to Q after affine
transformation has a matrix representation as
shown:

|
|
|
.
|

\
|
|
|
|
.
|

\
|
=
|
|
|
.
|

\
|
1 1 0 0 1
23 22 21
13 12 11
y
x
y
x
P
P
m m m
m m m
Q
Q
NB: the third of the resultant matrix will always be 1 for
a point
Transformation Matrix (2-D)
For a vector V that maps to W after affine
transformation has the matrix representation as
shown:

|
|
|
.
|

\
|
|
|
|
.
|

\
|
=
|
|
|
.
|

\
|
0 1 0 0 0
23 22 21
13 12 11
y
x
y
x
V
V
m m m
m m m
W
W
NB: the third row of the resultant matrix will always be 0
for a vector
Transformation Matrix
The scalar m that we have in the transformation
matrix will determine which affine transformation
that we want to perform.

OpenGL graphics pipeline
Normally in OpenGL, many transformation
processes occur before the final objects are displayed
on the screen. Basically the object that we define in
our world will go through the same procedure.

Transformations
Transformations: changes in size, shape and
orientation that alter the coordinate descriptions of
objects.
Usually, transformations are represented and
calculated using matrices.
OpenGL also uses the same approach to perform
transformations

Sine and Cosine

Sin = b/c if c = 1 then b = sin

Cos = a/c if c = 1 then c = cos
c
a
b
Recall our algebra lesson!!
u
u
u
u
u
Sine and Cosine (cont.)

90
0 180
270
y
x
z
u
u
-
Sine and Cosine (cont.)

Cos = x/z if z = 1 then cos = x
Sin = y/z if z = 1 then sin = y


Cos (- ) = x/z = cos
Sin (- ) = -y/z = -sin

Cos ( ) = cos cos - sin sin
Sin ( ) = sin cos + cos sin
u
u
u
u
u
u
| u +
u
u
u
u
| |
| u +
| |
Matrices
In graphics most of the time matrix operation that we will
deal with is matrix multiplication. The formula for
multiplication of matrix A with m x p dimension and matrix
B with p x n dimension is:



|
|
|
|
|
|
.
|

\
|
=
|
|
|
|
|
|
.
|

\
|
|
|
|
|
|
|
|
.
|

\
|
mn m
ij
n
pn pj p
n j
mp m
ip i
p
c c
c
c c
b b b
b b b
a a
a a
a a
...
. ... .
. .
. ... .
...
... ...
. ... . ... .
. ... . ... .
. ... . ... .
... ...
...
. ... .
...
. ... .
...
1
1 11
1
1 1 11
1
1
1 11
where

=
= + + + =
p
k
kj ik pj ip j i j i ij
b a b a b a b a c
1
2 2 1 1
...
Example

|
|
|
.
|

\
|
=
9 8 7
6 5 4
3 2 1
A
|
|
|
.
|

\
|
=
1 0
2 1
0 1
B
|
|
|
.
|

\
|

=
25 1
16 1
7 1
AB
Characteristics of Matrix
Multiplication of matrices is not commutative
AB != BA
Multiplication of several matrices is associative
A(BC) = (AB)C

Identity Matrix
Set of matrices that when they multiply another
matrix which reproduce that matrix is called identity
matrices i.e:



( )
|
|
|
|
|
.
|

\
|
|
|
|
.
|

\
|
|
|
.
|

\
|
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
1 0 0
0 1 0
0 0 1
1 0
0 1
1
1D 2D 3D 4D
Object Transformation vs Coordinate
Transformation
Object Transformation: alters the coordinates of
each point on the object according to some rule. No
change of coordinate system
Coordinate Transformation: defines a new
coordinate system in terms of the old one and then
represents all of the objects point in the new
coordinate system

Translation
Reposition an object along a straight line path from
one coordinate location to another
2D point is translated by adding translation
distances to the x and y coordinates
When translating (x,y) to (x,y) by value t
x = x + t
x
y = y + t
y

Translation
The (t
x
,t
y
) is the translation distances called
TRANSLATION VECTOR
In matrix form


Then point P = P + T







|
|
.
|

\
|
=
y
x
P
|
|
.
|

\
|
=
'
'
'
y
x
P
|
|
.
|

\
|
=
y
x
t
t
T
|
|
.
|

\
|
+
+
=
|
|
.
|

\
|
+
|
|
.
|

\
|
=
y
x
y
x
t y
t x
t
t
y
x
P'
Translation
For 2-D translation the transformation matrix T has
the following form:


|
|
|
.
|

\
|
1 0 0
1 0
0 1
y
x
m
m
Where m
x
and m
y
are the translation values in x and y
axis
T =
Translation (cont.)
For 3-D translation the transformation matrix T has
the following form:


|
|
|
|
|
.
|

\
|
1 0 0 0
1 0 0
0 1 0
0 0 1
z
y
x
m
m
m
Where m
x
, m
y
and m
z
are the translation values in x, y and
z axis

T =
Translation
Translation is a rigid body transformation
the object is not being deformed
all points are moved in the same distance
How to translate?
Straight lines based on end points
Polygons - based on vertices
Circles - based on centre

Rotations
Reposition an object along a circular path in a
specified plane
Rotations are specified by:
a rotation angle
a rotation point (pivot point) at position (x,y)
Positive rotation angle means rotate counter-
clockwise negative rotation angle means rotate
clockwise


Rotations

(x,y)
(x,y)
r
r
The original point (x,y) can be represented in polar
coordinates form:
x = r cos (1)
y = r sin (2)
|
u
u
u
Rotations
The new point (x,y) can be expressed as
x = r cos ( )
y = r sin ( )
These equation can be written as
x = r cos cos - r sin sin
y = r cos sin + r sin cos


| u +
| u +
u
u
u
u
|
|
|
|
Rotations
Substituting the equations with equation (1) and (2),
we get
x = x cos - y sin
y = x sin + y cos
Therefore, the rotation matrix R can be expressed as

|
|
|
|
|
|
.
|

\
|

| |
| |
cos sin
sin cos
R =
Rotations
For 2-D rotation the transformation matrix R has the
following form (in homogeneous coordinate system):



|
|
|
.
|

\
|

1 0 0
0 cos sin
0 sin cos
| |
| |
NB: for counter-clockwise rotation
Rotations
In 3-D world, the rotation is more complex since we
have to consider rotation about three different axis;
x, y and z axis.
Therefore we have three different transformation
matrices in 3-D world.

|
|
|
|
|
.
|

\
|

1 0 0 0
0 1 0 0
0 0 cos sin
0 0 sin cos
| |
| |
R
z
( ) = |
Rotation about z-axis (ccw)
Rotations

|
|
|
|
|
.
|

\
|

1 0 0 0
0 cos sin 0
0 sin cos 0
0 0 0 1
| |
| |
|
|
|
|
|
.
|

\
|

1 0 0 0
0 cos 0 sin
0 0 1 0
0 sin 0 cos
| |
| |
R
x
( ) =
R
y
( ) =
|
|
Rotation about y-axis (ccw)
Rotation about x-axis (ccw)
Rotations
This rotation matrix is for case where the rotation is
at the origin.
For a rotation at any other points, we need to
perform the following transformations:
Translating the object so the rotation point is at the origin.
Rotating the object around the origin
Translating the object back to its original position
Recall that rotation is a rigid affine transformation

Scaling
Scaling changes the size of an object
Scaling can also reposition the object but not always
Uniform scaling is performed relative to some
central fixed point (I.e at the origin). The scaling
value (scale factor) for uniform scaling must be both
equal.
Non-uniform scaling has different scaling factors.
Also refers as differential scaling

Scaling
The value of the scale factors (S
x
, S
y
, S
z
) determine
the size of the scaled object.
if equal to 1 -> no changes
if greater than 1 -> increase in size (magnification)
if 0 < scale factors < 1 -> decrease in size
(demagnification)
if negative value -> reflection !!!



Scaling (cont.)
For 2-D scaling the transformation matrix S will
have the following form

|
|
|
.
|

\
|
1 0 0
0 0
0 0
y
x
S
S
S =
Scaling
For 3-D scaling the transformation matrix S has the
following form:

|
|
|
|
|
.
|

\
|
1 0 0 0
0 0 0
0 0 0
0 0 0
z
y
x
S
S
S
S =
Reflection
Reflection produces a mirror image of an object
It is also a rigid body transformation
Reflection is relative the axis of the reflection. In
2D,the axis are either x and y whereas 3-D includes z
axis.
Reflection is actually a special case of scaling (with
the negative scale factor)

Reflection
For 2-D reflection, the transformation matrix F has
the following form

|
|
|
.
|

\
|

1 0 0
0 1 0
0 0 1
|
|
|
.
|

\
|

1 0 0
0 1 0
0 0 1
F(x) =
F(y) =
About x-axis about y-axis
Reflection
For 3-D reflection, the transformation matrix F has
the following form

|
|
|
|
|
.
|

\
|

1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
F(z) =
Reflection about z-axis
Reflection
Reflection can be generalized by concatenating
rotation and reflection matrices.
Example: If reflection at y=x axis (45 degree), the
transformations involved are:
1. Clockwise rotation of 45 degree
2. Reflection about x axis
3. Counter clockwise rotation of 45 degree

Shearing
Distort an object by moving one side relative to
another
It neither rigid body nor orthogonal transformation.
i.e. changing a square into parallelogram in 2-D or
cube into parallelepiped in 3-D space
It is normally used to display italic text using regular
ones



Shearing
For 2-D shearing transformation the transformation
matrix has the following form

X direction y direction
|
|
|
.
|

\
|
1 0 0
0 1 0
0 1
x
sh
|
|
|
.
|

\
|
1 0 0
0 1
0 0 1
y
sh
Shearing
The values can be positive or negative numbers
Positive: moves points to the right
Negative: moves points to the left

Shearing
For 3-D space shearing transformations the number
of transformation matrix are many.
Basically, to get one transformation matrix for
shearing, we can substitute any zero term in identity
matrix with a value like example below:

|
|
|
|
|
.
|

\
|
1 0 0 0
0 1 0
0 1
0 0 0 1
b
c a
Example (3-D shearing)

Let us consider a unit cube whose lower left corner coincides
With the origin
Example (3-D shearing)
Based on the diagram, we want to shear the cube at
about the z axis. In this case the face of the cube that
lies on the xy-coordinate plane does not move. The
face that lies on the plane z=1 is translated by a
vector (shx,shy). This is called xy-shear. Under the
xy-shear, the origin and x- and y-unit vectors are
unchanged. The transformation matrix for this
transformation is:

|
|
|
|
|
.
|

\
|
1 0 0 0
0 1 0 0
0 1 0
0 0 1
y
x
sh
sh
Composition matrix
As can be seen in the previous example, we can
actually compose or concatenate many affine
transformation matrices to produce a single
(resultant) affine transformation matrix
For example, to get a composition matrix for rotation
and translation, we perform matrix multiplication.
We can build a composite transformation for a
general-case transformation at any other points
(besides origin)

Example
Let say we want to produce an object that goes
through the following transformation operations:
translate by (3, -4), M
1
then rotate through 30 degree, M
2
then scale by (2, -1), M
3
then translate by (0, 1.5), M
4
and finally, rotate through 30 degree, M
5
All of these transformation can be represented by a
single matrix, M
M = M
5
M
4
M
3
M
2
M
1

Example
Composition matrix for affine transformations can only
be produced if we use homogenous coordinates (for
translation case).
Notice the multiplication is done in reverse order (FILO)
Exercise: Build a transformation matrix that
a) rotates through 45 degrees
b) then scales in x by 1.5 and in y by 2,
c) and finally translates through (3,5)
Find the image under this transformation of the point
(1,2)



Affine transformation in OpenGL
Recall our lesson on OpenGL graphics pipeline.

CT = Current Transformation
OpenGL
All the transformations will be performed in CT by
changing the current transformation matrix. In other
way, the CT matrix is an example of composite
matrix.
Typically, in OpenGL, we will have the following
fragment of code in our program before we start
performing transformations.
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();


OpenGL
By having this code in our program, we set our
matrix mode to be GL_MODELVIEW and initialize
the CT matrix to be identity
CT I
Once we have set this, we can perform
transformation which means we modify the CT by
post-multiplication by a matrix

OpenGL
CT<-CT.T (translation matrix)
CT<-CT.S (scaling matrix)
CT<-CT.R (rotation matrix)
CT<-CT.M(arbitrary matrix)
Once all of the transformation matrix multiplications
have been done, the vertices will be transformed
based on the final (composite) matrix
In OpenGL all matrices are in 4 x 4 matrix


OpenGL
The three transformation supported in most graphics
system(including OpenGL) are translation, rotation
with a fixed point of the origin and scaling with a
fixed point of the origin.
The functions for these transformation in OpenGL
are:
glTranslatef(dx, dy, dz);
glRotatef (angle, vx, vy, vz);
glScalef(sx, sy, sz);



OpenGL
If we want to perform rotation at any other point using
the provided functions in OpenGL, (I.e. 45 degree
rotation aboutthe line through the origin and the point
(1,2,3) with a fixed point of (4,5,6).) the following code
fragment shows us how toperform this transformation.
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef(4.0,5.0,6.0);
glRotatef(45.0,1.0,2.0,3.0);
glTranslatef(-4.0,-5.0,-6.0);
NB: Take note at the reverse order implementation

OpenGL
For most purposes, rotation, translation and scaling
can be used to form our desired object. However, in
some cases the provided transformation matrices are
not enough. For example, if we want to form a
transformation matrix for shearing and reflection.
For these transformations, it is easier if we set up the
matrix directly. We can load a 4 x 4 homogeneous-
coordinate matrix as the current matrix (CT)

OpenGL
To load the matrix we call this function:
glLoadMatrixf(myarray);
Or we can multiply our shearing matrix by calling
this function
glMultMatrixf(myarray);
Where myarray is a one-dimensional array of 16
element arranged by columns.

OpenGL
To define a user-defined matrix (for shearing and
reflection) we can follow the same way as shown
below:
Glfloat myarray[16];
for (i=0;i<3;i++)
for(j=0;j=3;j++)
myarray[4*j+i] = M[i][j];