Workbook 2: Transformations

One of the most fundamental concepts in computer graphics is transformation. Transformations let us work in convenient coordinate systems, model complicated things by putting together parts, move things around without damaging their structure, animate things without changing their shape (or changing their shape if we want), and much more.

Generally, the mathematics of transformations are taught first, and then we tell you what to use them for.

This workbook will try to do things differently: we’ll try to convey the intuitions first so you understand the concepts. Then we’ll see how we use transformations in programs. Finally, we’ll look into the math “under the hood”.

A Note About This Workbook

This workbook covers a lot of content. It is what we would have covered in class over two weeks, which makes sense because it’s a two-week workbook. However, since this workbook is replacing the textbook chapters, the workbook is long.

There are small exercises scattered throughout the workbook (these are listed on the rubric on the last page). Be aware that there are some bigger exercises in this workbook - be sure to plan your time accordingly!

• Page  13  (Quadcopter Exercise) - has the “Quadcopter” exercise
• Page  24  (SVG Exercise) - asks you to make a picture with SVG
• Page  25  (Mascot Competition) - asks you to make an animated character
• Page  26  (Lots of Walking Objects) - asks you to create a lot of moving boids

If you think you prefer the “traditional lecture style” (e.g., 75-minute monologues on the topic), you can watch the 2023 lectures. The workbook has slightly different content (and much better demonstrations). Specific sections of the videos are linked on the relevant workbook pages. (note: Lecture 5 gets a detail of handedness wrong, which is explained in Lecture 6)

Workbook Operations

The workbook uses both type-in forms that rely on browser local storage and “page boxes” that are files that must be checked in to GitHub.

Right now, please put your name on the workbook and press the “checkpoint” button so that we know that you have at least seen this workbook.

This workbook makes more use of type-in forms for actual content than the previous workbook. This workbook contains type-ins that are part of the assignment. Some of these have specific rubric checkboxes at the end of the page.

The checkboxes for boxes and rubric elements are to help students keep track of their work.

Remember to save your local storage to the json file periodically in case something goes wrong. You should also make a checkpoint periodically.

Remember to commit your work as you edit files in for_students (you should not need to edit files outside of that directory). Remember to push your work to GitHub - at least at the end, or periodically after you commit, to make a backup. And, when you have completed the workbook, remember to use the submit button on the last page to signal us that your workbook is ready for grading.

Learning Goals

1. Understand the concepts of transformation and coordinate systems and their use in graphics
2. Understand how basic transformations (rotate, translate, scale,etc.) are used and composed to achieve different effects
3. Understand the mathematical representation and application of transformations for important types, including affine transformations using homogeneous coordinates and matrices
4. Understand how transformations are used in different graphics APIs including HTML Canvas and SVG
5. Understand and apply the concepts of hierarchical modeling and scene graph representations
6. Understand the ideas of kinematics and inverse kinematics to create articulated models and animate them

Readings and Videos

The workbook is the primary reading.

This topic, particularly the mathematical elements of it, is covered well by textbooks. In the past, we’ve required students to read some of a textbook. This year, we are trying an experiment and making the textbook optional. (Students treated it that way anyway.) I am trying to make the workbook self-contained, except for the videos.

The workbook pages will provide links to videos.

Some of the videos are portions of 2023 lectures. These cover the material well. We will give links that let you access specific parts of the lectures.

Due Date, Grading and Rubric

This workbook is due on Sunday, October 4th, 2026 at 11:59PM (Madison time). Turning it in at 12:01AM the next day is not on time.

Consult the class website for information on the late policy. While we accept late assignments, we limit the amount of credit you can get for them.

A detailed rubric for this workbook can be seen on the last page. Note: while the biggest items are part of boxes (that require you to edit JavaScript files), there are also parts of the assignment that require you to fill in form elements on the web pages. Not all of these have their own rubric items (there may be a rubric item for “forms on page X”).

The checkboxes for boxes and rubric elements are to help students keep track of their work. For assessment, the graders will look at the actual work submitted.

Let’s Get Started!

Get Started on Page  1  (Introduction)!

AI Disclosure

I used AI tools a lot in the preparation of this workbook. The code for the “newer” examples was often written by Gemini (either from the chat interface, or using GitHub Copilot). Some examples were written using Claude Opus.

I had AI tools proofread the workbook. And I used it to check explanations, and generate typesetting for some of the mathematics.