3. Ordering, Part II

Sometimes when transforms combine unexpected things happen.  Consider what happens when you scale differently in x and y.  For example, if you scale x by 3, and leave y unscaled with the call g.scale(3.0, 1.0) you would see the result on the left.  This is as expected:  The M is three times as wide as what was drawn.

Now if you were to rotate the coordinate system with g.rotate(90.0 * Math.PI / 180.0) after the scale, you might be surprised to find that the M is now three times as tall rather than wide!  This is shown at right.

While this might seem unintuitive, it is correct.  The scale operation warps the coordinates when it is applied.  The subsequent rotation occurs in the scaled coordinate system.  Notice that the tic marks on the axes haven't changed in the second example.  Rotation by 90 degrees will bring the tic marks on the y axis to the corresponding ones on the scaled x axes.

A circle might make this more clear.  The first two examples below are exactly the same as the two above, only a circle has been drawn centered on 0,0.  The circle has a radius of 20, so it overlaps the second tic mark on each axes on either side of the origin:

Scale Scale & Rotate Scale & Rotate g.scale(3.0, 1.0); g.scale(3.0, 1.0); g.rotate(90.0     * Math.PI     / 180.0); g.scale(3.0, 1.0); g.rotate(25.0     * Math.PI     / 180.0);

Notice that the rotation doesn't affect the circle at all!  This is correct: no matter how you rotate a circle about its center point, it looks the same.

The third example might appear a little perplexing.  While the circle is preserved, the axes aren't even perpendicular to each other anymore!  If you are having trouble seeing why this is correct, it might help to think of it this way:   The scaling operation transformed the coordinates so that 20 units on the original x-axis takes three times as many pixels as 20 units on the y-axis.  A computer might use such a scaling if the physical display had pixels that were three times as high as they were wide.  Then, when the final drawing were rendered on such a screen, what you'd see is a perfectly round circle, the M rotated by 25 degrees, and perpendicular axes.