1. Transformations Introduction to Computer Graphics and Animation
(Principle of Computer Graphics)
Rattapoom Waranusast

2. Modeling Transformations
In OpenGL
Translation
Scaling
Rotation
Is called modeling transformations

3. Translation
glTranslatef(p, q, r);

4. Experiment 7.1 Run box.cpp, Try to comment out
glTranslatef(0.0, 0.0, -15.0);
Replace translation command with
glTranslatef(0.0, 0.0, -10.0);
glTranslatef(0.0, 0.0, -5.0);
glTranslatef(0.0, 0.0, -25.0);
glTranslatef(0.0, 10.0, -15.0);
glTranslatef(10.0, 10.0, -15.0);

5. Experiment 7.1

6. Exercise 7.1 To what point is (-2.0, 3.0, 9.0) transformed by
glTranslatef(3.0, 1.0, -8.0);
What are the OpenGL translation that take
(3.0, -1.0, 2.0) to (3.0, 5.0, 9.0)
(-1.0, 0.0, 5.0) to (2.0, 1.0, 0.0)
(-2.0, -3.0, 1.0) to (0.0, 0.0, 0.0)

7. Scaling
glScalef(u, v, w);

8. Experiment 7.2 Run box.cpp, Add a scaling command
glScalef(2.0, 3.0, 1.0);
right after the translation command.
Replace cube command with
glutWireTeapot(5.0);
Replace scaling command with
glScalef(-2.0, 3.0, 1.0);
glScalef(2.0, -3.0, 1.0);
glScalef(2.0, 3.0, -1.0);
glScalef(-2.0, -3.0, 1.0);
glScalef(2.0, 3.0, 0.0);
glScalef(2.0, 0.0, 1.0);
glScalef(0.0, 3.0, 1.0);
glScalef(2.0, 0.0, 0.0);

9. Exercise 7.2 To what point is (-2.0, 3.0, 9.0) transformed by
glScalef(3.0, 1.0, -8.0);
What are the OpenGL scaling that take
(3.0, -1.0, 2.0) to (3.0, 5.0, 9.0)
(-1.0, 0.0, 5.0) to (2.0, 1.0, 0.0)
(-2.0, -3.0, 1.0) to (0.0, 0.0, 0.0)

10. Rotation
glRotatef(A, p, q, r);

11. Experiment 7.3
Restore the cube, then add a rotation command glRotatef(60.0, 0.0, 0.0, 1.0);
right after the translation command.
Replace scaling command with
glRotatef(60.0, 0.0, 0.0, -1.0);
glRotatef(-60.0, 0.0, 0.0, 1.0);
glRotatef(-60.0, 0.0, 0.0, -1.0);
glRotatef(60.0, 1.0, 0.0, 0.0);
glRotatef(60.0, 0.0, 1.0, 0.0);
glRotatef(60.0, 1.0, 0.0, 1.0);

12. Experiment 7.3 Modify box.cpp, to compare the effects of
glRotatef(60.0, 0.0, 0.0, 1.0); and
glRotatef(60.0, 0.0, 0.0, 5.0);
glRotatef(60.0, 0.0, 1.0, 1.0); and
glRotatef(60.0, 0.0, 3.0, 3.0);
glRotatef(60.0, 0.0, 0.0, -1.0); and
glRotatef(60.0, 0.0, 0.0, );

13. Experiment 7.3 Deduce the formula for how (x,y,z) is mapped by
glRotatef(A, 0.0, 0.0, 1.0);
To what point is (2.0, 3.0, 9.0) transformed by
glRotatef(90.0, 0.0, 0.0, 1.0);
glRotatef(90.0, 0.0, 0.0, 5.0);
glRotatef(45.0, 0.0, 0.0, 1.0);

14. Experiment 7.3

15. Experiment 7.4
Apply three modeling transformations by replacing the transformation block in box.cpp with
glTranslatef(0.0, 0.0, -15.0);
glTranslatef(10.0, 0.0, 0.0);
glRotatef(45.0, 0.0, 0.0, 1.0);
Interchange the translation and rotation
Try this
glScalef(2.0, 3.0, 1.0);
And this

16. Transformation Matrix
V = (x, y, z) is represented in OpenGL as
A modeling transformation t is represented by

