Page 4: Matrix Exercises

CS559 Spring 2021 Sample Solution - Workbook 4

Written by CS559 course staff

You can try out the example solutions here. The interesting code is on page 4 and page 5.

Over the past few pages, you saw the connection between the math of transformations and the code we write to draw using Canvas. On this page, you’ll get to try writing some code to test it out.

Hint for some of these: remember that the canvas transform allows you to specify an affine transformation as a matrix. It’s up to you to figure out what the matrix should be and put it into the 6 values that are passed to transform. You may want to review the required readings to see the standard forms of the matrices. You can often figure out what the entries of the resulting matrix are using the methods in “Reading Matrices” on page 2, without having to build the matrix up from simple transformations.

In cases where you do need to figure out the transformations… The JavaScript Math library has a useful function that does a 2-argument arctangent - see Math.atan2. Given x and y it tells you the angle to rotate to.

Box 1: Exercise 1, Two Dots with Translate, Rotate, and Scale

For this box, you should edit 04-04-01.js (04-04-01.html). The function you have to change is at the beginning of the file. Feel free to read the rest of the code - but please don’t change it.

Given two points, we want to map the square (0,0) - (10,10) such that the (0,0) corner appears at the first point, and top right corner (10,0) appears at the second point. The red square should be close to the red dot, and the black square should stay close to the black dot.

The square should remain a square - it can turn and stretch uniformly, but it should not reflect (notice that the insides of the square are not symmetric).

I wrote some UI code that draws the square, and draw a red dot for the first point and a black dot for the second point, and lets you move the points around. All you need to do is fill in the function twoDots in 04-04-01.js with the code that performs the transformation. It should consist of calls to context.translate, context.rotate, and context.scale. I put in a context.translate just to get you started. You can drag around the dots to make sure your code works (the graders will do it).

Here are some snapshots of what this should look like when it is working:

two dots box 1 example 1
two dots box 1 example 2
two dots box 1 example 3
Box 04-04-01 Rubric (5 points total)
Points (5):
Box 04-04-01
5 pt
upper left corner is a red dot and upper right a green dot. Points should be draggable together with the square. The graders will check that you did this with translate, rotate, scale.

Box 2: Exercise 2, Two Dots with Transform

Now, do that again, but this time do it using context.transform - compute the 6 numbers that need to be passed. Do this in the twoDots in 04-04-02.js function (04-04-02.html). I put some example values in that don’t work correctly. (The same example images above apply here.)

Box 04-04-02 Rubric (5 points total)
Points (5):
Box 04-04-02
5 pt
upper left corner is a red dot and upper right a green dot. Points should be draggable together with the square. The graders will check that you did this with transform.

Box 3: Exercise 3, Two Dots a Little Harder

This is same as box 1 - except that the corner opposite the upper left (e.g., the 10,10 corner) should appear at the green dot. That is, the corner of the square closest to the green square should be close to the green dot. You may choose how you make the transformation - but make sure it keeps the square a square. The function to edit is twoDots in 04-04-03.js (04-04-03.html).

Here are some snapshots of what this should look like when it is working:

two dots box 3 example 1
two dots box 3 example 2
two dots box 3 example 3
Box 04-04-03 Rubric (5 points total)
Points (5):
Box 04-04-03
5 pt
the green dot should be in the corner opposite to upper left corner of the square. Points should be draggable. Square must remain a square.

Box 4: Exercise 4, Convert to Transform

In the code for this box (04-04-04.html and 04-04-04.js), each of the squares in the top Canvas is placed by a sequence of rotate, translate, and scale commands.

In the bottom canvas, each square is transformed by a transform - you need to match it. For each square, you need to figure out how to change the 6 parameters of the transform function to put the square in the correct place. We’ve done this for square 2 already. Pay attention to the dots in the square.

Here is a picture of the original orientation for reference:

box 4 example
Box 04-04-04 Rubric (10 points total)
Points (10):
Box 04-04-04
2 pt
replace parameters so that square 1 matches
Box 04-04-04
2 pt
replace parameters so that square 2 matches (freebie!)
Box 04-04-04
2 pt
replace parameters so that square 3 matches
Box 04-04-04
2 pt
replace parameters so that square 4 matches
Box 04-04-04
2 pt
replace parameters so that square 5 matches

Box 5: Exercise 5, Shear/Skew

Shear (sometimes called skew) is a fundamental linear transformation. It is discussed in both textbooks, but specifically FCG4_Ch06.pdf (0.5mb). Unfortunately, Canvas doesn’t have it.

Put “shear-x” transformation into the shearX function in 04-04-05.js (04-04-05.html). The code for the following Canvas calls that function to test it. Since the shearX does nothing right now, you see squares here. If you implement things correctly, you should see sheared boxes. The test code does save and restore - you should make shearX work like context.rotate, except that it is a function not a method.

Here is what it should look like when you are done:

box 5 example

Hint: using context.transform is the easiest way to do this.

Box 04-04-05 Rubric (5 points total)
Points (5):
Box 04-04-05
5 pt
implement shear-x to draw sheared squares

Summary

That was a little math programming. Now on to Page  5  (Lots of Flying Objects).