Page 3: Transformations Backwards

On this page, we’ll try to look at transformations a different way. This might help you understand them better. Having the two different ways to think about transformations may come in handy later when we need to compute things by hand.

Since this way of understanding transformations can be tricky, we’ll use a special feature of TransformToy: the ability to run programs backwards. You can’t do this with real programs.

This material (the basics of translation, and understanding it with transform toy) can be seen in the lecture video. There’s a place where I have computer problems (which is why there is a title “Return of Lecture”). The lecture video shows me playing with TransformToy. I recommend that you try it yourself in the workbook.

Why another perspective might be handy…

Let’s consider what happens to an object (or a point) when we apply transformations. Here’s a very simple program with two translations:

1ctx.translate(20,0);
2ctx.translate(0,20);
3ctx.fillRect(0,0,10,10);

Where on the screen does the corner of the square (0,0 in its local coordinate system) go?

To trace this program, we step through it. At the beginning, the coordinate system has 0,0 at the origin. After line 1, it is at 20,0. After line 2, it is at 20,20. When we draw, 0,0 (the origin) is relative to this origin, so its position is 20,20.

Notice that I had to keep track of how the coordinate is moving. Of course, the API (or TransformToy) does this. But for us to understand what is going on, we have to move the coordinate systems around in our heads. This isn’t too hard when all we’re doing is translating, but when the transformations are more complicated, it can be tricky to keep track of the coordinate systems.

If our goal is to figure out where the point goes, we could ask, “What happens to the point as it goes through the transformations?” or “If we start at the point, where do we end up?”

Of course, the point doesn’t exist in our program until the end. In order to figure out where it “ends up,” we need to trace its movement backwards from the end. Real programs don’t run backwards. We either need to do this in our heads, or in a simulation that allows this kind of weird time travel.

Backwards?

Here is that same example. Step through it (normally using next) to make sure you understand how the coordinate system moves so the square finally gets placed at 20,20.

Let’s imagine this process from the point of view of the square (specifically its top left corner). We’ll have to think about time backwards.

At the beginning, the square is created. The corner is at (0,0) in the local coordinate system. Then this coordinate system (with the objects attached to it) is moved 20 units in the Y direction. Then this coordinate system is moved 20 units in the X direction. Now we’ve gotten to the “end” and we have the final picture.

TransformToy can help us visualize this “backwards” execution. To try it, click the “Backwards Mode” checkbox. Notice that we are at the end of the program, but the picture is empty! Since we’re in backwards mode, at the end of the program nothing exists yet, and we’re in the “final” coordinate system (the current coordinate system at the end of the program). We’ll color this coordinate system blue.

On the right is the “final” result - at the beginning of the program. The final result is in the current coordinate system (current at the beginning of the program). In backwards mode, we color the current coordinate system purple.

Now press “Prev” to move back one step of the program. The object is created in the current coordinate system. In backwards mode, we draw the current coordinate system in purple, but right now, it’s the same as the “final” coordinate system so we only see blue. This is the only one that the object knows. Our object will stay in this “final” coordinate system.

Now press “Prev” again to move back through one more step: the translate(0,20) command. The current transformation (current at the beginning of the translate) is different from the “final” coordinate system - we see the blue coordinate system for the “current” one (above the translation). Notice that the object stayed in the coordinate system in which it was created.

Now press “Prev” again to step through another translate. We’ve gotten to the beginning of the program. And the result should be the same as what we would have had if we executed the program normally.

Another Example

Here’s a longer and more complex example.

First, read the program (on the right; on the left, the transformation values haven’t been filled in yet) and make sure you understand why it produces the picture that it does. You can step through the program (in regular mode) to see how execution happens.

After understanding the program, put TransformToy into Backwards Mode, and step through the program backwards. Make sure you understand this “reverse operation”.

Why Backwards?

The backwards view of transformations is a bit tricky. It is not how things are actually implemented. And it is not the standard way to think about things.

Later, on Page  14  (Transformations as Math vs. Code), we’ll see how this view matches one way of writing out the math.

But, for now, I find it handy to have a different way to think about transformations. I find it particularly useful when we are trying to compute where a point goes. Notice that we can consider a single point and trace it through the transformations - we don’t need to think about the whole coordinate systems changing around.

I believe that learning to think this way will help you understand transformations better. This will be important as we start combining complex sequences of transformations. Right now, we just have translations, so we need another kind of transformation so we can start to have combinations.