Page 5: Combining Transformations 1: Center of Scale

On this page, we’ll consider combining different types of transformations. We’ll use translate and scale since that’s all we have. And we’ll try to do it visually - we’ll come back to the underlying math later. However, even in this simple setting, we’ll be able to do something useful: control the center of scaling.

The material in the next few pages was covered in a different order in previous years. These parts of lecture 5 explain the material on the next few pages. (note: Lecture 5 gets a detail of handedness wrong, which is explained in Lecture 6)

One thing after another…

On previous pages, we applied transformations in sequence. Each one modifies the current coordinate system to produce a new coordinate system. On the previous pages, we repeated the same kind of transformation. With many kinds of transformations, we can mix it up. Here, we translate then scale (in terms of the order we perform the commands which modify the coordinate systems).

You should be able to predict what happens (even though you can see the result). But step through the program to make sure you really understand it. We move the coordinate system first, and then we scale. So the square is placed to the right of and is bigger.

Can you guess what happens if we reverse the order of the transformations? You don’t have to, since we have the demo.

Notice that the result is different. When we scale first, the coordinate system gets “bigger” so when we translate it, we translate according to these bigger grid cells.

This is a really important concept: transformations apply in the current coordinate system. The ones that come first affect the ones that come later.

To help you compare, here are both demonstrations. Notice how I use save and restore to get back to the original, “untransformed” state so I can do the second example after the first.

Equivalence

In the previous example, order mattered: translation by (T) followed by a scale (S) is not the same as a scale (S) followed by translation (T). However, it is the same as a scale (S) followed by some other translation (T’). Here is that demo again, demonstrating it. In this case, we have to “scale the translation” by 1/2 to counteract the fact that the translation will be scaled by 2.

If we have a translation T followed by a scale S, we can flip the order and make it a scale by S followed by a translation T/S. If we have a scale S followed by a translation T, we can flip the order and make it a translation by T*S followed by scale by S.

When we had all translates, or all scales, any combination of transformations was the same as a single transformation that composed the parts. For translations, we could compose by adding parameters; for scale, we multiplied. And order didn’t matter.

With combinations of scales and translates, things are trickier. Any combination of scales and translations can be represented by a single scale followed by a single translation, or a single translation followed by a single scale.

The process of figuring out this combined transformation is straightforward. We take advantage of two simple things we’ve seen already:

1. If there are two consecutive transformations of the same type, we can combine them into a single transformation (by adding translations or multiplying scales).
2. We can swap the order of a scale/translate (changing the amount of translation by multiplying/dividing).

These kinds of translate/scale combinations are great quiz questions for a graphics class. So we should practice.

Write the following sequence of translations and scales as a single translation followed by a single scale.

1scale(2)
2translate(10,10)
3translate(5,5)
4scale(.5)
5scale(4)
6translate(10,10)
7translate(5,5)

Your answer is:
Translate by: ,
Scale by:

OK, here’s one for you to try yourself. Write this as a single scale followed by a single translation.

1translate(10,10)
2scale(2)
3translate(10,10)
4scale(2)

Your answer is:
Scale by:
Translate by: ,

Actually, try it for the other order as well:
Translate by: ,
Scale by:

Center of Scale

The ability to mix translate and scale allows us to control the center of scale. This is how we solved the scaling problem on the previous page.

The trick: we (1) translate the coordinate system so that its origin is the point where we want the scaling to be centered; (2) apply the scale in this coordinate system; and (3) translate back.

This is a very common pattern: it is worth remembering. Later, we will apply it to transformations other than scale.

The pattern is:

1translate(cx,cy);   // cx,cy is the center of scaling
2scale(sx,sy);       // apply whatever scale you want
3translate(-cx,-cy); // put things back
4draw_object();      // whatever drawing commands

You can combine those 3 transformations into 2 (using what we learned above). But I think it’s easier to remember the pattern this way.

Here’s the example from the previous page. This time with the code showing. The key lines are 3-5.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

const tableTop=canvas.height-50
ctx.fillRect(50,tableTop,200,50);
ctx.translate(150,tableTop);
ctx.scale(val,val);  // val is slider
ctx.translate(-150,-tableTop);
ctx.fillStyle="blue";
ctx.fillRect(100,tableTop-50,50,50);
ctx.fillStyle="green";
ctx.fillRect(150,tableTop-50,50,50);
ctx.fillStyle="red";
ctx.fillRect(125,tableTop-100,50,50);

Notice that lines 3-5 follow the pattern. We want the “center of scaling” (the point that won’t move as things are scaled) to be the bottom center of the object (the lower left corner of the green square). So, on line 3 we translate the coordinate system there, on line 4 we apply the scale, and on line 5 we put the coordinate system “back” (except it doesn’t go back to the same place).

To see what is happening, let’s try it in TransformToy. First, here is what the stack looks like without the scale:

Now let’s make the blocks bigger using the “change of center” approach. The scaling will be a factor of 2. Notice how I translate the center before the scale, and translate “back” after the scale. But, since the translation back is scaled, it takes us to a different place.

This “transformation centering” will turn out to be extremely useful with other transformations. It is also just one example of working in convenient coordinate systems, which we will explore on the next page.

However, since you completed some type-in boxes on this page, it might be a good time to make a checkpoint!