dr. ayman eldeib · 2/16/2020 1 hemn224: computer graphics & visualization transformation dr....

2/16/2020

1

HEMN224: Computer Graphics &

Visualization

Transformation

Dr. Ayman Eldeib

Spring 2020

Healthcare Engineering & Management (HEM)

Computer Graphics Transformation

Transformation

Transformation is a fundamental corner stone of computer

graphics and is a central to OpenGL as well as most other

graphics systems.(2D and 3D Transformation)

Given an object, transformation is to change the object’s

Position (translation)

Size (scaling)

Orientation (rotation)

Shapes (shear)

2/16/2020

2

Computer Graphics Transformation

Translations

Translate individual

vertices

We can translate or move points to a new position by

adding offsets to their coordinates

Computer Graphics Transformation

We can translate or move points to a new position by

adding offsets to their coordinates

Translate individual vertices

y

x

tyy

txx

+=′

+=′

+

=

y

x

t

t

y

x

y

x

'

'

=

1100

10

01

1

'

'

y

x

t

t

y

x

y

x

2D

Cont.Translations

2/16/2020

3

Computer Graphics Transformation

Homogeneous Coordinates

Homogeneous coordinates: representing coordinates in 2 dimensions with a 3-vector and coordinates in 3 dimensions with a 4-vector

(Note that typically w = 1 in object coordinates)

=

w

z

y

x

