1. Computer Graphics
2D & 3D Transformation

2. 2D Transformation
transform composition: multiple transform on the same object (same reference point or line!)
p’ = T1 * T2 * T3 * …. * Tn-1 * Tn * p, where T1…Tn are transform matrices
efficiency-wise, for objects with many vertices, which one is better?
1) p’ = (T1 * (T2 * (T3 * ….* (Tn-1 * (Tn * p))…)
2) p’ = (T1 * T2 * T3 * …. * Tn-1 * Tn) * p
matrix multiplication is NOT commutative, in general
(T1 * T2) * T3 != T1 * (T2 * T3)
translate  scale may differ from scale  translate
translate  rotate may differ from rotate  translate
rotate  non-uniform scale may differ from non-uniform scale  rotate

3. 2D Transformation commutative transform composition:
translate 1  translate 2 == translate 2  translate 1
scale 1  scale 2 == scale 2  scale 1
rotate 1  rotate 2 == rotate 2  rotate 1
uniform scale  rotate == rotate  uniform scale
matrix multiplication is NOT commutative, in general
(T1 * T2) * T3 != T1 * (T2 * T3)
translate  scale may differ from scale  translate
translate  rotate may differ from rotate  translate
rotate  non-uniform scale may differ from non-uniform scale  rotate

4. 3D Transformation simple extension of 2D by adding a Z coordinate
transformation matrix: 4 x 4
3D homogeneous coordinates: p = [x y z w]T
Our textbook and OpenGL use a RIGHT-HANDED system y
note: z axis comes toward the viewer from the screen x z

5. 3D Translation tx ty
T (tx, ty, tz) = tz

6. 3D Scale sx sy
S (sx, sy, sz) = sz

7. 3D Rotation about x-axis
0 cos(θ) -sin(θ) 0
Rx (θ) =
0 sin(θ) cos(θ) 0
note: x-coordinate does not change

8. 3D Rotation about x-axis
suppose we have a unit cube at the origin
blue vertex (0, 1, 0)  Rx(90)  (0, 0, -1)
green vertex (0, 1, 1)  Rx(90)  (0, 1, -1)
yellow vertex (1, 1, 0)  Rx(90)  (1, 0, -1)
red vertex (1, 1, 1)  Rx(90)  (1, 1, -1)
rotate this cube about the x-axis by 90 degrees y y x z z

9. 3D Rotation about y-axis
cos(θ) sin(θ) 0
Ry (θ) =
-sin(θ) cos(θ) 0
note: y-coordinate does not change, and
the signs of these two are different from Rx and Rz

10. 3D Rotation about y-axis
suppose you are at (0, 10, 0) and you look down towards the Origin
you will see x-z plane and the new coordinates after rotation can be found as before (2D rotation about (0, 0): vertices on x-y plane)
x’ = z * sin(θ) + x * cos(θ): same
z’ = z * cos(θ) – x * sin(θ): different x
(x’, z’) θ
(x, z) z
note: y-coordinate does not change, and
the signs of these two are different from Rx and Rz

11. 3D Rotation about y-axis
p (x, z) = (R * cos(a), R * sin(a))
p’(x’, z’) = (R * cos(b), R* sin(b))  b = a – θ
x’ = R * cos(a - θ) = R * (cos(a)cos(θ) + sin(a)sin(θ))
= R cos(a)cos(θ) + R sin(a)sin(θ)  x = Rcos(a), z = Rsin(a)
= x*cos(θ) + z*sin(θ)
z’ = R * sin(a – θ)
= R * (sin(a)cos(θ) – cos(a)sin(θ))
= R sin(a)cos(θ) – R cos(a)sin(θ)
= z*cos(θ) – x*sin(θ)
= -x*sin(θ) + z*cos(θ) x
(x’, z’) θ
(x, z) z

12. 3D Rotation about y-axis
cos(θ) sin(θ) 0
Ry (θ) =
-sin(θ) cos(θ) 0
note: y-coordinate does not change, and
the signs of these two are different from Rx and Rz

13. 3D Rotation about z-axis
cos(θ) -sin(θ)
sin(θ) cos(θ)
Rz (θ) =
note: z-coordinate does not change

14. Transform Properties translation on same axes: additive
translate by (2, 0, 0), then by (3, 0, 0)  translate by (5, 0, 0)
rotation on same axes: additive
Rx (30), then Rx (15)  Rx(45)
scale on same axes: multiplicative
Sx(2), then Sx(3)  Sx(6)
rotations on different axis are not commutative
Rx(30) then Ry (15) != Ry(15) then Rx(30)

15. OpenGL Transformation
keeps a 4x4 floating point transformation matrix globally
user’s command (rotate, translate, scale) creates a matrix which is then multiplied to the global transformation matrix
glRotate{f/d}(angle, x, y, z): rotates current transformation matrix counter-clockwise by angle about the line from the Origin to (x,y,z)
glRotatef(45, 0, 0, 1): rotates 45 degrees about the z-axis
glRotatef(45, 0, 1, 0): rotates 45 degrees about the y-axis
glRotatef(45, 1, 0, 0): rotates 45 degrees about the x-axis
glTranslate{f/d}(tx, ty, tz)
glScale{f/d}(sx, sy, sz)

16. OpenGL Transformation
OpenGL transform commands are applied in reverse order
for example,
glScalef(3, 1, 1);  S(3,1,1)
glRotatef(45, 1, 0, 0);  Rx(45)
glTranslatef(10, 20, 0);  T(10,20,0)
line.draw();  line is drawn translated, rotated and scaled
transformations occur in reverse order to reflect matrix multiplication from right to left
S(3,1,1) * Rx(45) * T(10, 20, 0) * line = (S * (R * T)) * line
user can compute S * R * T and issue glMultMatrixf(matrix);
multiplies matrix with the global transformation matrix

17. OpenGL Transformation
glMatrixMode(GL_MODELVIEW); must be called first before issuing transformation commands
glMatrixMode(GL_PROJECTION); must be called to set up perspective viewing  will be discussed later
individual transformations are not saved by OpenGL but users are able to save these in a stack(glPushMatrix(), glPopMatrix(), glLoadIdentity())  very useful when drawing hierarchical scenes
glLoadMatrixf(matrix); replaces the global transformation matrix with matrix

18. OpenGL Transformation
argument to glLoadMatrix, glMultMatrix is an array of 16 floating point values
for example,
float mat[] = { 1, 0, 0, 0, // 1st row
0, 1, 0, 0, // 2nd row
0, 0, 1, 0, // 3rd row
0, 0, 0, 1 }; // 4th row
lab time: copy files in hw0a to hw0b (use this directory for lab)
replace glScalef, glRotatef, glTranslatef in display() method with
glMultMatrixf command with our own transformation matrix