Page 8: TransformToy

This page is a “tutorial” for TransformToy - it covers the basic transformations. It will show some of the transformations we haven’t seen yet. But it is basically an optional review. Feel free to go on to Next: Page  9 - Translate Transformations (Again), and come back here if you want to see something in TransformToy.

Because we haven’t discussed all of these transformations yet, the discussion might not make sense.

Translation

Here is a simple tool to help us explore how transformations work. Below, we can see a simple example of a coordinate frame. The frame has its origin (0,0) in the center of the canvas, its x-axis pointing to the right, and its y-axis pointing down (i.e., its x-axis grows larger as we move to the right and its y-axis grows larger as we move down).

When you click “Next”, the animation will move one step forward, drawing a blue square at (0,0).

Click “Next” again and the coordinate frame is translated by (20,20) so that its origin is now at (20,20).

When you click “Next” a third time, a red square will be drawn at the new origin (20,20).

Notice that, when you click “Next” until you reach the end, we did not have to offset the red square: the translation took care of that for us. This means that for more complex drawings, we can assume we are drawing around (0,0) and let the transformations handle where things actually end up on the canvas. This is especially useful when we want to draw something complex without having to do all the math to move it around the screen correctly - if we can draw it around (0,0) then we can draw it anywhere.

To replay the animation, you can either press the “Previous” button to go back one step at a time or the “First” button to go back to the beginning. You can also press the “Last” button to go to the end of the animation.

You should also notice that there are several instructions listed beneath the canvas. These instructions are what tell the animation what to do at each step. The next step in the animation is colored red.

If you use the slider, you can slide around the animation to see its state at different points in time.

All instructions listed below can be executed in JavaScript by calling the corresponding functions such as context.translate(x,y), context.rotate(angle), and context.scale(sx,sy) where context is a 2D context gotten from canvas.getContext('2d').

Scaling

Besides translation, there are several other types of transformations we can use, such as scaling and rotating.

Below is an example of scaling.

As you step through the animation, a blue 20x20 square is drawn at (0,0), the coordinate frame is scaled by a factor of 2 in both the x and y directions, and a red 20x20 square is drawn at (0,0).

Notice that the red square appears larger than the blue square even though both squares were drawn with the same dimensions. The red square appears larger because the coordinate frame was scaled before it was drawn.

This means that anything you draw can be made arbitrarily larger or smaller by scaling the coordinate frame before it is drawn.

Rotation

Now let’s see an example of rotation.

In this example, a blue box is drawn at (0,0), the coordinate frame is rotated by 45 degrees, and then a red box is drawn at (0,0).

Without changing the dimensions or position of the red box, we have drawn it at a 45 degree angle simply by rotating the coordinate frame before drawing it.

Composition

Transformations can be combined to create more complex effects. In this example, we first scale the coordinate frame by a factor of 4 in both the x and y directions and then translate it by (10,10). After these two transformations, we draw a red box at (0,0). Because of the scaling, the red box is drawn much larger than if it were drawn without any transformations.

Here is an example where we combine translation, rotation, and scaling.

Shearing

Shearing is another type of transformation that skews the coordinate frame along a given axis. This example shows how shearing works by first drawing a blue box at (0,0), then shearing the coordinate frame along the x-axis by a factor of 1, and finally drawing a red box at (0,0).

JavaScript does not have a built-in function for shearing, but we can achieve the same effect by using the context.transform(a, b, c, d, e, f) function where the parameters correspond to the following transformation matrix:

$$\left[\begin{array}{ccc}a& c& e\\ b& d& f\\ 0& 0& 1\end{array}\right]$$

We’ll learn more about transformation matrices later.

For now, just know that to shear along the x-axis by a factor of shx, we can use the following parameters:

$$\left[\begin{array}{ccc}1& shx& 0\\ 0& 1& 0\\ 0& 0& 1\end{array}\right]$$

Here it is in action:

To shear along the y-axis by a factor of shy, we can use the following parameters:

$$\left[\begin{array}{ccc}1& 0& 0\\ shy& 1& 0\\ 0& 0& 1\end{array}\right]$$

Here it is in action:

Save and Restore

When working with transformations, it is often useful to save and restore the coordinate frame. This allows us to make temporary changes to the coordinate frame without permanently affecting it.

In this example, we first draw a blue box at (0,0). We then save the current coordinate frame, translate it by (30,30), and draw a red box at (0,0). After drawing the red box, we restore the coordinate frame to its previous state, rotate 45 degrees, and draw a green box at (0,0).

This allows us to do arbitrarily complex transformations for drawing the red box without affecting the coordinate frame used to draw the green box.

Putting It All Together

Now that we’ve seen how translation, scaling, rotation, and shearing work individually, let’s see an example that combines all of these transformations to draw a house that is standing on one corner.

Take a moment to recognize how each command and each transformation contributes to the final drawing.

Your Turn to Play With It

Here is a version of TransformToy where you can create your own transformations and see how they work. Type them into the text box and then click “Run” when you want to see the result. After you see the result, you can click “Edit” to go back and change your transformations.

Next: Page  9 - Translate Transformations (Again)