# Page 2: Scale Transformations

## CS559 Spring 2021 Sample Solution - Workbook 3

Written by CS559 course staff

You can try out the example solutions here. The interesting code is on page 6 and page 8.

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. Again, you might try the 2D Transform Demos that try to illustrate this (try “Simple Scale” in the default examples).

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 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.