two dimensional geometric transformations ca 302 computer graphics and visual programming aydın...

TWO DIMENSIONAL GEOMETRİC

TRANSFORMATİONS

CA 302 Computer Graphics and Visual Programming

Aydın Öztürk

[email protected]://www.ube.ege.edu.tr/~ozturk

Two Dimensional Geometric Transformations

Basic Transformations

Translation

P

P'

x

yyx tyytxx ','

y

x

t

t

y

x

y

xTP'P ,

'

',

TPP'


Translation: Example

P

P'

x

y

1

1,

2

1TP

3

2

1

1

2

1TPP'

1 2

3

2


Rotation

x

y

y)(x,P θ

φ

)('

)('

rSiny

rCosx

)(),( rSinyrCosx

)()('

)()('

yCosxSiny

ySinxCosx

P′=(x′,y′)

r

Rotation (Cont.)

R.PP'

y

x

y

x

CosSin

SinCos

CosSin

SinCosR

'

'



Rotation:Example

x

y

(1,2)y)(x,P θ

φ

P′=(x′,y′)=(0.36, 2,23)

r

23.2

36.0

2

1

2/32/1

2/12/3

'

'

2/32/1

2/12/3

2

1

2/1)(2/3,30

y

x

R

y

x

SinCoso

CosSin

SinCos

Scaling

yx syysxx .',.'

PSP

'

.0

0

'

'

y

x

s

s

y

x

y

x

x

y


Scaling

2

1.

30

02

'

''

y

xPSP

x

y


2

1

3,2

y

x

ss yx

3x3 Matrix Representations

We can combine the multiplicative and translational terms for 2D transformations into a single matrix representation by expanding the 2x2 matrix representations to 3x3 matrices.

This allows us to express all transformation equations as matrix multiplications.

Homogeneous Coordinates

We represent each Cartesian coordinate position (x,y) with the homogeneous coordinate triple

where

),,( hyx hh

hy

yhx

x hh ,

Homogeneous Coordinates(cont.)

Thus, a general homogeneous coordinate representation can also be written as

For 2D transformations we choose h=1.

Each 2D position is represented with

homogeneous coordinates

),.,.( hyhxh

)1,,( yx

Translation in homogeneous coordinates

1

.

100

10

01

1

'

'

y

x

t

t

y

x

y

x

PTP ),(' yx tt


Translation: Example

P

P'

x

y

1 2

3

2

0

3

2

0

2

1

.

100

110

101

1

'

'

' y

x

P

PTP ),(' yx tt

1

1

1

1

,

1

2

1

y

x

t

t

TP

Rotation in homogeneous coordinates

1

.

100

0

0

1

'

'

y

x

CosSin

SinCos

y

x

PRP ).('

Rotation in homogeneous coordinates

0

23.2

36.0

1

2

1

.

100

02/32/1

02/12/3

1

'

'

y

x

P'

PRP ).('

1

2

1

1

2/1)(2/3,30

y

x

SinCoso

P

Rotation: Example

Scaling in homogeneous coordinates

1

.

100

00

00

1

'

'

y

x

s

s

y

x

y

x

PSP ).,(' yx ss

Scaling in homogeneous coordinates

1

6

2

1

2

1

.

100

030

002

1

'

'

y

x

P'

PSP ).,(' yx ss

1

2

1

1

3,2

y

x

ss yx

P

Composite Transformations:Translation

If two successive translation are applied to a point P, then the final transformed location P' is calculated as

100

10

01

100

10

01

.

100

10

01

21

21

1

1

2

2

yy

xx

y

x

y

x

tt

tt

t

t

t

t

PTPTTP ),(),(),('21211122 yyxxyxyx tttttttt

Composite Transformations:Rotation

100

0)()(

0)()(

100

0

0

.

100

0

0

2121

2121

11

11

22

22

CosSin

SinCos

CosSin

SinCos

CosSin

SinCos

PRP )(' 21

Composite Transformations:Scalings

100

00

00

100

00

00

100

00

00

21

21

1

1

2

2

yy

xx

y

x

y

x

ss

ss

s

s

s

s

),(),(),(21211122 yyxxyxyx ssssssss SSS

General Pivot Point Rotation

Steps: -Translate the object so that the pivot point

is moved to the coordinate origin. -Rotate the object about the origin. -Translate the object so that the pivot point

is returned to its original position.

General Pivot Point Rotation(Cont.)

General Pivot Point Rotation(Cont.)

100

)1(

)1(

100

10

01

.

100

1

0

.

100

10

01

SinxCosyCosSin

SinyCosxSinCos

y

x

CosSin

SinCos

y

x

rr

rr

r

r

r

r

),,(),()(),( rrrrrr yxyxyx RTRT

General Fixed Point Scaling

Steps: -Translate the object so that the fixed

point coincides with the coordinate origin. -Scale the object about the origin. -Translate the object so that the pivot

point is returned to its original position.


(xr, yr) (xr, yr)


100

)1(0

)1(0

100

10

01

.

100

00

00

.

100

10

01

yfy

xfx

f

f

y

x

f

f

sys

sxs

y

x

s

s

y

x

),,,(),(),(),( yxffffyxff ssyxyxssyx STST

Concatenation Properties

Matrix multiplication is associative

Transformation product is not commutative

)()( CBACBACBA

ABBA

Other Transformations

Reflection

About x-axis About y-axis

x

y

1

2 3

2 3

1

100

010

001

100

010

001


x

y

1

2

3

2

1

3

100

010

001

Reflection about the origin


Reflection about the line y=x.

x

y

2

1

3

100

001

010

y = x

2

3


100

010

01xhs

Shear

x-direction shear

x

x

y

y

Transformation Between Coordinate Systems

Individual objects may be defined in their local cartesian reference system.

The local coordinates must be transformed to position the objects within the scene coordinate system.


Steps for coordinate transformation

-Translate so that the origin (x0, y0 ) of the x′-y′ system is moved to the origin of the x-y system.

-Rotate the x′ axis on to the axis x.


y

x

x′y'

θ

x0

y0

0


y

x

x′

x0

y0

0

y′

θ


y

xx′ x0

y0

0

y′


),()(

100

0

0

)(

100

10

01

),(

00'',

0

0

00

yx

CosSin

SinCos

y

x

yx

yxxy

TRM

R

T


y

x

x′y'

θ

x0

y0

0

4,3

30,3,2 00

yx

yx o

00.1

37.0

37.1

1

4

3

00.100.000.0

60.186.050.0

23.350.086.0

'

100

02/32/1

02/12/3

)(

100

310

201

),(

'',

00

PMP

R

T

yxxy

yx

Example

• P


An alternative method: -Specify a vector V that indicates the direction for the positive y′ axis. Let

-Obtain the unit vector u=(ux ,u y) along the x′ axis by rotating v 900 clockwise.

),( yx vvVV

v


-Elements of any rotation matrix can be expressed as elements of orhogonal unit vectors. That is, the rotation matrix can be written as

100

0

0

yx

yx

vv

uu

R


y

x

x′y′

x0

y0

0

V

OpenGL Geometric Transformation Functions

In the OpenGL library, a separate function is available for each of the basic transformations.

All transformations are specified in 3D.

Basic OpenGL Geometric Transformations

A 4x4 transformation matrix is constructed with the following routines

glTranslate*(tx, ty, tz);

glRotate*(theta, vx, vy, vz);The vector (vx, vy, vz) defines the rotation axis that passes through the origin

glScale* (sx, sy, sz);

Basic OpenGL Geometric Transformations

Examples:

glTranslatef ( 25.0, -10.0, 0.0); glRotatef ( 90.0, 0.0, 0.0, 1.0); glScalef ( 2.0, -3.0, 0.0);

OpenGL Matrix Operations

glMatrixMode ( ..........);

has the following arguments types:

GL_PROJECTION GL_MODELVIEW

(Other two are texture and color)


glMatrixMode (GL_PROJECTION);

designates the matrix that is to be used for projection transformation.

This transformation determines how a scene is to be projected onto the screen.


glMatrixMode (GL_MODELVIEW);

designates the 4×4 modelview matrix as the current matrix that is to be used for the geometric transformation. In this case the matrix is referred as modelview matrix.

The OpenGL transformation routines are used to modify the modelview matrix. Which is then applied to transform coordinate positions in a scene.


Once we are in the modelview mode, a call to a transformation routine generates a matrix that is multiplied by the current matrix.

In addition, we can assign values to the elements of the current matrix


To assign the identity matrix to the current matrix

glLoadIdentity ( );

To assign other values to the current matrix

glLoadMatrix* ( elements16);

(The elements must be specified in colum major order that is the first four elements are listed in the first column...etc.)


Example:

glMatixMode(GL_MODELVIEW);GLfloat elems [16];GLint k;For (k=0; k<16; k++)

elems[k]=float(k);glLoadMatrixf( elems);


The resulting matrix:

0.150.110.73.0

0.140.100.62.0

0.130.90.51.0

0.120.80.40.0


We can also concatenate a specified matrix with the current matrix:

glMultMatrix* ( otherElements16);

In this case the current matrix is postmultiplied by the matrix otherElements16.

Assuming the current matrix is the modelview matrix then the updated modelview matrix is computed as

M=M•M'


Example:

glMatrixMode(GL_MODELVIEW);

glLoadIdentity( ); //Set current matrix to the identity

glMultMatrixf(elemsM2); //Postmultiply identity with M2

glMultMatrixf(elemsM1); // Postmultiply M2 with M1

OpenGL Matrix Stacs

OpenGL maintains a matrix stack.Initially each stack contains only the identity matrix.Any time during the processing of a scene, the top matrix

on each stack is called the current matrix for that mode.After we specify the viewing and geometric

transformations, the the top of the modelview matrix stack is the 4x4 composite matrix that combines the viewing and the various geometric ransformations.

OpenGL Matrix Stacs

In some cases, we may want to create multiple views and transformation sequences, and then save the composite matrix for each.

Therefore OpenGL suports a modelview stack depth of at least 32 so that at least 32 matrices can be saved modelview stack.

We can determine the number of positions available in the modelview stack with the command

GetIntegerv (GL_MAX_MODELVIEW_STACK_DEPTH, stackSize);

GetIntegerv (GL_MAX_PROJECTION_STACK_DEPTH, stackSize);

GetIntegerv (GL_MAX_TEXTURE_STACK_DEPTH, stackSize);GetIntegerv (GL_MAX_COLOR_STACK_DEPTH, stackSize);

OpenGL Matrix Stacs

To find out how many matrices are currently in the stack

GetIntegerv (GL_MODELVIEW_STACK_DEPTH, numMat);

GetIntegerv (GL_PROJECTION_STACK_DEPTH, numMat);

GetIntegerv (GL_TEXTURE_STACK_DEPTH, numMat);GetIntegerv (GL_COLOR_STACK_DEPTH, numMat);

OpenGL Matrix Stacs

We have the following commands for processing the matrices in a stack:

glPushMatrix( ); glPopMatrix( );

glPushMatrix copies the current matrix at the top of the active stack and store that copy in the second position. This gives us duplicate matrices at the top two positions of the stack.

glPopMatrix destroys the matrix at the top of the stack.

Matrix Operations: Programming example-1

Original position

Original position

Original position

Translated position

Rotated position

Scaled-Reflected position


void myDisplay (void) {glColor3f(1.0, 0.0, 0.0);glRecti (100, 100, 200,150); //Display red rectangle

glColor3f(0.0, 1.0, 0.0);glTranslatef (100.0, 100.0, 0.0); //Set translation parametersglRecti (100, 100, 200,150); //Display green, translated rectangle

glColor3f(0.0, 0.0, 1.0);glLoadIdentity (); //Reset current matrix to identityglRotatef (30.0, 0.0, 0.0, 1.0); //Set 90 degree rotation about z-axisglRecti (100, 100, 200,150); //Display blue, translated rectangle

glColor3f(0.5, 0.5, 0.5);glLoadIdentity (); //Reset current matrix to identity

//Try without glLoadIdentity ();to se what happens!

glScalef (1.0, 0.5, 1.0); //Set Set scale parametersglRecti (100, 100, 200,150); glFlush (); }


In the above program segment we apply each transformation one at a time.

Initially the modelview matrix is the identity matrix and the blue rectangle is displayed.

Next the current color is set to red, translation prameters are specified and red rectangle is displayed

Since we do not want to combine transformations, we next reset the current matrix to identity. Then rotation matrix is constructed and concatanated with the current matrix ( the identity matrix).

The same process is repeated once more to to display a scaled and reflected rectangle.


It is more efficient to use the stack-processing functions than to use the matrix manipulating functions.

This is particularly true when we want to several changes in the viewing or geometric transformations.

In the following code we repeat the rectangle transformations of the preceeding example using stack processing instead of the glLoadIdentity function

Matrix Operations: Programming example-1void myDisplay (void) {glClear (GL_COLOR_BUFFER_BIT);glLoadIdentity ();glColor3f(1.0, 0.0, 0.0);glRecti (100, 100, 200,150); //Display red rectangle

glPushMatrix ( ); //Make copy of identity matrix.glColor3f(0.0, 1.0, 0.0);glTranslatef (100.0, 100.0, 0.0); //Set translation parametersglRecti (100, 100, 200,150); //Display green rectangle glPopMatrix ( ); //Throw away the translation matrix.

glPushMatrix ( ); //Make copy of identity (top) matrixglColor3f(0.0, 0.0, 1.0);glRotatef (30.0, 0.0, 0.0, 1.0); //Set 30 degree rotation about z-axisglRecti (100, 100, 200,150); //Display blue rectangleglPopMatrix ( ); //Throw away the rotation matrix.glColor3f(0.5, 0.5, 0.5);glScalef (1.0, 0.5, 1.0); //Set scale parametersglRecti (100, 100, 200,150); glFlush (); }

two dimensional geometric transformations ca 302 computer graphics and visual programming aydın...

Documents

coordinate origin

coordinate transformation

coordinate systemssteps

d transformations

scene coordinate system

point p

xy system

x axis