Transformations Transformations Chapter 3Chapter 3

04/20/23 1

Overview

• Review 2-D matrix transformations• Homogeneous coordinates• Review 3-D matrix transformations • 2-D/3-D transformations in OpenGL

04/20/23 2

Geometric Transformations• Geometric transformations

Translation rotation Scaling Orthogonal projection, perspective projection

• Why are geometric transformations necessary? for positioning geometric objects in 2D and 3D. for modeling geometric objects in 2D and 3D For viewing geometric objects in 2D and 3D.

04/20/23 3

2-D Geometric Transformations

• 2-D translation• Translating a point (x, y) means to move it by

(tx,ty).

04/20/23 4

tx=2ty=1

2D Translation

• Matrix Representation

TPP

04/20/23 5

y

xP

y

xP

ty

txTY

X1,1 3,1

2,3

5,4

4,2 6,2

translation (3,1)translation (3,1)

tyyytxxx

- x’ is not a linear combination of x and y - y’ is not a linear combination of x and y

Rotation 2D

• Rotating a point P=(x,y) through an angle θ about the origin O(0,0) counterclockwise means to determine another point Q=(x´,y´) on the circle centered at O such that θ= POQ.∠

04/20/23 6

Rotation 2D

• Rotation 2D: equations

04/20/23 7

Expanding the expressions of x´and y´, we have:x ' = r cosφ cosθ − r sinφ sinθy' = r cosφ sinθ + r sinφ cosθReplacing rcosφ and rsinφ byx and y in the previous equations, we get:

2-D Rotation

• 2-D rotation matrix representation

cossin

sincos

yxy

yxx

cossin

sincosR

04/20/23 8

RPP

y

xP

y

x'P

Rotation, Rotation, ΘΘ degrees degrees

Y

X1,1 3,1

2,3

Θ

Although sin(θ) and cos(θ) are not linear functions of θ, x’ is a linear combination of x and y y’ is a linear combination of x and y

2-D scalingScaling an object consists of multiplying each of its point

component x and y by a scalar sx and sy, respectively

04/20/23 9

Sx=2Sy=2

Sx=2Sy=0.5

Uniform Scaling

Non-Uniform Scaling

• 2-D scaling Matrix representation

04/20/23 10

y

xP

y

xP

s

sS

y

x

0

0

Y

X1,1 3,1

2,3

4,6

6,22,2SPP

ysy

xsx

y

x

Scaling by factor (sScaling by factor (sxx, s, syy))

Shearing

• Shearing an object consists of linearly deforming it along either x-axis or y-axis or both.

04/20/2311

X’ = x + y tanƟY’ = y + x tanØ

11

Ɵ

Ø

Fundamental problem of geometrictransformations

Problem:– Rotation/scaling are performed with a matrix multiplication– Translation is performed with a matrix addition

Consequence: we are not allowed to effect a sequence of transformations (translations and rotations) through a product of

matrices 2x2. But, we can always produce k rotations by computing the

product of k rotation matrices.

SOLUTION: homogeneous coordinates!04/20/23 12

Homogeneous Coordinates

• Processing a sequence of geometric transformations would be more efficient if all transformations could be expressed as multiplications– Optimise hardware for matrix multiplication– Simple composition of many transformations

04/20/23 13

Homogeneous Coordinates

• Homogeneous Coordinates– Treat translation as a matrix multiplication– Requires an extra coordinate:

04/20/23 14

h

y

x

1

/

/

hy

hx

Homogeneous point

Cartesian point

Usually we use h=1, so the homogenous point = Cartesian pointUsually we use h=1, so the homogenous point = Cartesian point

2-D Geometric Transformations with Homogeneous Coordinates

• 2-D translation with homogeneous coordinates

04/20/23 15

TPP

Y

X1,1 3,1

2,3

5,4

4,2 6,2

translation (3,1)translation (3,1)

11100

10

01

y

x

Py

x

Pty

tx

T

tyyy

txxx

2-D Geometric Transformations with Homogeneous Coordinates

• 2-D rotation with homogeneous coordinates

cossin

sincos

yxy

yxx

04/20/23 16

11yx

Pyx

P

00

100

cos θsin θ-sin θcos θ

R

Y

X1,1 3,1

2,3

Θ

Rotation, Rotation, ΘΘ degrees degrees

RPP

2-D Geometric Transformations with Homogeneous Coordinates

• 2-D scaling with homogeneous coordinates

100

00

00

y

x

s

s

S

04/20/23 17

Y

X1,1 3,1

2,3

4,6

6,22,2

Scaling by factor (sScaling by factor (sxx, s, syy))

11yx

Pyx

P

SPP ysy

xsx

y

x

3D transformations

04/20/23 18

Matrix Composition

• Series of transformations can be concatenated into a composite matrix– E.g. how do we rotate about a point other than the origin?

04/20/23 19

How do How do we rotate we rotate about thisabout thispoint?point?

X

Y

a,b

Matrix Composition

• Apply a series of transformations:– Translate to the origin, T1

– Rotate, R– Translate back, T2

04/20/23 20

X

Y

a,b

X

Y Y

