CGMB214: Introduction to Computer Graphics

TOPIC 6 :GEOMETRIC TRANSFORMATION

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)


Examples of 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


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


3. To view an object from a different angle


4. To produce animation


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:

11001232221

131211

y

x

y

x

PP

mmmmmm

QQ

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:

01000232221

131211

y

x

y

x

VV

mmmmmm

WW

NB: the third row of the resultant matrix will always be 0for 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!!

Sine and Cosine (cont.)

90

0180

270

y

x

z

-

Sine and Cosine (cont.)

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

Cos (- ) = x/z = cosSin (- ) = -y/z = -sin

Cos ( ) = cos cos - sin sin Sin ( ) = sin cos + cos sin

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:

mnm

ij

n

pnpjp

nj

mpm

ipi

p

cc

c

cc

bbb

bbb

aa

aa

aa

...............

...

.................................

......

........

........

...

1

111

1

1111

1

1

111

where

p

kkjikpjipjijiij babababac

12211 ...

Example

987654321

A

102101

B

25116171

AB

Characteristics of Matrix

Multiplication of matrices is not commutativeAB != 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:

1000010000100001

100010001

1001

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 object’s 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 + tx

y’ = y + ty

Translation

The (tx,ty) is the translation distances called TRANSLATION VECTOR

In matrix form

Then point P’ = P + T

yx

P

''

'yx

P

y

x

tt

T

y

x

y

x

tytx

tt

yx

P'

Translation

For 2-D translation the transformation matrix T has the following form:

1001001

y

x

mm

Where mx and my are the translation values in x and yaxis

T =

Translation (cont.)

For 3-D translation the transformation matrix T has the following form:

1000100010001

z

y

x

mmm

Where mx, my and mz 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’)

rr

The original point (x,y) can be represented in polarcoordinates form:

x = r cos (1) y = r sin (2)

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

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

cossinsincos

R =

Rotations

For 2-D rotation the transformation matrix R has the following form (in homogeneous coordinate system):

1000cossin0sincos

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.

1000010000cossin00sincos

Rz( ) =

Rotation about z-axis (ccw)

Rotations

10000cossin00sincos00001

10000cos0sin00100sin0cos

Rx( ) =

Ry( ) =

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

alwaysUniform 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 (Sx, Sy, Sz) 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

1000000

y

x

SS

S =

Scaling

For 3-D scaling the transformation matrix S has the following form:

1000000000000

z

y

x

SS

S

S =

Reflection

Reflection produces a mirror image of an object

It is also a rigid body transformationReflection 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

100010001

100010001

F(x) = F(y) =

About x-axis about y-axis

Reflection

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

1000010000100001

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 degree2. Reflection about x axis3. 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

10001001 xsh

10001001

ysh

Shearing

The values can be positive or negative numbers

Positive: moves points to the rightNegative: 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:

1000010010001

bca

Example (3-D shearing)

Let us consider a unit cube whose lower left corner coincidesWith 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:

10000100010001

y

x

shsh

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), M1

then rotate through 30 degree, M2

then scale by (2, -1), M3

then translate by (0, 1.5), M4

and finally, rotate through –30 degree, M5

All of these transformation can be represented by a single matrix, MM = M5M4M3M2M1

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 thata) rotates through 45 degreesb) 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 functionglMultMatrixf(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];

CGMB214: Introduction to Computer Graphics

Documents

Transcript of CGMB214: Introduction to Computer Graphics