COMP 175 | COMPUTER GRAPHICS Lecture 05: Transform 2 COMP 175: Computer Graphics February 11, 2020 Remco Chang 05 Transform 2 1/51 COMP 175 | COMPUTER GRAPHICS Administrative Out today Handout and support code will be ready by the end of the day. Well make an announcement on Piazza.

Changes to schedule for this week and next No lab this Thursday Lab will be next Tuesday (because of wacky Tufts Monday schedule) The timing is a bit rushed lecture on Thursday to talk about Camera and the algorithm worksheet is due on Friday! However, parts 1-4 are questions you can answer by the end of the class today. We encourage you to get started on it soon. This algorithm worksheet can be a little tricky. Remco Chang 05 Transform 2 2/51 COMP 175 | COMPUTER GRAPHICS Refresher How do you multiply a (3x3) matrix by 3D vector?

How do you multiply two 3x3 matrices? Given this matrix: , what are the 4 basis vectors? How did you find those? Matrix as a coordinate transform What happens if you have a 2x3 matrix (2 rows, 3 columns) and we multiply it by a 3D vector? What happens if we have a 3x2 matrix (3 rows, 2 columns) and we multiply it by a 3D vector? Remco Chang

05 Transform 2 3/51 COMP 175 | COMPUTER GRAPHICS Refresher Write out the basic forms for a 2D: Scaling matrix Rotation matrix Translation matrix Why is Translation transform affine but not linear?

Why do we use 4x4 Matrices in 3D? How are Points and Vectors represented differently, and why? Remco Chang 05 Transform 2 4/51 COMP 175 | COMPUTER GRAPHICS Exercise Window Transformations: Given a window (rectangle) with bounding coordinates Create a matrix that can both move and scale this matrix so that the new bounding box is

Remco Chang 05 Transform 2 5/51 COMP 175 | COMPUTER GRAPHICS Exercise - Solution This is important! Think about what this means for 2D graphics and visualization. In 3D graphics, this is also commonly used to create viewports. So this matrix is known as the window-to-viewport transformation Remco Chang 05 Transform 2 6/51 COMP 175 | COMPUTER GRAPHICS

Questions? Remco Chang 05 Transform 2 7/51 COMP 175 | COMPUTER GRAPHICS Matrix Inverse For Scaling, we have: where If I want to go backwards, that is, if I was given x, y, how would I find x and y?

In other words, I want: Find Remco Chang 05 Transform 2 8/51 COMP 175 | COMPUTER GRAPHICS Matrix Inverse If I want to go backwards, that is, if I was given x, y, how would I find x and y? In other words, I want:

Find If we look at it at a component level: , then Remco Chang 05 Transform 2 9/51 COMP 175 | COMPUTER GRAPHICS Matrix Inverse If we look at it at a component level:

, then Lets put that back into a matrix form: where Remco Chang 05 Transform 2 10/51 COMP 175 | COMPUTER GRAPHICS Matrix Inverse Notice that if we were to multiply the two together:

or , we get back the identity matrix In other words: Remco Chang 05 Transform 2 11/51 COMP 175 | COMPUTER GRAPHICS Matrix Inverse Definition: Inverting composed matrices: It is important to note that a matrix is not always invertable. A matrix will not be invertible if:

Note, It is not a square matrix ( matrix) It has row/column of all zeros (because the row/col can be deleted) If any row/col is a multiple of any other row/col (if a row is not linearly independent) Matrices for Rotation, Scaling, Translation (using homogeneous coordinates) will always have inverses! Remco Chang 05 Transform 2 12/51 COMP 175 | COMPUTER GRAPHICS One Way To Think About Inverses

Is to think of an inverse as an undo For example, if A scales by a factor of 2 and rotates 135 degrees, then A-1 will rotate by -135 degrees and scale by 0.5 Rectangle(B) Remco Chang A*B 05 Transform 2 A-1*B A-1*A*B 13/51 COMP 175 | COMPUTER GRAPHICS Finding Inverse Matrices

