Workbook 4: Transformation Math

CS559 Spring 2023 Sample Solution

This is a sample solution for the Workbook. You are welcome to refer to it to learn one way to do the assignment but only after you have turned in your own assignment

Learning Goals

  1. To understand how coordinate systems and transformations are represented mathematically
  2. To understand affine transformations and the use of homogeneous coordinates to represent them
  3. To be able to build transformation matrices based on the desired outcomes
  4. To be able to read a transformation matrix to understand what it does
  5. To understand how Canvas and SVG use matrices internally
  6. To use transformations in matrix form in graphics programs
  7. To practice graphics programming using vector math
  8. To get some exposure to JavaScript Object-Oriented Programming
  9. To try out the course framework code

Last time, we learned about transformations and coordinate systems. We learned a few transformations (translate, scale and rotate), how to think about transformations as changes of coordinate systems, and some ways we use transformations (e.g., to build hierarchy or create convenient coordinate systems). This week we’ll learn about how they work mathematically.

We will start by looking at a notational reason why our math (or the math in a textbook) looks different than the code we write for the Canvas API. We will then look at the general math for transformations as well as the special, simple case of linear transformations. Linear transformations are the most common case in graphics - and include all of the transformations we’ve discussed so far. Then we can dive into the math of linear transformations (although, the textbooks cover this well). As part of this, we’ll look at a common graphics trick of using homogeneous coordinates which will allow us to represent translation as a linear transformation. When we get to 3D, this will let us do other things as well.

Also, as part of this workbook, we’ll experiment with a fun animation technique as a way to practice vector algebra.

The mathematical nature of this material doesn’t lend itself to the workbook format. So some of the exercises may seem a little contrived. Do the exercises by implementing the things we ask, not by just typing in the answers.

You will only need to edit the files in the for_students directory. Don’t forget to commit and push your work. And please remember to complete the WB4 Canvas Assignment when you are done so that your assignment is ready for grading.

Note: There is a big programming assignment on Lots of Walking Objects (Page 5)

Reading / Watching

This is a topic where the textbooks do a good job at introducing the material. You don’t have to read these right now - you can read them as they come up in the workbook, and we’ll link to them throughout.

I was trying to avoid requiring students to read from textbooks, but this is a place where they are really helpful. You need some place where they write the equations out in a formal way. But before you get to that, you probably need to be motivated why you want to know this stuff. This workbook, and the Washington videos, hopefully provide that motivation.

Required:

Optional:

  • Linear algebra refreshers: Practical Linear Algebra Chapter 1, 2 and 4.
  • Sections 6.4 and 6.5 of Chapter 6 of FCG - two pieces that are optional for class, but helpful if you really want a deeper understanding.

Rubric for Grading

Workbook Rubric (103 points total)
Points (87):
20 pt
correct WB4 Canvas Assignment submission
20 pt
correct WB4G Canvas Assignment submission on time
Box 04-02-01
1 pt
filled in correct answer
Box 04-02-02
1 pt
filled in correct answer
Box 04-02-03
1 pt
filled in correct answer
Box 04-02-04
1 pt
filled in correct answer
Box 04-02-05
1 pt
filled in correct answer
Box 04-02-06
1 pt
filled in correct answer
Box 04-02-07
1 pt
filled in correct answer
Box 04-03-02
3 pt
filled in correct answer for 3 matrices
Box 04-04-01
2 pt
red dot stays in red corner and black dot stays in black corner as dots are dragged; square remains square; done via translate, rotate, and scale
Box 04-04-02
2 pt
red dot stays in red corner and black dot stays in black corner as dots are dragged; square remains square; done via transform
Box 04-04-03
2 pt
red dot stays in red corner and green dot stays in green corner as dots are dragged; square remains square
Box 04-04-04
1 pt
parameters changed so that square 1 matches
Box 04-04-04
1 pt
parameters changed so that square 2 matches (freebie!)
Box 04-04-04
1 pt
parameters changed so that square 3 matches
Box 04-04-04
1 pt
parameters changed so that square 4 matches
Box 04-04-04
1 pt
parameters changed so that square 5 matches
Box 04-04-05
3 pt
shear-x implemented to draw sheared squares
Box 04-05-01
3 pt
boids - add 10 boids when button is clicked, random locations and directions (but all with the correct speed)
Box 04-05-01
2 pt
boids - clear when button is clicked
Box 04-05-01
3 pt
draw boids so the direction they are facing is clear
Box 04-05-01
3 pt
boids bounce, not wrap
Box 04-05-01
2 pt
boids change color (briefly) when they hit a wall
Box 04-05-01
2 pt
boids bounce off each other
Box 04-05-01
2 pt
boids change color (briefly) when they hit another boid (either overlap or come very close)
Box 04-05-01
1 pt
boids has at least 4 legs like ants or spiders
Box 04-05-01
1 pt
boids has legs that move while they move
Box 04-05-01
2 pt
boids has legs that move in a way that resembles walking (not like the propellers of the quadcopters)
Box 04-05-01
2 pt
boids randomly make infrequent small changes in direction while walking (and maintain velocity)
Advanced points (16):
Box 04-05-01
2 pt
cool or more realistic movements of the legs
Box 04-05-01
2 pt
boids bounce off obstacles
Box 04-05-01
2 pt
visually obvious flocking behavior (alignment, separation, cohesion)
Box 04-05-01
2 pt
alignment flocking behavior (adds to `visually obvious')
Box 04-05-01
2 pt
separation flocking behavior (adds to `visually obvious')
Box 04-05-01
2 pt
cohesion flocking behavior (adds to `visually obvious')
Box 04-05-01
2 pt
mouse attraction flocking behavior (adds to `visually obvious')
Box 04-05-01
2 pt
added slider or checkbox that alters steering behavior

Assessment

The graders will check that you have done the required programs correctly. We’ll use a local server for grading your workbooks.

As you go through the workbook pages, feel free to tinker with the programs we have given you as a way to understand how they work!

There are opportunities for advanced points on page 5.

Get Started

Don’t forget to commit and push as you work!

Get started on Page  1  (Transformations as Math vs. Code)!