zyx ),,(

Computer Graphics Transformation

Homogeneous coordinates seem unintuitive, but they make graphics operations much easier

Our transformation matrices are now 4x4 for 3D

1 0 0

0 1 0

0 0 1

0 0 0 1

x

y

z

T

T

T

=

T

Translation matrix

P'P T=

Homogeneous Coordinates

2/16/2020

4

Computer Graphics Transformation

We can translate or move points to a new position by

adding offsets to their coordinates

Translate individual vertices

=

11000

100

010

001

1

'

'

'

z

y

x

t

t

t

z

y

x

z

y

x

3D

z

y

x

tzz

tyy

txx

+=

+=′

+=′

'

+

=

z

y

x

t

t

t

z

y

x

z

y

x

'

'

'

P'P T=

Cont.Translations

Computer Graphics Transformation

Translate individual

vertices

We can translate or move points to a new position by

adding offsets to their coordinates

To transform an object multiply each vertex by the same

matrix

A square translation can be done as follows:

]PPPP[]'P'P'P'[P 43214321 T=

Cont.Translations

2/16/2020

5

Computer Graphics Transformation

Scaling

Scaling a coordinate means multiplying each of its

components by a scalar

Uniform scaling means this scalar is the same for all

components

× 2

Computer Graphics Transformation

Scaling a coordinate means multiplying each of its

components by a scalar

× 2

ysy

xsx

y

x

⋅=′

⋅=′

Cont.Scaling

2/16/2020

6

Computer Graphics Transformation

Scaling a coordinate means multiplying each of its

components by a scalar

ysy

xsx

y

x

⋅=′

⋅=′

=

′

′

y

x

s

s

y

x

y

x

0

0

=

′

′

1100

00

00

1

y

x

s

s

y

x

y

x2D

3D

P

11000

000

000

000

1

P' Sz

y

x

s

s

s

z

y

x

z

y

x

=

=

′

′

′

=

Scaling matrix

Cont.Scaling

Computer Graphics Transformation

Scaling a coordinate means multiplying each of its

components by a scalar

Non-uniform scaling: different scalars per component

X × 2,

Y × 0.5

Cont.Scaling

2/16/2020

7

Computer Graphics Transformation

Fixed Point Scaling

Computer Graphics Transformation

Fixed Point Scaling Cont.

2/16/2020

8

Computer Graphics Transformation

=

′

′

1100

00

00

1

y

x

s

s

y

x

y

x

Fixed Point Scaling Cont.

Computer Graphics Transformation

=

′

′

1100

00

00

1

y

x

s

s

y

x

y

x

Step 1:

Translate to the origin

Fixed Point Scaling Cont.

2/16/2020

9

Computer Graphics Transformation

=

′

′

1100

00

00

1

y

x

s

s

y

x

y

x

Step 2:

Scale the object

Fixed Point Scaling Cont.

Computer Graphics Transformation

=

′

′

1100

00

00

1

y

x

s

s

y

x

y

x

Step 3:

Translate the object back

Fixed Point Scaling Cont.

2/16/2020

10

Computer Graphics Transformation

1. Translate to origin

2. Scale

3. Translate back

( ) pTSTp1−=′

Fixed Point Scaling Cont.

Computer Graphics Transformation

Rotation

θ

(x, y)

(x’, y’) x’ = x cos(θ) - y sin(θ)

y’ = x sin(θ) + y cos(θ)

( ) ( )

( ) ( )

θθ

θ−θ=

y

x

y

x

cossin

sincos

'

'

2D

2/16/2020

11

Computer Graphics Transformation

3-D is more complicated

Need to specify an axis of rotation

There are four ways to specify a 3D rotation

Simple cases: rotation about X, Y, Z axes

3-D rotation matrix look like

Rotation about the X-axis

θθ

θ−θ

=

z

y

x

z

y

x

100

0)cos()sin(

0)sin()cos(

'

'

'

Rotation about the Y-axis Rotation about the Z-axis

θθ−

θθ

=

z

y

x

z

y

x

)cos(0)sin(

010

)sin(0)cos(

'

'

'

θθ

θ−θ=

z

y

x

z

y

x

)cos()sin(0

)sin()cos(0

001

'

'

'

Rotation Cont.

3D

Computer Graphics Transformation

Rotation about the X-axis Rotation about the Y-axis Rotation about the Z-axis

−=

11000

0cossin0

0sincos0

0001

)(z

y

x

Rx θθ

θθθ

−=

11000

0cos0sin

0010

0sin0cos

)(z

y

x

R y θθ

θθ

θ

−

=

11000

0100

00cossin

00sincos

)(z

y

x

Rz

θθ

θθ

θ

3-D is more complicated

Need to specify an axis of rotation

There are four ways to specify a 3D rotation

Simple cases: rotation about X, Y, Z axes

3-D rotation matrix look like

Rotation Cont.

3D

2/16/2020

12

Computer Graphics Transformation

3-D is more complicated

Need to specify an axis of rotation

There are four ways to specify a 3D

rotation

3D rotations – axis angle representation

3-D rotation matrix look like

y

z

x

a

θ

Rotate a point about an arbitrary axis a = (x,y,z) going through the origin

Note: the axis a should be of unit length

2

2

2

1 0 0 0

( , ) cos 0 1 0 (1 cos ) sin 0

0 0 1 0

x xy xz z y

R a xy y yz z x

xz yz z y x

θ θ θ θ

−

= + − + − −

Rotation Cont.

3D

Computer Graphics Transformation

Fixed Point Rotating

1. Translate to origin

2. Rotate

3. Translate back

( ) pTRTp1−=′

2/16/2020

13

Computer Graphics Transformation

Matrix Composition

Matrix multiplication does not commute

Transformation products may not be

commutative

BAAB ≠

Computer Graphics Transformation

Shearing

Y coordinates are unaffected, but x coordinates are

translated linearly with y, i.e.

y’ = y x’ = x + y * h

=

1100

010

01

1

'

'

y

xh

y

x

2/16/2020

14

Computer Graphics Transformation

X coordinates are unaffected, but y coordinates are

translated linearly with y, i.e.

x’ = x y’ = y + x * g

=

1100

01

001

1

'

'

y

x

gy

x

Cont.Shearing

Computer Graphics Transformation

Inverse Transformations

Translate Scale

Shear Rotate

2/16/2020

15

Computer Graphics Transformation

OpenGL: Modeling Transformations

OpenGL provides several commands for performing modeling transforms:

glTranslate{fd}(x, y, z)

• Creates a matrix T that transforms an object by translating (moving)

it by the specified x, y, and z values

glRotate{fd}(angle, x, y, z)

• Creates a matrix R that transforms an object by rotating it

counterclockwise angle degrees about the vector {x, y, z}

glScale{fd}(x, y, z)

• Creates a matrix S that scales an object by the specified factors in

the x, y, and z directions

Computer Graphics Transformation

OpenGL: Matrix Manipulation

Each of these post multiplies the current matrix

E.g., if current matrix is C, then C=CS

The current matrix is either the modelview matrix or the

projection matrix (also a texture matrix, won’t discuss for now)

Set these with glMatrixMode(), e.g.:

glMatrixMode(GL_MODELVIEW);

glMatrixMode(GL_PROJECTION);

– WARNING: common mistake ahead!

• Be sure that you are in GL_MODELVIEW mode before making

modeling or viewing calls!

• Ugly mistake because it can appear to work, at least for a while…

2/16/2020

16

Computer Graphics Transformation

More matrix manipulation calls

To replace the current matrix with an identity matrix:

glLoadIdentity()

Postmultiply the current matrix with an arbitrary matrix:

glMultMatrix{fd}(float/double m[16])

Copy the current matrix and push it onto a stack:

glPushMatrix()

Discard the current matrix and replace it with whatever’s on top

of the stack:

glPopMatrix()

Note that there are matrix stacks for both modelview and

projection modes

Cont.OpenGL: Matrix Manipulation

Computer Graphics Transformation

glMatrixMode (GL_MODELVIEW)

glLoadIdentity ( );

glMultMatrtixf (m2);

glMultMatrixf (m1);

12 MMM ⋅=

OpenGL uses post multiplication when multiplying matrices thus, transformations are applied in the inverse

order. The last one specified is the first one applied.

Cont.OpenGL: Matrix Manipulation

2/16/2020

17

Computer Graphics Transformation

glMatrixMode (GL_MODELVIEW)

glLoadIdentity ( );

glRotationf (theta,0,0,1);

drawCube ( );

glTranslatef (a,b,c);

drawCube ( );

y

z

x

Cont.OpenGL: Matrix Manipulation

Computer Graphics Transformation

glTranslatef(a1,b1,c1);

glPushMatrix ( );

glRotatef(theta1,a2,b2,c2);

glScale(a3,b3,c3);

glPopMatrix ( );

glTranslatef(a4,b4,c4);

1T

21RT

4TT

1

321 SRT

Cont.OpenGL: Matrix Manipulation

2/16/2020

18

Computer Graphics Transformation

OpenGL: Transformation Hierarchies

glPushMatrix();

glPushMatrix();

glPopMatrix();

glPopMatrix();

// translate to shoulder position

// rotate by shoulder joint

// draw shoulder (circle and rectangle)

// translate to elbow position

// rotate by elbow joing

// draw elbow (circle and rectangle)

Computer Graphics Transformation

OpenGL: Specifying Color

Can specify other properties such as color

To produce a single aqua-colored triangle:

glColor3f(0.1, 0.5, 1.0);

glVertex3fv(v0);

glVertex3fv(v1);

glVertex3fv(v2);

To produce a Gouraud-shaded triangle:

glColor3f(1, 0, 0); glVertex3fv(v0);

glColor3f(0, 1, 0); glVertex3fv(v1);

glColor3f(0, 0, 1); glVertex3fv(v2);

In OpenGL, colors can also have a fourth component α (opacity)

Generally want α = 1.0 (opaque);