We have found the inverse matrix of a Scaling matrix. Lets find the inverse matrix of a Translation matrix Remco Chang 05 Transform 2 14/51 COMP 175 | COMPUTER GRAPHICS Finding Inverse Matrices This is pretty simple, we just want to subtract the change What about Rotation matrix?

Remco Chang 05 Transform 2 15/51 COMP 175 | COMPUTER GRAPHICS Inverse Rotation Matrix Regular Rotation Matrix: Inverse Rotation Matrix: Remco Chang 05 Transform 2 16/51 COMP 175 | COMPUTER GRAPHICS

Recap of Inverses For Scaling, we have: For Rotation, we have: where where For Translation, we have: where Remco Chang 05 Transform 2

17/51 COMP 175 | COMPUTER GRAPHICS Questions? Remco Chang 05 Transform 2 18/51 COMP 175 | COMPUTER GRAPHICS Matrix Transpose What is the transpose of a matrix A? Its making the rows of the matrix its columns, and its columns become rows

Or, you can think of it as: turning the matrix by 90 degrees Remco Chang 05 Transform 2 19/51 COMP 175 | COMPUTER GRAPHICS Neat Fact about Rotation Matrix The inverse of a Rotation Matrix is the same as its transpose . Lets prove this First, we note the properties of :

In other words, Columns are orthogonal to each other (e.g., Columns represent unit vectors: Lets multiply : = Remco Chang 05 Transform 2 20/51 COMP 175 | COMPUTER GRAPHICS Neat Fact about Rotation Matrix Lets multiply : = Based on our rules, the right hand side comes out

to: , which is the identity matrix. This means that , by definition, Remco Chang 05 Transform 2 21/51 COMP 175 | COMPUTER GRAPHICS Questions? Remco Chang 05 Transform 2 22/51 COMP 175 | COMPUTER GRAPHICS Composition of Transformations! For Scaling, we have:

For Rotation, we have: For Translation, we have: Remco Chang 05 Transform 2 23/51 COMP 175 | COMPUTER GRAPHICS Composition of Transformations! So, if I want to combine the 3 transformations

This means: Remco Chang 05 Transform 2 24/51 COMP 175 | COMPUTER GRAPHICS Composition of Transformations! Recall that matrix operations are associative. Meaning that: But it is not commutative:

(1+2)+3 = 1+(2+3), 1+2+3 3+2+1 This means that I can pre-multiply , so that , where Remco Chang 05 Transform 2 25/51 COMP 175 | COMPUTER GRAPHICS Composition of Transformations! Remember, ORDER MATTERS!!

So For Example. Remco Chang 05 Transform 2 26/51 COMP 175 | COMPUTER GRAPHICS Not commutative 6 Translate by =6, =0 then rotate by 45 5 4 3

2 1 0 1 Y Rotate by 45 then translate by =6, =0 Remco Chang 2 3 4 5 6 7

8 9 10 6 5 4 3 2 1 0 05 Transform 2 1 2 3 4 5

6 7 8 9 10 X 27/51 COMP 175 | COMPUTER GRAPHICS Composition (an example) (2D) Start: Goal: Rotate 90 Uniform Scale 2x Both around objects center,

not the origin Important concept: Make the problem simpler Translate object to origin first, scale , rotate, and translate back Apply to all vertices Remco Chang 05 Transform 2 28/51 COMP 175 | COMPUTER GRAPHICS Composition (an example) (2D) (2/2)

But what if we mixed up the order? Lets try Oops! We managed to scale it properly but when we rotated it we rotated the object about the origin, not its own center, shifting its positionOrder Matters! http://www.cs.brown.edu/exploratories/freeSoftware/repository/edu/brown/cs/exploratorie s/applets/transformationGame/transformation_game_guide.html (Transformations applet) Remco Chang 05 Transform 2 29/51 COMP 175 | COMPUTER GRAPHICS Questions?

Remco Chang 05 Transform 2 30/51 COMP 175 | COMPUTER GRAPHICS Inverse Composite Matrix Recall that: Why is that? For example: Let , then In terms of operations, it makes sense:

1) Rotate 2) Translate In reverse, I would want to 1) Reverse Translate 2) Reverse Rotate Remco Chang 05 Transform 2 31/51 COMP 175 | COMPUTER GRAPHICS Inverses Revisited

