Page 2: Translation 1: Intuitions

On this page, we’ll consider a simple transformation: translation. We will try to understand how it works in terms of moving coordinate systems. Translation is easy enough that we can view it in simpler ways - but by trying to really understand it, we’ll be ready for more transformations later.

To explain transformation concepts, we’ve built this gadget called TransformToy. We will use it throughout the workbook to demonstrate some concepts. We’ll introduce it here on a simple example, and show off more of its features later.

Local Coordinates

Let’s consider a simple case: we are translating a single point. The point is at the origin (0,0) of its “local” coordinate system. As far as it is concerned, it is at the origin. We want it to end up at 20,30. So we can translate it there. You could think of translation as adding a value to each point.

But we think of the translation in terms of the coordinate system. The translation (20,30) moves the target coordinate system such that the origin appears at (20,30) in the final or “home” coordinate system.

So, the way a program would work: (1) we start in the “home” coordinate system; (2) we translate the coordinate system (to get to the local coordinate system); (3) we draw the object at the origin (in the local coordinate system) and it appears at the right place (in the “home” coordinate system).

Of course, you want to see that program run step by step; so we have a little gadget. We’ll use this gadget for lots of little programs like this as we try to understand transformations.

The program doesn’t draw dots, so we’ll draw a square with its corner at the origin. You can see the result on the right side: a blue square at (20,30). On the bottom right, you see the program that produces that result. It is similar to what you write in JavaScript using HTML5 Canvas.

Notice that there is a red line at the bottom of the program on the right. That red line is the “cursor” to show us where execution is. This is like the “Instruction Pointer” or “Execution Pointer” in the debugger. Since the right side of the screen is showing what happened after the program finished, the red line is after the end of the program.

On the left is where we can step through the program.

The left picture shows a red coordinate system (it is reddish-brown, but I’ll still call it red): that is the “current coordinate system” or “local coordinate system” where objects will be drawn if they are drawn now. There is also the black “home” coordinate system, but right now it is covered by the red one.

The program on the left also has the red “cursor” line. To start it is before the first line of code. When you press “Next”, the program will step and execute that line. The line of code will be highlighted in red and its actions animated as it executes. Afterwards, the cursor will be after this line of code.

If you haven’t already, press “next” to execute the first line of the program (translate …). When we execute “translate,” it moves from the current local coordinate system to a new local coordinate system. The red coordinate system is in a new place. Transformations change the coordinate system. Transformations act on the current coordinate system and leave a new one.

The next “line” of code is split into two lines: fillStyle="blue"; and fillRect(0,0,10,10);. You should recognize these as HTML5 Canvas API commands from Workbook 1: we set the color to blue, and draw a rectangle with a corner at 0,0 and size 10,10. Commands in TransformToy mimic the Canvas commands. We leave off the context. to save space (and because it is implied).

A Slightly Bigger Example

This example does the same thing, except that rather than doing it with a single translation, we have two translations. We first translate by (20,0), and then (30,0). Try stepping through the program to watch what happens and to practice using TransformToy (we’ll have more complex examples with it later).

Notice that the translations happen in the current coordinate system. The second translate command modifies the coordinate system in which it was applied. The fillRect command applies in the current coordinate system.

The idea that drawing uses the “current” state should be familiar from your previous work with Canvas. The rectangle is drawn using the current state: the coordinate system is just like the color, we have to set it before we draw. It has to be this way, since Canvas is an immediate mode system (we can’t change the rectangle after we’ve drawn it!).

You also probably noticed that the result of the two translations was the same as the first one. The composition of two translations is a translation that combines them. For translation, the composition is easy (we just add). Composition can be more complicated when we consider other transformations.

Current Transformations

To emphasize, drawing operations happen relative to the “current” transformation. When we draw, we draw in the current coordinate system. When we apply a transformation, we apply it to the current coordinate system. Here’s an example that might help with that.

Unfortunately, we’re stuck with drawing squares (and a few other things) in TransformToy, which makes these demos somewhat boring. On the next page, we’ll see some of the cool features that explain why we keep it.

Even though the picture is boring, the program does show some of the key ideas of transformations. Make sure that you understand what is going on. Why do the rectangles all have the same positions in the code, but appear in different places on the screen? Make sure you can predict the picture that code like this produces.

Actually, to practice predicting programs and to show you what the actual JavaScript code looks like, here’s another example. There are a few differences from TransformToy - for example, the origin is in the top left of the Canvas, and we don’t actually see the grid. And since the units are pixels, we need to use bigger numbers. But it should be familiar.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

ctx.fillStyle = "gray";
ctx.fillRect(0,0,20,20);
ctx.translate(0,40);
ctx.fillStyle = "blue";
ctx.fillRect(0,0,20,20);
ctx.translate(40,0);
ctx.fillStyle = "purple";
ctx.fillRect(0,0,20,20);
ctx.translate(0,-40);
ctx.fillStyle = "black";
ctx.fillRect(0,0,20,20);

More About Transformations As State

In Canvas (and most graphics systems) there is a notion of the “current coordinate system” where objects will be drawn. In Canvas, it starts out with the box on the screen: the origin is at the top left corner, the X axis goes to the right (measured in “screen pixels”), and the Y axis goes downwards (again in “screen pixels”).

The transformation commands alter the current coordinate system. Translate moves the center.

In Canvas, the current transformation is part of the drawing state, just like the color of the pen. That means we can save and restore it. Here are those previous two examples combined so you can see they do the same thing. Notice how I use save and restore so I can reset and start over.

Moving On

These examples are very simple. But make sure that you understand the concepts while things are still simple.

• Coordinate System - tells us how to interpret positions
• The “current” coordinate system - how drawing operations will be interpreted now
• Transformations - change the current coordinate system into a new current coordinate system
• Composition - a sequence of transformations combined can be thought of as a single transformation that does the same thing

In order to make this more interesting, we’ll need to have more types of transformations to apply. But first, let’s look at TransformToy and how we think about transformations more carefully.