1

Chapter 4

2-D Transformations

Cartesian coordinates Linear transformations, affine transformations Homogeneous coordinates Translations Scaling Rotation Reflection Combinations of transformations Animations

2

Cartesian coordinates A 2D point is represented by a 2-tuple .

For convenience, the 2-tuple often written as (x, y).

A 2-tuple can also be interpreted as a vector. The 2-tuple defines the direction and length of the vector, but not the position.

y

x

y

x

(x, y)

y

x

(x, y)

3

Translation A translation moves a point to a new position by adding a

displacement vector to it.

Eg, The following translates the point to

yxy

xTyyTxx

T

T

y

x

y

x

' ,' .

'

'

6

4

13

3

7

7

13

3

7

7

(3,13)

(7,7)

6

4

4

Linear Transformations A linear transformation moves a point to a new position

by multiplying it with a non-singular matrix.

Eg, The following transforms the point (2, 3) to (3, 13)

dycxybyaxxy

x

dc

ba

y

x

' ,' .

'

'

3

2

32

10

13

3

(3,13)

32

10

(2,3)

A non-singular matrix, M, has the inverse M-1 such that MM-1 =M-1M= I. It denotes an one-to-one mapping.

5

Affine Transformations

An affine transformation is a linear transformation followed by a translation. Its 2D general form is

y

x

T

T

y

x

dc

ba

y

x

'

'

Affine transformations preserve lines. Many geometric movements of objects, eg,

translations, rotations, and scalings are affine transformations.

Homogeneous coordinates A point in homogeneous coordinates (x, y, w), w ≠ 0,

corresponds to the 2D point (x/w, y/w) in Cartesian coordinates.

Conceive that the Cartesian coordinates axes lies on the plane of w = 1. The intersection of the plane and the line connecting the origin and (x, y, w) gives the corresponding Cartesian coordinates.

y

w

xw = 0

(x, y, w)

w = 1

(x/w, y/w, 1)

x

y

7

For example, both the points (6, 9, 3) and (4, 6, 2) in the homogeneous coordinates corresponds to (2, 3) in the Cartesian coordinates.

Conversely, the point (2, 1) of the Cartesian corresponds to (2, 1, 1), (4, 2, 2) or (6, 3, 3) of the homogeneous

Homogeneous coordinates are used in many graphics systems because all practical transformations can be expressed as matrix multiplications. Such uniformity enhances efficiency.

8

Translationmove an object to a new position

The coord. of the new position: x’ = x + 2, y’ = y + 1

In general, x’ = x + Tx, y’ = y + Ty In homogeneous coordinates

(1,1)(5,1)

(1,3) (x,y)

(3,2)(7,2)

(3,4) (x’, y’)

1

2

7

1

1

5

100

110

201

Eg, .

100

10

01

'

'

'

w

y

x

T

T

w

y

x

y

x

9

Scaling relative to the origin (changing size)

The new position: x’ = 2x, y’ = y/2In general, x’ = Sx x, y’ = Sy y

In homogeneous coordinates

(1,1)(5,1)

(1,3) (x,y)

(2,1/2)(10,1/2)

(2,3/2)

(x’, y’)

1

2

1

3

1

100

00

002

Eg, .

100

00

00

'

'

'

23

21

w

y

x

S

S

w

y

x

y

x

10

Rotation about the origin

In Cartesian, x’ = r cos(+)

= r cos cos r sin sin= x cos - y sin y’ = r sin(+)

= r sin cos + r cos sin= x sin + y cos

(x,y)

(x’,y’)

r

r

x=r cos

The angle, , is measured from the original vector to the new one in counterclockwise.

The parameters of sin() and cos() are provided in radians.

radians is 180o.

11

Eg, to rotate 45o (/4 radian)

sin /4 = cos /4 = 0.7071

x’ = x cos - y sin = 0.7071 (x - y)

y’ = x sin + y cos = 0.7071 (x + y) In homogeneous coordinates

(1,1)(5,1)

(1,3) (x,y)

(0,1.4)

(2.8, 4.2)

(-1.4, 2.8)

(x’, y’)

1

2.4

8.2

1

1

5

100

0707.707.

0707.707.

Eg, .

100

0cossin

0sincos

'

'

'

w

y

x

w

y

x

Conduct a sequence of transformationsTranslate the right-angle vertex

to the origin (Tx = -1, Ty = -1)

Rotate 45o (/4 radian)

sin /4 = cos /4 = 0.7071

(1,1)(5,1)

(1,3)

(2.8,2.8)(-1.4,1.4)

(0,0) (4,0)

(0,2)

.

100

10

01

'

'

'

w

y

x

T

T

w

y

x

y

x

'

'

'

100

0cossin

0sincos

"

"

"

w

y

x

w

y

x

13

100

cossincossin

sincossincos

100

10

01

100

0cossin

0sincos

'

'

'

100

0cossin

0sincos

"

"

"

w

y

x

TT

TT

w

y

x

T

T

w

y

x

w

y

x

yx

yx

y

x

The computation of [ ] from [ ] [ ] is called matrix multiplication. The general form is:

A sequence of transformations can be lumped in a single matrix via matrix multiplications

dhcfdgce

bhafbgae

hg

fe

dc

ba

14

