# Workbook 4: Transformation Math

## 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.

This workbook is due on Monday, February 22, 2021.

## 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

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 handin Quiz when you are done so that your assignment is ready for grading.

This is a topic where the textbooks do a good job at introducing the material.

Tutorials: If you still haven’t read the CS559 Tutorial: Points, Vectors, Coordinate Systems, now might be a good time.

Textbook: The math of transformations is covered well in the graphics textbooks. You are required to read sections 6.1, 6.3, 6.4 and 6.5 of Chapter 6 of Foundations of Computer Graphics (although, 6.1.6 is a more advanced topic that we won’t discuss in class, and the 3D parts, including 6.2 we’ll come back to later). You are also required to read Chapter 5 of Hart's Big Fun Graphics Book - which covers the same material. It is important enough that you should see it twice, and each one adds extra details.

However, you might want to start reading through the workbook first - it will set up the connection to the textbook chapters. At various points in the workbook it will refer you to reading the textbook.

Optional: If you want a refresher on linear algebra, you may want to look at Chapter 1, Chapter 2, and Chapter 4 of Practical Linear Algebra. The book is discussed on the Books Page, and you can find it Practical Linear Algebra at the UW Library.

Workbook Rubric (97 points total)
Points (86):
25 pt
Correctly Turned in Assignment
Box 04-02-01
1 pt
filled in correct answer (2 numbers)
Box 04-02-02
2 pt
filled in correct answer (2 numbers)
Box 04-02-03
2 pt
filled in correct answer (2 numbers)
Box 04-02-04
1 pt
filled in correct answer (2 numbers)
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 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 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 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 04-04-05
5 pt
implement shear-x to draw sheared squares
Box 04-05-01
5 pt
Boids - add 10 boids when button is clicked, random locations and directions
Box 04-05-01
3 pt
Boids - clear when button is clicked
Box 04-05-01
5 pt
Draw boids so the direction they are facing is clear
Box 04-05-01
5 pt
Boids bounce, not wrap
Box 04-05-01
4 pt
Boids change color (briefly) when they hit a wall
Box 04-05-01
3 pt
Boids change color (briefly) when they hit another boid (either overlap or come very close)
Bonus points (21 possible, of which you can earn a maximum of 11):
Box 04-05-01
4 pt
Boids bounce off each other
Box 04-05-01
3 pt
Boids bounce off obstacles
Box 04-05-01
3 pt
Visually obvious flocking behavior (alignment, separation)
Box 04-05-01
2 pt
alignment flocking behavior
Box 04-05-01
2 pt
separation flocking behavior
Box 04-05-01
2 pt
cohesion flocking behavior
Box 04-05-01
2 pt
mouse attraction flocking behavior
Box 04-05-01
2 pt
other flocking behavior
Box 04-05-01
1 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 bonus points on page 5.

## 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

## Get Started

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