What is the inverse of a sequence of transformations? Inverse of a sequence of transformations is the composition of the inverses of each transformation in reverse order Say from our from our previous example we wanted do the opposite, what will our sequence look like? We still translate to origin first, then translate back at the end! Remco Chang 05 Transform 2 32/51

COMP 175 | COMPUTER GRAPHICS Questions? Remco Chang 05 Transform 2 33/51 COMP 175 | COMPUTER GRAPHICS Transforming Coordinate Axes We understand linear transformations as changing the position of vertices relative to the standard axes Can also think of transforming the coordinate axes themselves Rotation

Scaling Translation Just as in matrix composition, be careful of which order you modify your coordinate system Remco Chang 05 Transform 2 34/51 COMP 175 | COMPUTER GRAPHICS Mapping It to 3D We have been doing everything in 2D. What happens in 3D Cartesian Coordinate System? Remco Chang 05 Transform 2

35/51 COMP 175 | COMPUTER GRAPHICS Composition of Transformations! For Scaling, we have: For Rotation, we have: For Translation, we have: Remco Chang 05 Transform 2

(will be explained) 36/51 COMP 175 | COMPUTER GRAPHICS Rotation Rotation by angle around v = Heres a not so friendly rotation matrix: This is called the coordinate form of Rodriguess formula Lets try a different way Remco Chang 05 Transform 2 37/51

COMP 175 | COMPUTER GRAPHICS Rotating axis by axis (1/2) Every rotation can be represented as the composition of 3 different angles of CLOCKWISE rotation around 3 axes, namely -axis in the plane by -axis in the plane by -axis in the plane by Also known as Euler angles, makes the problem of rotation much easier to deal with : rotation around the axis, : rotation about the axis, : rotation about the axis You can compose these matrices to form a composite rotation matrix

Remco Chang 05 Transform 2 38/51 COMP 175 | COMPUTER GRAPHICS Rotating axis by axis (2/2) It would still be difficult to find the 3 angles to rotate by given arbitrary axis and specified angle Solution? Make the problem easier Step 1: Find a to rotate around axis to put in the plane Step 2: Then find a

to rotate around the axis to align with the axis Step 3: Rotate by around axis = axis Step 4: Finally, undo the alignment rotations (inverse) Rotation Matrix: Remco Chang 05 Transform 2 39/51 COMP 175 | COMPUTER GRAPHICS Inverses and Composition in 3D!

Inverses are once again parallel to their 2D versions Transformation Matrix Inverse Scaling Rotation Translation Composition works exactly the same way Remco Chang 05 Transform 2 40/51 COMP 175 | COMPUTER GRAPHICS Example in 3D!

Lets take some 3D object, say a cube, centered at (2,2,2) Rotate in objects space by 30 around axis, 60 around and 90around Scale in object space by 1 in the , 2 in the , 3 in the Translate by (2,2,4) Transformation Sequence: , where translates to Remco Chang 05 Transform 2 41 41/51

COMP 175 | COMPUTER GRAPHICS Questions? Remco Chang 05 Transform 2 42/51 COMP 175 | COMPUTER GRAPHICS How to Invert a Matrix Were going to use Gauss-Jordan elimination Finding A-1 with Gauss-Jordan elimination is done by augmenting A with I to get [A|I], then reducing the new matrix into reduced row echelon form (rref) to get a new matrix. This new matrix will be of the form [I|A-1] What does rref really mean?

If a row does not consist entirely of zeros, then the first nonzero number in the row is a 1. (Call this a leading 1) If there are any rows that consist entirely of zeros, then they are grouped together at the bottom of the matrix. If any two successive rows do not consist entirely of zeros, the leading 1 in the lower row occurs farther to the right than the leading 1 in the higher row Each column that contains a leading 1 has zeros everywhere else. Remco Chang 05 Transform 2 43/51 COMP 175 | COMPUTER GRAPHICS

