Chap.

3: Geometric Transformations

Summary
Motivation. !Euclidean transformations: translation and rotation. !Euclidean geometry. !Homogeneous coordinates. !Affine transformations: translation, rotation, scaling, and shearing. !Matrix representation of affine transformations. !Composition of geometric transformations in 2D and 3D. !Affine transformations in OpenGL. !OpenGL matrix operations and arbitrary geometric transformations. !Examples in OpenGL.
!

Motivation
!

Geometric transformations
Translation, rotation, reflection " Scaling, shearing " Orthogonal projection, perspective projection
"

Why are geometric transformations necessary?

for positioning geometric objects in 2D and 3D. " for modelling geometric objects in 2D and 3D " For viewing geometric objects in 2D and 3D.
"
3

Motivation (cont.): modelling objects in 2D

!

Geometric transformations can specify object modelling operations

" "

They allow us to define an object through its local coordinate system (modeling coordinates) They allow us to define an object several times in a scene with a global coordinate system (world coordinates)

Motivation (cont.): modelling objects in 2D

Scaling Rotation Translation

y
Scaling Translation Global Coordinates (world coordinates)

Local Coordinates (modeling coordinates)

Motivation (cont.): modelling objects in 2D

Local Coordinates

Global Coordinates

x
Positioning

Scaling

y x

Motivao (cont.): modelao de objectos em 2D

Local Coordinates

Global Coordinates

x
Rotation

y x

Translation

y x
7

Translation 2D
x=x+"x y=y+"y Translating a point (x, y) means to move it by ("x,"y).

"x=2 "y=1
8

http://encyclopedia.laborlawtalk.com/Linear_combination

Translation 2D: matrix representation

! x ' $ ! x $ ! 'x $ # y ' & = # y & + # 'y & " % " % " %

" "

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

Rotation 2D
(x, y) # (x, y) 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 centred at O such that #=$POQ.
10

# x ' = x cos! " y sin ! $ % y ' = x sin ! + y cos!

Rotation 2D: equations

(x, y) #

" x = r cos ! # $ y = r sin !

# x ' = r cos(! + " ) $ % y ' = r sin(! + " )

Expanding the expressions of x (x, y) and y, we have: $ x ' = r cos ! cos" # r sin ! sin " % & y ' = r cos ! sin " + r sin ! cos" % Replacing r cos(f) and r sin(f) by x and y in the previous equations, we get:

# x ' = x cos! " y sin ! $ % y ' = x sin ! + y cos!

11

Rotation 2D: matrix representation

! x ' $ ! cos' # y ' & = # sin ' " % " ( sin ' $ ! x $ # & cos' & % "y%

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

12

Fundamental problem of geometric transformations

! !

