Page 2: Scale Transformations

Last page, we learned about our first transformation, translate. Now, let’s learn a second one: scale.

Boxes 1 and 2: Scaling Up

A scale transformation makes things bigger or smaller by multiplying all of the coordinates by some value.

If we want to double the size of things, we multiply all the coordinates by two. If we want to halve the size of things, we multiply all coordinates by 1/2.

Here are some examples ( 03-02-01.html and 03-02-01.js)- in each case, same drawing, but with a different scale.

The first is drawn without scaling, the second with scale=2 (double), the third with scale=.5.

To be a little more complete like we did with translation:

Just like translation, you could have done this by doing something to each of the coordinates. With translation, we added. Here we would multiply. The code ( 03-02-02.html and 03-02-02.js) uses scale.

So, you can think about scale as multiplying all the coordinates by the scaling factor. It is a transformation, or function that takes a point and returns a new point. So, scale(s) can be thought of as a function f(x,y) => (sx,sy).

However, we can also think of scale as changing the coordinate system that we use to interpret points. It changes the basis vectors. Rather than telling us to interpret the value of x as being pixels to the right, it tells us to interpret each unit of x as a different number of pixels to the right. And likewise for y.

You can think of translate as moving the piece of paper that we are going to draw on. You can think of scale as stretching the piece of paper that we draw on. If you like my animated demos, you can look at the “Simple Scale” and “Multiple Simple Scales” example in 2D Transform Toy (default demos).

This idea of thinking about transformations as things that alter the coordinate system (how we interpret object coordinates) rather than being functions that change points is an important concept in computer graphics. Once you get used to it, it makes lots of things easier. It will be important to be able to think about things both ways.

Here are two quick reasons why thinking in terms of changing coordinates might make sense. First, when we do the transform operation (the scale or translate command) - they don’t even have the objects/points to draw yet! We are simply setting up the coordinate system that future objects will be drawn into. Second, when we apply multiple transformations, it tells us how the changes occur. If we do a first transformation, it changes the coordinate system. The second transformation changes that resulting coordinate system. We’ll see this in a bit.

Box 3: Non Uniform Scales

The Canvas scale function allows us to specify separate scaling factors for box x and y. In the example above, we gave the same value to both. Just for completeness, here’s a variant of that last example ( 03-02-03.html and 03-02-03.js):

We call a scale where all the dimensions have the same scale factor a uniform scale. We call a scale where dimensions have an unequal values a non-uniform scale.

Box 4: Center of Scaling

Since we’re multiplying by the scaling factor, the point (0,0) does not change as we change the scale factor. However, all other points will change. This can make objects seem to move if we’re not careful. This example is really similar to the ones above, except that rather than placing the square at the origin (0,0), the square is placed at (10,10). Note how the square appears to move as you slide the slider. Look at 03-02-04.html and 03-02-04.js

You should understand why this is happening: when we multiply by the scaling factor, every point (except for (0,0)) moves. If we scale by 2, the point (10,10) moves to (20,20). It doesn’t matter if it is the top left corner of our square, or something else.

This apparent motion can be inconvenient or annoying if you just want to make an object bigger.

With scaling, there is always exactly one position that doesn’t change. It is called the center of scaling. It is at the center of the coordinate system. Looking ahead, we can change the coordinate system to be wherever we want so that scaling grows from whatever point we want. But in order to do that, we need to be able to put transformations together.

Box 5: Multiple Scalings

We can apply multiple scale transformations. Each time, we stretch the coordinate system more before we either draw (or apply another scale). If we are just doing scaling, the scale factors multiply, and scalar (regular number) multiplication is commutative.

Here’s an example using transparency. Look at the code ( 03-02-05.html and 03-02-05.js): we scale, draw the red box, scale again, and draw the blue box. The blue box is scaled by both scalings. This is the same as multiplying them together.

You can also try the “Multiple Simple Scales” demo on the 2D Transform Toy (default demos).

On the next page, we will combine translation and scaling transformations. When we start to combine things, order will start to matter.

Box 6: Try it

OK, a small exercise. This box has 2 versions of the same picture. One has many scale commands. In the second box (the line that says “change this”) change the single scale command so it does the same thing as the other version of the code. You need to edit 03-02-06.js file, you don’t need to edit 03-02-06.html.

Just change the numbers in the last scale command (now they are 1,1).

Summary

We’ve learned to scale things. Now let’s put that together with translation on page 3.

Next: Composition