1. TWO DIMENSIONAL GEOMETRIC TRANSFORMATIONS CA 302 Computer Graphics and Visual Programming Aydın Öztürk aydin.ozturk@ege.edu.tr http://www.ube.ege.edu.tr/~ozturk

2. Two Dimensional Geometric Transformations

3. Basic Transformations Translation P P'P' x y

4. Basic Transformations Translation: Example P P'P' x y 12 3 2

5. Basic Transformations Rotation x y θ φ P′=(x′,y′) r

6. Rotation (Cont.) Basic Transformations

7. Rotation:Example x y θ φ P′=(x′,y′)=(0.36, 2,23) r

8. Scaling x y Basic Transformations

9. Scaling x y Basic Transformations

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

11. Homogeneous Coordinates We represent each Cartesian coordinate position (x,y) with the homogeneous coordinate triple where

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

13. Translation in homogeneous coordinates

14. Basic Transformations Translation: Example P P'P' x y 12 3 2

15. Rotation in homogeneous coordinates

16. Rotation: Example

17. Scaling in homogeneous coordinates

19. Composite Transformations:Translation If two successive translation are applied to a point P, then the final transformed location P' is calculated as

20. Composite Transformations:Rotation

21. Composite Transformations:Scalings

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

23. General Pivot Point Rotation(Cont.)

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

26. General Fixed Point Scaling l (x r, y r ) (x r, y r )

27. General Fixed Point Scaling

28. Concatenation Properties Matrix multiplication is associative Transformation product is not commutative

29. Other Transformations Reflection About x-axis About y-axis x y 1 23 23 1

30. Other Transformations x y 1 2 3 2 1 3 Reflection about the origin

31. Other Transformations Reflection about the line y=x. x y 2 1 3 y = x 2 3

32. Other Transformations Shear x-direction shear lxlx lxlx lyly lyly

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

34. Transformation Between Coordinate Systems Steps for coordinate transformation -Translate so that the origin (x 0, y 0 ) of the x′-y′ system is moved to the origin of the x-y system. -Rotate the x′ axis on to the axis x.

35. Transformation Between Coordinate Systems y x x′ y' θ x0x0 y0y0 0

36. Transformation Between Coordinate Systems y x x′ x0x0 y0y0 0 y′ θ

37. Transformation Between Coordinate Systems y x x′ x0x0 y0y0 0 y′

38. Transformation Between Coordinate Systems

39. y x x′ y' θ x0x0 y0y0 0 Example P

40. Transformation Between Coordinate Systems An alternative method: -Specify a vector V that indicates the direction for the positive y′ axis. Let -Obtain the unit vector u=(u x,u y ) along the x′ axis by rotating v 90 0 clockwise.

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

42. Transformation Between Coordinate Systems y x x′ y′ x0x0 y0y0 0 V

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

44. Basic OpenGL Geometric Transformations A 4 x 4 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);

45. 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 );

46. OpenGL Matrix Operations glMatrixMode (..........); has the following arguments types: GL_PROJECTION GL_MODELVIEW (Other two are texture and color)

47. OpenGL Matrix Operations 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.

48. OpenGL Matrix Operations 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.

49. OpenGL Matrix Operations 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

50. OpenGL Matrix Operations 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.)

51. OpenGL Matrix Operations Example: glMatixMode(GL_MODELVIEW); GLfloat elems [16]; GLint k; For (k=0; k<16; k++) elems[k]=float(k); glLoadMatrixf( elems);

52. OpenGL Matrix Operations The resulting matrix:

53. OpenGL Matrix Operations 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=MM'

54. OpenGL Matrix Operations Example: glMatrixMode(GL_MODELVIEW); glLoadIdentity( ); //Set current matrix to the identity glMultMatrixf(elemsM2); //Postmultiply identity with M2 glMultMatrixf(elemsM1); // Postmultiply M2 with M1

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

56. 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);

57. 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);

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

59. Matrix Operations: Programming example-1 Original position Translated position Rotated position Scaled-Reflected position

60. Matrix Operations: Programming example-1 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 parameters glRecti (100, 100, 200,150); //Display green, translated rectangle glColor3f(0.0, 0.0, 1.0); glLoadIdentity (); //Reset current matrix to identity glRotatef (30.0, 0.0, 0.0, 1.0); //Set 90 degree rotation about z-axis glRecti (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 parameters glRecti (100, 100, 200,150); glFlush (); }

61. Matrix Operations: Programming example-1 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.

62. Matrix Operations: Programming example-2 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

63. Matrix Operations: Programming example-1 void 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 parameters glRecti (100, 100, 200,150); //Display green rectangle glPopMatrix ( ); //Throw away the translation matrix. glPushMatrix ( ); //Make copy of identity (top) matrix glColor3f(0.0, 0.0, 1.0); glRotatef (30.0, 0.0, 0.0, 1.0); //Set 30 degree rotation about z-axis glRecti (100, 100, 200,150); //Display blue rectangle glPopMatrix ( ); //Throw away the rotation matrix. glColor3f(0.5, 0.5, 0.5); glScalef (1.0, 0.5, 1.0); //Set scale parameters glRecti (100, 100, 200,150); glFlush (); }