We saw a brief use of scale on this page.
In those examples, it was used to resize an object, but it has another function.
Recall that the arguments to the scale transformation are the values of the x and y dimensions we wish to resize our object to.
If we make either (or both) x and y scale values negative, it has the effect of flipping the object in the dimension specified.
If a translate transformation is also used we may have to do some calculation to determine the x and y values.
This is because supplying negative values to scale works by flipping the objects across the origin (top left) of the SVG. This may result in the object being outside the SVG document (invisible).
House 1 is our original object, placed where it should be according to our code:
To flip the house left-to-right (horizontally) we assign an x value of -1:
Since we only assigned -1 to the x value, the house was only flipped in that dimension.
Note however that we also translated it 350 pixels to the right.
To flip it vertically, we set the y value to -1:
Finally, with House 1.3 we flip it horizontally and vertically:
In this case doing translate, then scale also works (but with a slight modification):
Note that our x and y 'scale' values are both negative, but the 'translate' values flip.
In these examples, we have drawn a new object with each translation and scale. Next we will look at using def and manipulating that.
All done.