a,b

Matrix Composition

• Composite transformation: C = T2 R T1

– P’ = C P

100

10

01

1 b

a

T

04/20/23 21

100

001

010

R

100

10

01

2 b

a

T

translate(-a,-b)translate(-a,-b) rotate(90)rotate(90) translate(a,b)translate(a,b)

X

Y

a,b

X

Y Y

a,b

X

Premultiplying vs. Postmultiplying

04/20/23 22

When When concatenatingconcatenating a sequence of a sequence of matrices, amatrices, a graphics package maygraphics package may premultiply premultiply or or postmultiplypostmultiply them:them: A is A is premultiplied premultiplied by B: by B: B AB A A is A is postmultipliedpostmultiplied by B: by B: A BA B

E.g. we specify the sequenceE.g. we specify the sequence A, B, CA, B, C:: Using Using premultiplyingpremultiplying, the , the composite matrixcomposite matrix is is C C

(B A)(B A) Using Using postmultiplyingpostmultiplying, the , the composite matrixcomposite matrix is is

(A B) C(A B) C

OpenGL Geometric Transformation Functions

• OpenGL allows us to specify transformations using:1. Pre-defined transformations :

• glTranslate*• glRotate*• glScale*

2. Arbitary transformations by direct specification of matrices(Matrix coefficients):• glLoadMatrix*• glMultMatrix*These transformations are effected by the modelview matrix (will be

discussed latter)

04/20/23 23

OpenGL Geometric Transformation Functions

• glTranslate{f,d} (tx, ty, tz) Causes subsequently defined coordinate positions to be translated by the vector (tx,ty,tz), where tx, ty, tz are either floating-point or double precision numbers.

E.g. glTranslated(320.0, 260.0, 0.0); • glRotate{f,d} (theta, vx, vy, vz)

4 arguments:– 1st argument: rotation angle in degree– 2nd/3rd/4th arguments are a vector that defines the axis of rotation

E.g. glRotated(45.0, 0.0, 0.0, 1.0); // 45 degrees about z-axis• glScale{f,d} (sx, sy, sz)

– Causes subsequently defined coordinate positions to be scaled by factors sx,sy,sz along x, y, and z, respectively.– NOTE: setting any of these factors to zero can cause a processing error.

E.g. glScalef(2.0, -3.0, 1.0)

04/20/23 24

OpenGL Geometric Transformation Functions

• glLoadMatrix* (elements16)– Argument is a one-dimensional array of 16 matrix

coefficients– 4x4 matrix for homogeneous coordinates– Column-major order (i.e. coefficients of first column, then

coefficients of second column, etc.)

• glMultMatrix* (elements16)– Same as glLoadMatrix*, except it multiplies the specified

matrix by the current matrix …

04/20/23 25

OpenGL Geometric Transformation Functions

• OpenGL postmultiplies matrices with the current matrix– Remember, using postmultiplying, if we specify the

sequence A, B, C, the composite matrix is (A B) C (the last transform to be specified is the first one to be applied)

– The following functions postmultiply with the current matrix:• glTranslate*, glRotate*, glScale*, glMultMatrix*

• To set the current matrix to the identity matrix:– glLoadIdentity

04/20/23 26

OpenGL Geometric Transformation Functions

04/20/23 27

glLoadIdentity();glTranslated(320.0, 260.0, 0.0); glRotated(90.0, 0.0, 0.0, 1.0); glTranslated(-320.0, -260.0, 0.0);

X

Y

320,260

X

Y

Translate by (-320,-Translate by (-320,-260,0)260,0)

Rotate by 90Rotate by 90oo about z- about z-axisaxis

Translate by Translate by (320,260)(320,260)Y

320,260

X

Examples in OpenGL

04/20/23 28

void draw(){ // Make background colour yellow

glClearColor( 100, 100, 0, 0 );glClear ( GL_COLOR_BUFFER_BIT );// modelview matrix for modeling transformationsglMatrixMode(GL_MODELVIEW);// x-axisglColor3f(0,0,0);glBegin(GL_LINES);glVertex2f(0.0,0.0);glVertex2f(0.5,0.0);glEnd();// y-axisglColor3f(0,0,0);glBegin(GL_LINES);glVertex2f(0.0,0.0);glVertex2f(0.0,0.5);glEnd();// RED rectangleglColor3f( 1, 0, 0 );glRectf(0.1,0.2,0.4,0.3);

// Translate GREEN rectangleglColor3f( 0, 1, 0 );glTranslatef(-0.4, -0.1, 0.0);glRectf(0.1,0.2,0.4,0.3);// Rotate BLUE rectangleglColor3f( 0, 0, 1 );glLoadIdentity(); // reset the modelview matrixglRotatef(90, 0.0, 0.0,1.0);glRectf(0.1,0.2,0.4,0.3);// Scale MAGENTA rectangleglColor3f( 1, 0, 1 );glLoadIdentity(); // reset the modelview matrixglScalef(-0.5, 1.0, 1.0);glRectf(0.1,0.2,0.4,0.3);

// display rectanglesglutSwapBuffers(); }

Output

End

04/20/23 29