In OpenGL, all the model transformations are accumulated in the current transformation matrix (CTM). All vertices of an object will be transformed via this matrix before the object is drawn.

A system stack is provided for storing the backup copies of the CTM during execution.

We usually save the CTM in the stack before the drawing of a transformed object. And restore the original CTM afterwards.

CTM

Vertices Vertices

***

***

***

Stack

15

To save a copy of the CTM in the stack glPushMatrix();

CTM

Vertices Vertices

***

***

***

Stack

***

***

***

. . .

CTM

Vertices Vertices

***

***

***

Stack

***

***

***

***

***

***

. . .

(before)

(after)

16

To overwrite the CTM with the top matrix in the stack

glPopMatrix();

***

***

***

CTM

Vertices Vertices

Stack

***

***

***

. . .

***

***

***

***

***

***

CTM

Vertices Vertices

Stack

***

***

***

. . .

(before)

(after)

17

To specify a translation glTranslatef( double Tx, double Ty, 0.0)

The system first generates the matrix representing the translation. Then post multiplies this matrix with the CTM. Finally overwrites the CTM with the result.

***

***

***

CTM

Vertices Vertices

***

***

***

CTM

Vertices Vertices

100

10

01

Ty

Tx

Before

After

18

Example

//draw a white head at (0,0) glColor3f( 1.0, 1.0, 1.0);

draw_head();

//draw a green head at (-2,-1) glColor3f( 0.0, 1.0, 0.0); glPushMatrix();

glTranslatef( -2.0, -1.0, 0.0);draw_head();

glPopMatrix();

glColor3f( 1.0, 1.0, 1.0); //draw a title hkgluBitMapString( -1.9, 1.8, "Translation of (-2, -

1)” );

Progressive Translation

19

To specify a scaling glScalef( double Sx, double Sy, 1.0)

Generate a matrix for the

scaling. Post multiply it with

the CTM

//Scale by Sx = 1.5, Sy = 2 glPushMatrix();

glScalef( 1.5, 2.0, 1.0);draw_head();

glPopMatrix();

In general, an object moves away from the origin when scaled up, moves towards when scaled down

Progressive Scaling

20

To specify a rotation glRotatef( double degree, 0.0, 0.0, 1.0)

glPushMatrix(); glRotatef( 45.0, 0.0, 0.0, 1.0); draw_head(); glPopMatrix();

(Note that the angles provided

to gl functions are expressed in

degrees instead of radians.)

Progressive Rotation

First to scale( Sx =1.5, Sy =2) and then translate the picture to (-2, -1).

Note that the transformations are specified in reverse order: first call glTranslatef(...), and then glScalef(…)

z

y

x

Sy

Sx

T

T

z

y

x

T

T

w

y

x

z

y

x

Sy

Sx

w

y

x

y

x

y

x

100

00

00

100

10

01

'

'

'

100

10

01

"

"

"

100

00

00

'

'

'

***

***

***

CTM

Vertices Vertices

100

10

01

Ty

Tx

100

00

00

Sy

Sx

22

The program

glPushMatrix(); glTranslatef( -2.0, -1.0, 0.0); glScalef( 1.5, 2.0, 1.0); draw_head(); glPopMatrix();

Progressive (Scaling + Translation)

23

Scaling relative to a fix point

//Scaling relative to the //apex of the nose at (xf, yf)glPushMatrix(); glTranslatef( xf, yf, 0.0); glScalef( sx, sy, 1); glTranslatef( -xf, -yf, 0); draw_head();glPopMatrix();

(xf, yf)

Scaling relative to a fix point

24

Rotation about a pivot point

//Rotate 90 degree about //the apex of the noseglPushMatrix(); glTranslatef( xf, yf, 0.0); glRotatef( 90., 0.0, 0.0, 1.0); glTranslatef( -xf, -yf, 0); draw_head();glPopMatrix();

(xf, yf)

Rotation about a pivot point

25

Reflection about the x axis

The transformation matrix is the same as scaling matrix with Sx = 1 and Sy = 1. Thus, the reflection about the x axis can be achieved by calling

glScalef( 1.0, -1.0, 1.0)

Similarly, the reflection about the y axis is achieved by calling

glScalef( -1.0, 1.0, 1.0)

.

100

010

001

'

'

'

w

y

x

w

y

x

(x,y)

(x,-y)

26

Example

glPushMatrix(); glScalef( 1, -1, 1); draw_head(); glPopMatrix();

Reflection about x-axis

27

Reflection along a lineTranslate (0, -b) so that the line

passes through the originRotate the line onto the x axis by -o

Reflect about the x axisBackward rotatebackward translate

(Be reminded that these operations must be specified in reverse order.)

y =mx+b

)(tan 1 m

b

28

// To draw the reflection of the head about y = 2x + 0.5// (we need to convert theta from radians to degrees)double m = 2.0, b = .5, theta = atan(m)*180.0/3.1416;

glPushMatrix(); glTranslatef( 0, b, 0.); glRotatef( theta, 0.0, 0.0, 1.0);

glScalef( 1, -1, 1); //Reflect

glRotatef( -theta, 0.0, 0.0, 1.0); glTranslatef( 0, -b, 0.); draw_head();glPopMatrix();

Reflection against an arbitrary line