How to Invert a Matrix To transform a matrix into rref we are allowed to perform any of the three elementary row operations. These are: Multiply a row by a nonzero constant Interchange two rows Add a multiple of one row to another row Remco Chang 05 Transform 2 44/51 COMP 175 | COMPUTER GRAPHICS How to Invert a Matrix, Example

1. Given: , lets find : Augment this with the identity: 2. Row operation 1: multiply row 1 by 1/11 3. Row operation 3: multiply row 1 by -17 and add it to row 2: Remco Chang 05 Transform 2 45/51 COMP 175 | COMPUTER GRAPHICS How to Invert a Matrix, Example 4.

Row operation 1, multiply row 2 by 11/12 5. Row operation 3: multiply row 2 by 13/11 and add to row 1 6. Therefore: Remco Chang 05 Transform 2 46/51 COMP 175 | COMPUTER GRAPHICS Questions? Remco Chang 05 Transform 2

47/51 COMP 175 | COMPUTER GRAPHICS Addendum Matrix Notation The application of matrices in the row vector notation is executed in the reverse order of applications in the column vector notation: Column format: vector follows transformation matrix: Row format: vector precedes matrix and is postmultiplied by it: By convention, we always use Column Format Remco Chang

05 Transform 2 48/51 COMP 175 | COMPUTER GRAPHICS Addendum Matrix Notation Uh A problem: While: Remco Chang 05 Transform 2 49/51 COMP 175 | COMPUTER GRAPHICS Addendum Matrix Notation

In order for both types of notations to yield the same result, a matrix in the row system must be the transpose of the matrix in the column system Recall: In order to make the two notations line up: Be careful! Different textbooks and different graphics packages use different notations! First understand which one they use!! Remco Chang 05 Transform 2 50/51 COMP 175 | COMPUTER GRAPHICS

Why Column-Format Notation? Because it fits more naturally to OpenGLs stacks For example, for a series of matrix operations: , how would you write this using GL calls? What happens when I have multiple objects? For example, the solar system?... Remco Chang 05 Transform 2 51/51 COMP 175 | COMPUTER GRAPHICS

Questions? Remco Chang 05 Transform 2 52/51 COMP 175 | COMPUTER GRAPHICS TRST in OpenGL Lets say that you have a set of transforms: Writing this in OpenGL would look something like: glTranslate3f(-xtrans, -ytrans, -ztrans); glRotate3f (angle, x_axis, y_axis, z_axis); glScale3f (xscale, yscale, zscale); glTranslate3f (xtrans, ytrans, ztrans); DrawObject()

Or, you can do this in software using the glm glm::mat4 t_invM = glm::translate(glm::mat4(1.0), -transVec); glm::mat4 rotM = glm::rotate(glm::mat4(1.0), angle, rotVec); glm::mat4 scaleM = glm::scale(glm::mat4(1.0), scaleVec); glm::mat4 tM = glm::translate (glm::mat4(1.0), transVec); glm::mat4 composite = t_invM * rotM * scaleM * tM; for (each vertex in object) { glm::vec3 newPos = composite * vertex->getPosition(); } Remco Chang 05 Transform 2 53/51 COMP 175 | COMPUTER GRAPHICS TRST in OpenGL glm::mat4 t_invM = glm::translate(glm::mat4(1.0), -transVec); glm::mat4 rotM = glm::rotate(glm::mat4(1.0), angle, rotVec); glm::mat4 scaleM = glm::scale(glm::mat4(1.0), scaleVec); glm::mat4 tM = glm::translate (glm::mat4(1.0), transVec); glm::mat4 composite = t_invM * rotM * scaleM * tM; for (each vertex in object) {

glm::vec3 newPos = composite * vertex->getPosition(); } Or, you can be fancy and string them together: Matrix composite = glm::mat4(1.0); composite = glm::translate(composite, -transVec); composite = glm::rotate(composite, angle, rotVec); composite = glm::scale(composite, scaleVec); composite = glm::translate (composite, transVec); for (each vertex in object) { glm::vec3 newPos = composite * vertex->getPosition(); } Remco Chang 05 Transform 2 54/51