Translation is not a linear transformation of x and y. Consequence: we are not allowed to effect a sequence of transformations (tranlations 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!

13

http://www.geom.uiuc.edu/docs/reference/CRC-formulas/node6.html

Homogeneous coordinates
!

A triple of real numbers (x,y,t), with t&0, is a set of homogeneous coordinates for the point P with cartesian coordinates (x/t,y/t). Thus, the same point has many sets of homogeneous coordinates. So, (x,y,t) e (x,y,t) represent the same point if and only if there is some real scalar ' such that x= 'x, y= 'y and t= 't. So, if P has cartesian coordinates (x,y), one set of homogeneous coordinates for P is (x,y,1), being this set the most used in computer graphics.

P
Q

t =1
O
x

14

Translation and Rotation in 2D: homogeneous coordinates

! x ' $ ! 1 0 'x $ ! x $ # y ' & = # 0 1 'y & # y & # & # &# & # "1 & % # "0 0 1 & %# "1 & %

Translation

Rotation

! x ' $ ! cos' # y ' & = # sin ' # & # # "1 & % # " 0

( sin ' cos' 0

0$ !x$ #y& 0& &# & 1& %# "1 & %

15

http://planetmath.org/encyclopedia/Geometry.html

Euclidean metric geometry

! !

Set of geometric transformations: translations and rotations (also called isometries). By using homogeneous coordinates, these transformations can be represented through matrices 3x3. This enables the use of product operator for matrices to evaluate a sequence of translations and rotations The set of isometries I(n) in Rn and the concatenation operator form a group GI(n)=(I(n),). Fundamental metric invariant:
"

distance between points.

Other metric invariants:

" " " "

angles lengths areas volumes

16

2-dimensional Euclidean geometry : (R2,GI(2))

Definition of group: remind

A set C and an operation form a group (C, ) if: Closure Axiom. For all c1,c2(C, c1 c2 ( C. Identity Axiom. There exists an identity element i ( C such that c i=c=i c, for any c ( C. Inverse Element Axiom. For any c ( C, there exists an inverse elemen c-1 ( C such that c c-1 = i = c-1 c
"

" "

"

Associativity Axiom. For all c1 ,c2 ,c3 (C, c1 (c2 c3) = (c1 c2) c3

17

http://planetmath.org/encyclopedia/Geometry.html

Geometria afim
! ! !

It generalizes the Euclidean geometry. Set of affine transformations (or affinities): translation, rotation, scaling and shearing. The set A(n) of affinities in Rn and the concatenation operator form a group GA(n)=(A(n),). Fundamental invariant:
"

parallelism.

Other invariants:
" "

distance ratios for any three point along a straight line co-linearity

Examples:
" "

a square can be transformed into a rectangle a circle can be transformed into an ellipsis
18

2-dimensional affine geometry: (R2,GA(2))

Scaling 2D
" x ' = !x x # $ y ' = !y y
Scaling an object consists of multiplying each of its point component x and y by a scalar )x and )y, respectively.

)x = 2 )y = 2

19

Non-uniform scaling
" x ' = !x x # $ y ' = !y y
com

!x " !y

Non-uniform scaling an object consists of multiplying each of its point component x and y by a scalar )x and )y, respectively, with )x&)y.

)x = 2 )y = 0.5

20

Shearing
"x ' = x + ! x y # $y ' = y + ! y x
Shearing an object consists of linearly deforming it along either x-axis or y-axis or both.

*x = 1 *y = 0

21

Only linear transformations can be represented by matrices 2x2

Matrix representation 3x3 for 2D affine transformations

! x ' $ ! 1 0 'x $ ! x $ # y ' & = # 0 1 'y & # y & # & # &# & # "1 & % # "0 0 1 & %# "1 & % ! x ' $ ! 'x # y '& = # 0 # & # # "1 & % # "0 0 'y 0 0$ !x$ #y& 0& &# & 1& %# "1 & %

Translation
! x ' $ ! cos' # y ' & = # sin ' # & # # "1 & % # " 0 ( sin ' cos' 0

Scaling

0$ !x$ #y& 0& &# & 1& %# "1 & %

! x '$ ! 1 ' x # y ' & = #' # & # y 1 # "1 & % # "0 0

0$ !x$ #y& 0& &# & 1& %# "1 & %

Rotation

Shearing
22

Composition of 2D affine transformations

! !

The composition operator is the product of matrices. It is a consequence of the Associativity Axiom of the affine geometry and the dimension 3x3 of the matrices associated to 2D affine transformations. REMARK:
" " "

The order of the composition matters. The matrix product is not commutative. The affine geometry does not satisfy the Commutativity Axiom.

Example:

! x ' $ + ! 1 0 'x $ ! cos( # y ' & = - # 0 1 'y & # sin ( # & -# &# - 0 0 1 &# 0 # "1 & % ,# " %"

) sin ( cos( 0

0 $ ! *x #0 0& &# 1& %# "0

*y 0

0 $. ! x $ 0 #y& 0& &0 # & 0 1& 1& %/ # " %

23

Example: rotation ! = 30 of an segment PQ about P(2,0)

P
Wrong Rot(30)

P
Right Tr(-2) Rot(30) Tr(2)

24

Exemplo: rotation ! = 30 of an segment PQ about P(2,0)

P
! x ' $ ) ! 1 0 '2 $ ! cos( # y ' & = + # 0 1 0 & # sin ( # & +# &# + 0 0 1 &# 0 # "1 & % *# " %"

P
' sin ( cos( 0

P
0 $ ! 1 0 2 $, ! x $ # 0 1 0 &. # y & 0& &# &. # & . 1& 1& %# "0 0 1 & %- # " %
25

3D affine transformations
! x '$ !1 # y ' & #0 # &=# # z ' & #0 # & # "1 % " 0 0 1 0 0 0 0 1 0 0$ !x$ 0& #y& &# & 0& #z & &# & 1 % "1 % ! x ' $ ! 'x # y '& # 0 # &=# #z ' & # 0 # & # "1 % " 0 0 'y 0 0 0 0 'z 0 0$ !x$ 0& #y& &# & 0& #z & &# & 1 % "1 %

Identity

Scaling

! x '$ !1 # y ' & #0 # &=# # z ' & #0 # & # "1 % " 0

0 1 0 0

0 'x $ ! x $ 0 'y & # y & &# & 1 'z & # z & &# & 0 1 % "1 %

! x ' $ ! '1 # y '& # 0 # &=# #z ' & # 0 # & # "1 % " 0

0 1 0 0

0 0 1 0

0$ !x$ 0& #y& &# & 0& #z & &# & 1 % "1 %
26

Translation

Reflection across YZ

Other 3D affine transformations

Rotation about z-axis
! x ' $ ! cos' # y ' & # sin ' # &=# #z ' & # 0 # & # "1 % " 0 ( sin ' cos' 0 0 0 0 1 0 0$ !x$ 0& #y& &# & 0& #z & &# & 1 % "1 %

Rotation about y-axis

! x ' $ ! cos' # y '& # 0 # &=# # z ' & # ( sin ' # & # "1 % " 0 0 ! x '$ !1 # y ' & # 0 cos' # &=# # z ' & # 0 sin ' # & # 0 "1 % " 0

0 sin ' 1 0 0 cos' 0 0 0 ( sin ' cos' 0

0$ !x$ 0& #y& &# & 0& #z & &# & 1 % "1 % 0$ !x$ 0& #y& &# & 0& #z & &# & 1 % "1 %
27

Rotation about x-axis

Affine transformation in OpenGL

!

There are two ways to specify a geometric transformation:

" "

Pre-defined transformations: glTranslate, glRotate and glScale. Arbitary transformations by direct specification of matrices: glLoadMatrix,

glMultMatrix
! !

These transformations are effected by the modelview matrix. For that, we have to say that it is the current matrix. This is done through the statement glMatrixMode(GL_MODELVIEW). Let us say that the OpenGL has even a stack for each sort of matrix. It has 4 matrix sorts: modelview, projection, texture, and colour matrices. The modelview stack is initialized with the identity matrix.
28

Pre-defined affine transformations in OpenGL

!

glTranslate{f,d}(dx, dy, dz)

"

Causes subsequently defined coordinate positions to be translated by the vector (dx,dy,dz), where dx, dy, dz are either floating-point or double
precision numbers.

glRotate{f,d}(angle, vx, vy, vz)

"

Causes subsequently defined coordinate positions to be rotated by angle degrees about the axis (vx,vy,vz) through the origin.

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.
29

Matrix operations em OpenGL

!

glLoadIdentity()
"

Sets the current matrix to the identity.

glLoadMatrix{f,d}(<array>)
"

Sets the current matrix to be given by the 16 elements of argument 1dimensional array. The entries must be given in column major order.

"

glMultMatrix{f,d}(<array>)
"

Post-multiplies the current matrix M with the matrix N that is specified by the elements in the argument 1-dimensional array: M=M.N

30

Example: producing the modelview . matrix M=M2 M1

!

The sequence of statements is as follows:

glLoadIdentity(); glMultMatrixf(<array of M2>); glMultMatrixf(<array of M1>);

Note that the first transformation applied is the last specified.

31

Examples in OpenGL
Cumulative affine transformations Non-cumulative affine transformations Stack-controlled cumulative affine transformations

32

Cumulative affine transformations in 2D

/* * cum-2D-trf.cc - Cumulative 2D transformations * #include <OpenGL/gl.h> // Header File For The #include <OpenGL/glu.h> // Header File For The #include <GLUT/glut.h> // Header File For The #include <stdlib.h> Abel Gomes */ OpenGL Library GLu Library GLut Library

void draw(){ // Make background colour yellow glClearColor( 100, 100, 0, 0 ); glClear ( GL_COLOR_BUFFER_BIT ); // modelview matrix for modeling transformations glMatrixMode(GL_MODELVIEW); // x-axis glColor3f(0,0,0); glBegin(GL_LINES); glVertex2f(0.0,0.0); glVertex2f(0.5,0.0); glEnd(); // y-axis glColor3f(0,0,0); glBegin(GL_LINES); glVertex2f(0.0,0.0); glVertex2f(0.0,0.5); glEnd();

33

Cumulative affine transformations in 2D (cont.)

// RED rectangle glColor3f( 1, 0, 0 ); glRectf(0.1,0.2,0.4,0.3); // Translate GREEN rectangle glColor3f( 0, 1, 0 ); glTranslatef(-0.4, -0.1, 0.0); glRectf(0.1,0.2,0.4,0.3); // Rotate and translate BLUE rectangle glColor3f( 0, 0, 1 ); //glLoadIdentity();// reset the modelview matrix glRotatef(90, 0.0, 0.0,1.0); glRectf(0.1,0.2,0.4,0.3); // Scale, rotate and translate MAGENTA rectangle glColor3f( 1, 0, 1 ); //glLoadIdentity();// reset the modelview matrix glScalef(-0.5, 1.0, 1.0); glRectf(0.1,0.2,0.4,0.3); // display rectangles glutSwapBuffers(); // end of draw()

34

Cumulative affine transformations in 2D (cont.)

// Keyboard method to allow ESC key to quit void keyboard(unsigned char key,int x,int y) { if(key==27) exit(0); } int main(int argc, char ** argv) { glutInit(&argc, argv); // Double Buffered RGB display glutInitDisplayMode( GLUT_RGB | GLUT_DOUBLE); // Set window size glutInitWindowSize( 500,500 ); glutCreateWindow("Rectangles moving around: CUMULATIVE 2D transformations"); // Declare the display and keyboard functions glutDisplayFunc(draw); glutKeyboardFunc(keyboard); // Start the Main Loop glutMainLoop(); return 0; } 35

Cumulative affine transformations in 2D (cont.): output

36

Non-cumulative affine transformations in 2D

/* * noncum-2D-trf.cc - Non-cumulative 2D transformations * Abel Gomes #include <OpenGL/gl.h> // Header File For The OpenGL Library #include <OpenGL/glu.h> // Header File For The GLu Library #include <GLUT/glut.h> // Header File For The GLut Library #include <stdlib.h> void draw(){ // Make background colour yellow glClearColor( 100, 100, 0, 0 ); glClear ( GL_COLOR_BUFFER_BIT ); // modelview matrix for modeling transformations glMatrixMode(GL_MODELVIEW); // x-axis glColor3f(0,0,0); glBegin(GL_LINES); glVertex2f(0.0,0.0); glVertex2f(0.5,0.0); glEnd(); // y-axis glColor3f(0,0,0); glBegin(GL_LINES); glVertex2f(0.0,0.0); glVertex2f(0.0,0.5); glEnd(); */

37

Non-cumulative affine transformations in 2D (cont.)

// RED rectangle glColor3f( 1, 0, 0 ); glRectf(0.1,0.2,0.4,0.3); // Translate GREEN rectangle glColor3f( 0, 1, 0 ); glTranslatef(-0.4, -0.1, 0.0); glRectf(0.1,0.2,0.4,0.3); // Rotate BLUE rectangle glColor3f( 0, 0, 1 ); glLoadIdentity(); // reset the modelview matrix glRotatef(90, 0.0, 0.0,1.0); glRectf(0.1,0.2,0.4,0.3); // Scale MAGENTA rectangle glColor3f( 1, 0, 1 ); glLoadIdentity(); // reset the modelview matrix glScalef(-0.5, 1.0, 1.0); glRectf(0.1,0.2,0.4,0.3); // display rectangles glutSwapBuffers(); // end of draw()

38

Transformaes 2D s/ acumulao (cont.)

// Keyboard method to allow ESC key to quit void keyboard(unsigned char key,int x,int y) { if(key==27) exit(0); } int main(int argc, char ** argv) { glutInit(&argc, argv); // Double Buffered RGB display glutInitDisplayMode( GLUT_RGB | GLUT_DOUBLE); // Set window size glutInitWindowSize( 500,500 ); glutCreateWindow("Rectangles moving around: NON-CUMULATIVE 2D transformations"); // Declare the display and keyboard functions glutDisplayFunc(draw); glutKeyboardFunc(keyboard); // Start the Main Loop glutMainLoop(); return 0; } 39

Non-cumulative affine transformations in 2D (cont.): output

40

Stack-controlled cumulative affine transformations in 2D

/* * stack-cum-2D-trf.cc - Stack-cumulative 2D transformations * Abel Gomes #include <OpenGL/gl.h> // Header File For The OpenGL Library #include <OpenGL/glu.h> // Header File For The GLu Library #include <GLUT/glut.h> // Header File For The GLut Library #include <stdlib.h> void draw(){ // Make background colour yellow glClearColor( 100, 100, 0, 0 ); glClear ( GL_COLOR_BUFFER_BIT ); // modelview matrix for modeling transformations glMatrixMode(GL_MODELVIEW); // x-axis glColor3f(0,0,0); glBegin(GL_LINES); glVertex2f(0.0,0.0); glVertex2f(0.5,0.0); glEnd(); // y-axis glColor3f(0,0,0); glBegin(GL_LINES); glVertex2f(0.0,0.0); glVertex2f(0.0,0.5); glEnd(); */

41

Stack-controlled cumulative affine transformations in 2D (cont.)

// RED rectangle glColor3f( 1, 0, 0 ); glRectf(0.1,0.2,0.4,0.3); // Translate GREEN rectangle glColor3f( 0, 1, 0 ); glTranslatef(-0.4, -0.1, 0.0); glRectf(0.1,0.2,0.4,0.3); // save modelview matrix on the stack glPushMatrix(); // Rotate and translate BLUE rectangle glColor3f( 0, 0, 1 ); glRotatef(90, 0.0, 0.0,1.0); glRectf(0.1,0.2,0.4,0.3); // restore modelview matrix from the stack glPopMatrix();

// Scale and translate MAGENTA rectangle glColor3f( 1, 0, 1 ); glScalef(-0.5, 1.0, 1.0); glRectf(0.1,0.2,0.4,0.3); // display rectangles glutSwapBuffers(); // end of draw()

42

Stack-controlled cumulative affine transformations in 2D (cont.):

// Keyboard method to allow ESC key to quit void keyboard(unsigned char key,int x,int y) { if(key==27) exit(0); } int main(int argc, char ** argv) { glutInit(&argc, argv); // Double Buffered RGB display glutInitDisplayMode( GLUT_RGB | GLUT_DOUBLE); // Set window size glutInitWindowSize( 500,500 ); glutCreateWindow("Rectangles moving around: STACK-CUMULATIVE 2D transformations"); // Declare the display and keyboard functions glutDisplayFunc(draw); glutKeyboardFunc(keyboard); // Start the Main Loop glutMainLoop(); return 0; } 43

Stack-controlled cumulative affine transformations in 2D (cont.): output

44

FIM