Page 10: Composition

This page revisits composing scale and translate transformations. While we saw it on earlier pages, this page shows some of the math that may help you understand why the order matters so much.

Now that we’ve learned scale and translate, let’s try to put them together!

The idea of putting transformations together is a very important part of computer graphics. It’s important to understand it in the simple case (scale and translate), so that when we get to more complex transformations and more complex combinations, you will be able to appreciate what is happening.

As a reminder, you should be looking at the code for each of these examples.

Scale and Translate

We can apply transformations one after the other. For example, here we can scale (in the X direction) and then translate (also in the X direction). This box is 02-10-01.html and 02-10-01.js .

Notice the difference in behavior. If we translate first, then the scale only applies to the object (we stretch the coordinate axes after we’ve moved the origin). If we scale first, then the translation applies in that stretched coordinate system.

We can think about this as functions being applied to positions (transformation). Let the position of the point be $x$, the translation be $t$ and the scale be $s$. The translate transformation is $T(x,y)\to (x+t,y)$, and the scale transformation is $S(x,y)\to (sx,y)$.

If we translate first, and then scale, it is $T(S(x,y))=T(sx,y)=(sx+t,y)$.

If we scale first, and then translate, it is $S(T(x,y))=S(x+t,y)=(sx+st,y)$.

Remember that translate and scale apply to the coordinate system. The coordinate system then affects the points, because the points are interpreted in the coordinate system. To use the pen and paper analogy, the transformation commands (translate and scale) move and stretch the paper we draw on.

We can view the operations as applying to the points, but this requires us to read backwards. If we translate then scale, that means we first scale the object and then move it. If we scale then translate, we can think about first moving the object, then scaling the object (in its new position).

This may be a good time to look at the 2D Transform Toy (default demos) - there are examples “translate scale” and “scale translate” (and a third one that does both - with a save/restore - so you can compare). The transforms toy allows you to “run the code backwards” (click the “run the transformations in reverse order” checkbox and start at the end).

A warning: most programs cannot be run backwards. It is a special trick we can do in the 2D Transform Demos. Use it to understand how transformations work going forward. Don’t try to write code this way.

Understanding what happens when we scale first is important (and might be easiest if you look at the “Scale then Translate” demo). When we scale first, we make the coordinate system “bigger”. The translate is in the coordinate system, so we translate a larger amount than if we did the translate before we did the scale.

Scale about the Center

Suppose we want to scale around the center of an object, not the center of the coordinate system.

To do this, we move the object so its center is at the origin, scale it, then move the object back to its original position.

Here, the center of the square is at (40,40). So we need to translate(-40,-40) to place its center at the origin, then scale, then do a translation to put the center back where it belongs. But when we look at the code 02-10-02.js ):

18
19
20
21

    context.translate(40, 40);
    context.scale(sc, sc);
    context.translate(-40, -40);
    context.fillRect(30, 30, 20, 20);

The order of transforms may seem backwards. The transformation that applies first to the object is closest to the object. However, when we think of the transformations as being things that change the coordinate system, they occur in the correct order. We can read the code as: (1) move the center of the coordinate system to where the center of the object will be; (2) scale the coordinate system; (3) move the center of the coordinate system back so that the object’s center position is where the object’s center position should be.

Note that we cannot do a save/restore to undo the first translation because that would also get rid of the scale.

This is an important example to understand. Combining transformations this way to control the center is a common thing. Understanding how we use ordered transformations is very important. There is an example “Center of Scaling” in 2D Transform Toy (default demos) that may help - you can even try “running the code backwards”.

A warning: most programs cannot be run backwards. It is a special trick we can do in the 2D Transform Demos. Use it to understand how transformations work going forward. Don’t try to write code this way.

Exercise: Another Example

The original box with a triangle function puts the box at the origin. Suppose we want to make a grid of them (on the same (20,20) spacing), but with the boxes being half size.

Oh wait, the scale is missing :-) You need to fix the code - add the appropriate scaling, save and restore to make the lower box (canvas) canvas2 look like the upper one. You can find this code in 02-10-03.js . You should add lines inside of the loop.

Summary: Composing transformations

Composing transformations is a key concept in computer graphics. It is important to understand it now, when the transformations are simple (2D translate and scale). In the future, the transformations will become more complex, but the basic idea of composition will be the same.

In fact, on the next page, we’ll consider rotations - which might really make your head spin.