Page 1: Introduction

Spring 2026 Sample Solution

Transformations are a key idea in Computer Graphics.

We use transformations to make objects. We use transformations to put objects into the right places. We use transformations to put pieces together to make complex objects. We use transformations to put things in the right place on the screen. We use transformations to map 3D scenes to 2D pictures. The uses go on and on.

In this workbook, we’ll explore the basic ideas of transformations. We’ll focus on 2D. We’ll also focus on linear transformations. We’ll explain what that means later.

We’re going to start by playing with some demonstrations to get the intuitions first. Then we’ll look at code and math.

Thinking About Transformations

Here’s a quick and simple demo: rather than sliding all these objects (and the points on them) around, you can grab the dot and move the whole thing.

Here are a few different ways to think about it:

We move each and every point on all the objects to their new location.
We’ve painted the objects onto a sheet (the graph paper) and are moving the graph paper around.
We move the graph paper into place, and then place the objects into their position on the graph paper.

The red square (for example), has its top left corner 1 unit to the right and 1 unit down from the origin of the grid. It always gets drawn in the same place. The grid moves, so that where it appears on the screen might be different.

For various reasons, if you think about transformations as #3 - moving the coordinate system (the “graph paper” as we are drawing it) and then placing the objects in their positions on it, a lot of other things will be easier.

Some Other Transformations

The previous transformation was translation; we just moved the coordinate system (shifting each point by the same amount). That is an extremely simple transformation.

Here is a less simple transformation: we allow translation, rotation, and uniform scaling. Rotation spins around a point. Scale multiplies everything by a constant factor. We’ll discuss these more on future pages. You can control this demo by moving the two points.

This is shown as one transformation that translates, rotates, and scales. We could build this transformation with its simpler parts (we’ll get to that).

If you’re curious, this transformation has a name: it is a similarity transformation. It allows things to move, spin, and change size, but it preserves shape. We’ll explain it in more detail in future pages.

Here is a different transformation: a grid warp with a cubic Hermite basis. I won’t explain what it is until a later workbook.

This is an example of a more complex transformation. But, the basic idea is the same: we transform the coordinate system (grid, graph paper, or however you want to think of it). This tells our points where to go. Our “graph paper” is now a stretchy sheet that we can pull all over the place. But there is still a “grid,” so we can still place our objects on it. The corner of the red square is still at 1,1. It’s just that 1,1 can be moved to a different place by stretching the coordinate system.

The point: it’s still changing the coordinate system. We change the “grid” that we draw on, and then we draw on it.

Coordinate Systems and Transformations

Coordinate systems and transformations are an important concept, so let me repeat it another way with a different demo.

The idea is that our “object” (the points we draw) live in their “local” coordinate system. Their positions are relative to this coordinate system.

We then place that coordinate system in an appropriate place.

Here’s a demo… you can click points on the left. You are placing them in this coordinate system. You can place one at the origin (0,0), or anywhere else. To distinguish this coordinate system, I’ve drawn the “graph paper” in blue.

On the right is a different coordinate system; I’m showing its grid in gray. We’ve placed the first coordinate system in it - I’m drawing its “graph paper” in blue. The transformation specifies where the blue coordinate system appears in the gray one. You can change the transformation (try dragging the black dots). We’ll explain the specific kind of transformation later.

Make sure you understand this idea: we have “local coordinates” that we draw in (the blue coordinate system), and then there are some transformations that convert from this coordinate system into the “final” coordinate system. In fact, there is a similar transformation going on all the way to the position on the screen.

More Than Two

Of course, we don’t need to stop at two coordinate systems. Consider this one with three:

Just like last time, we place the blue points into the blue coordinate system. The blue coordinate system is placed into the purple one (you can control it with the dots). The blue points have a place in the purple coordinate system.

We then place the purple coordinate system into the black one. In the demo, you can control the transformation with the dots. Everything in the purple coordinate system - including the blue one - gets transformed.

Notice how we have combined transformations. A point in the blue coordinate system gets transformed twice to figure out where it ends up in the black coordinate system. We can combine these into a single “big” transformation that is the transformation from blue to black.

The term for combining transformations is composing. If we have a sequence of transformations, we can compose them to make a transformation that does the same thing. This will be clearer when we write it in equations later in the workbook.

Moving On

On the next page, we’ll start with the simplest transformation and introduce a tool we’ll use in this workbook to experiment with transformations.