17. Transformation Matrix
Applying the transformation to vertex V consists of multiplying the vertex matrix by the transformation matrix from the left as

18. Transformation Matrix
Translation
Scaling

19. Transformation Matrix
z-axis rotation
y-axis rotation
x-axis rotation

20. Experiment 7.5 Try these glTranslatef(0.0, 0.0, -15.0);
glutWireSphere(2.0, 10.0, 8.0);
glRotatef(90.0, 0.0, 0.0, 1.0);
glTranslatef(4.0, 0.0, 0.0);
glRotatef(90.0, 1.0, 0.0, 0.0);
glTranslatef(0.0, 0.0, -15.0);
glRotatef(90.0, 1.0, 0.0, 0.0);
glRotatef(90.0, 0.0, 0.0, 1.0);
glTranslatef(4.0, 0.0, 0.0);
glutWireSphere(2.0, 10.0, 8.0);
glScalef(1.0, 2.0, 3.0);
glRotatef(45.0, 1.0, 0.0, 1.0);

21. Experiment 7.6
If we have a square as in the picture, how can we rotate the square 45 degree CCW about its center (z axis). z x y
(2.0, 4.0, -10.0)
(4.0, 4.0, -10.0)
(2.0, 2.0, -10.0)
(4.0, 2.0, -10.0)

22. Experiment 7.7 Replace the line with
glutWireCube(5.0); // Box.
with
glRectf(5.0, 5.0, 10.0, 10.0); // Square.
Now, scale the square so that its center is unchanged, but its shape changes to a rectangle of aspect ratio 2.

23. Experiment 7.8 Replace the display routine with void drawScene(void) {
glClear(GL_COLOR_BUFFER_BIT);
glLoadIdentity();
// Modeling transformations.
glTranslatef(0.0, 0.0, -15.0);
//glRotatef(45.0, 0.0, 0.0, 1.0);
glTranslatef(5.0, 0.0, 0.0);
glColor3f(0.0, 0.0, 1.0);
glutWireCube(5.0); // Box.
glTranslatef(0.0, 10.0 ,0.0);
glColor3f(1.0, 0.0, 0.0);
glutWireSphere(2.0, 10, 8); // Sphere.
glFlush(); }

24. Experiment 7.9
Run composTransformations.cpp. Press the up key to move the execution code.

25. Exercise
For the following pieces of code, give the co-ordinates of the center of the transformed sphere and box.
glRotatef(90.0, 0.0, 0.0, 1.0);
glutWireCube(1.0);
glTranslatef(4.0, 0.0, 0.0);
glutWireSphere(2.0, 10.0, 8.0);
glTranslatef(2.0, 0.0, 0.0);
glScalef(2.0, 2.0, 2.0);

26. Modelview Matrix Stack
OpenGL maintains 3 matrix stacks:
Modelview, projection, and texture.
glMatrixMode(mode);
GL_MODELVIEW, GL_PROJECTION, GL_TEXTURE
See box.cpp.

27. Experiment 7.10 Replace the display routine with void drawScene(void){
glClear(GL_COLOR_BUFFER_BIT);
glLoadIdentity();
glTranslatef(0.0, 0.0, -15.0);
glScalef(1.0, 2.0, 1.0);
glColor3f(0.0, 0.0, 1.0);
glutWireCube(5.0); // Box torso.
glTranslatef(0.0, 7.0 ,0.0);
glColor3f(1.0, 0.0, 0.0);
glutWireSphere(2.0, 10, 8); // Sphere.
glFlush(); }

28. Modelview Matrix Stack
void drawScene(void) {
glClear(GL_COLOR_BUFFER_BIT);
glLoadIdentity();
glTranslatef(0.0, 0.0, -15.0);
glPushMatrix();
glColor3f(0.0, 0.0, 1.0);
glScalef(1.0, 2.0, 1.0);
glutWireCube(5.0); // Box.
glPopMatrix();
glColor3f(1.0, 0.0, 0.0);
glTranslatef(0.0, 7.0, 0.0);
glutWireSphere(2.0, 10, 8); // Sphere
glFlush(); } I
I M1 = M1 M1
M1 M2 M1 M1
M1 M3

29. Exercise
Draw a teapot on a table.

30. Assignment 4
Draw a man using cubes and spheres.

31. Assignment 4
Note on assignment 4:
All objects should be wireframe.