Graphics CSCI 343 Fall 2019 Lecture 11 Translations

Graphics CSCI 343, Fall 2019 Lecture 11 Translations and Rotations 1

Rotation about the Z axis x = rcosf y = rsinf x' = ? y' = ? y (x', y') r q (x, y) f x 2

The rotation matrix The equations: x' = xcos(q) - ysin(q) y' = xsin(q) + ycos(q) z' = z In matrix form: P' = RZP where RZ = ? 3

Rotation about the X axis The equations: z (y', z') y' = ycos(q) - zsin(q) r q (y, z) z' = ysin(q) + zcos(q) f x' = x y In matrix form: P' = RXP where RX = ? 4

Rotation about the Y axis The equations: x (z', x') z' = zcos(q) - xsin(q) r q (z, x) x' = zsin(q) + xcos(q) f y' = y z In matrix form: P' = RYP where RY = ? 5

Reversing Rotations We use the facts that cos(-q) = cos(q) sin(-q) = -sin(q) 6

Scaling Translation and Rotation are rigid body transformations. Scaling is not rigid. Equations: x' = bxx P' = SP, where S = ? y' = byy z' = bzz Inverse scaling: Scale with S(1/bx, 1/by, 1/bz) 7

Concatenation of Transformations Suppose you want to: 1. Scale an object 2. Rotate the object 3. Translate the object For each vertex, we apply a series of transformations: P 1 = SP P 2 = RP 1 = RSP P 3 = TP 2 = TRSP For efficiency, we create a new matrix, M = TRS. Each new point can be computed directly as P 3 = MP Note: Matrix multiplication is not commutative. Order Matters! 8

Transformations in Web. GL Ways to perform transformations: A. Create your own “current transformation matrix” (ctm): 1. Compute transformation in advance. 2. Enter matrix into an array (in column major order). OR B. Use the transformation functions provided in MV. js 1. Multiply the ctm by each transformation matrix in reverse order. C. In both cases A and B, next: 1. Pass the ctm to the vertex shader. 2. Draw object. 3. In the vertex shader, multiply each vertex by the ctm. 9

Using MV. js functions for transformation matrices Create a matrix to translate by vector (dx, dy, dz): translate(dx, dy, dz); Create a matrix to rotate by angle about axis given by (vx, vy, vz): rotate(angle, vx, vy, vz); Create a matrix to scale by factors given by (sx, sy, sz): scalem(sx, sy, sz); Here's the tricky part: You should call the functions and multiply them with the ctm in the reverse order from the order in which you want to perform the transformations! 10

Order of transformations Suppose you want to perform transformations in the following order: 1. Scale 2. Rotate 3. Translate Recall concatenation of matrix multiplications: P' = TRSP As we create each new transformation matrix and multiply with the ctm we need to do so in the correct order to create the final matrix, M = TRS For example, start with the identity matrix (I): 1. 2. 3. 4. Multiply by translate() Multiply by rotate() Multiply by scale() Draw P M = I*T*R*S P' = MP = TRSP 11

Example Code var mv. Matrix = [ ]; mv. Matrix = translate(0. 0, 0. 2, 0. 0); //second mv. Matrix = mult(mv. Matrix, scalem(2. 0, 1. 0)); //first gl. uniform. Matrix 4 fv(model. View, false, flatten(mv. Matrix) ); gl. draw. Arrays(gl. LINE_LOOP, 0, 3); mv. Matrix = scalem(2. 0, 1. 0); //last mv. Matrix = mult(mv. Matrix, translate(-0. 1*Math. sqrt(3. 0), 0. 0)); //third mv. Matrix = mult(mv. Matrix, rotate(-90. 0, 1. 0)); //second mv. Matrix = mult(mv. Matrix, scalem(1. 0, 2. 0, 1. 0)); //first gl. uniform. Matrix 4 fv(model. View, false, flatten(mv. Matrix) ); 12 gl. draw. Arrays(gl. LINE_LOOP, 0, 3);