Page 4: Something Bigger: Scale

Scale Transformations

The scale transformation is another simple transformation. It makes things bigger or smaller by multiplying all positions by a constant value (the scale).

Here you can try it out:

An important thing to notice: the center (the origin in this example) does not change. This is called the “center-of-scaling”. Scaling multiplies the points by the scale factor. Therefore the origin (zero) does not change.

We can try this in TransformToy to see how it compares to translation. Notice how we change the coordinate system, and then we place the points in the coordinate system.

The square’s corner at 0,0 ends up in the same place. In contrast, notice what happens if the square isn’t at the origin - it effectively is “moved” by the scale to a new place.

This one might make it clearer. It just draws a square before we change the coordinate system. Remember, once something is drawn, it stays where it is.

This example is worth reiterating to emphasize some key concepts. Notice that the two fillRect commands have the same position and size (but different colors). The squares are in different places because the coordinate system changes in between the commands. Also notice that once the first rectangle is drawn, it stays where it was placed. The current coordinate system is used for new objects, it doesn’t go back to change old objects.

Another small detail: notice that the scale command in TransformToy takes two parameters. This allows us to have a separate scale in both the X and the Y directions. You can try it out:

When X and Y are scaled by different amounts, we call it a non-uniform scale. Scales where X and Y are the same are called uniform scales. But this is the most common case.

The HTML5 Canvas function also takes two parameters, allowing for non-uniform scale. Like the other transformation commands, it modifies the current transformation.

Combining Scales

As with any transformation, we can have a sequence of scales that combine to make a combined transformation. Scales (like translations) are closed. Any sequence of scales can be represented by one “combined” scale. Translations also have this property.

Here’s an example to try…

Notice that scales combine by multiplying. If you double something, and then double it again, you have multiplied it by 4. This is different than translation.

Center of Scaling

Having the center of scaling be at the center of the coordinate system is often inconvenient. We might want the object to grow/shrink from a different place.

Here’s an example. I’m going to make a “sculpture” out of blocks and place it on a table (a black rectangle). Since I want to change the size of my sculpture, I’ll use a scale on it. The variable val has the value of the slider. Before moving the slider, see if you can figure out what will happen when you change its value.

1
2
3
4
5
6
7
8
9

const tableTop=canvas.height-50
ctx.fillRect(50,tableTop,200,50);
ctx.scale(val,val);  // val is slider
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);

On the next page, we’ll see how we can fix this by combining translate and scale. But to give you a preview, here’s a version that behaves better. We’ll explain the code on the next page…

What I’ve done here is made the center of scaling to be at the bottom center of the sculpture. We’ll learn how to do it on the next page.

Before We Move On

Scales are simple, but there are a few key points I want to emphasize before we move on:

1. There is a center of scaling (the origin) that does not move. All other points move. Sometimes this can be inconvenient.
2. Transformations change the current coordinate system. Things that are already drawn are not affected.

To make scales more useful, we will put them together with translations.