rect(20, 20, 40, 40). The coordinate system (a fancier word to describe that "graph paper") is shown in gray, and to keep our example images smaller, the coordinate system shown is 200 pixels by 200 pixels (instead of the default 400x400 size).
rect(20 + 60, 20 + 80, 40, 40)and the rectangle will appear in a different place. (We put the arrow in there for dramatic effect.)
translate()ing). The fill colors are translucent, so that you can see that the red and blue overlap to form a purple square that is at virtually the same place. Only the method used to move them has changed. Fiddle with the numbers below to see for yourself:
pushMatrix()is a built-in function that saves the current position of the coordinate system. The
translate(60, 80)moves the coordinate system 60 units right and 80 units down. The
rect(20, 20, 40, 40)draws the rectangle at the same place it was originally. Remember, the things you draw don’t move—the grid moves instead. Finally,
popMatrix()restores the coordinate system to the way it was before you did the translate.
popMatrix()? You could have done a
translate(-60, -80)to move the grid back to its original position. However, when you start doing more sophisticated operations with the coordinate system, it’s easier to use
popMatrix()to save and restore the status rather than having to undo all your operations. Later on in this section, you will find out why those functions seem to have such strange names.
What's the advantage?
translate()can make life easier.
drawHouse(), which takes the
ylocation of the house’s upper-left corner as its parameters. Notice that the
drawHousefunction has to do a lot of parameter manipulation to get the house drawn at the given coordinates:
translate()function instead of calculating new coordinates? In this case, the code draws the house in the same place every time, with its upper left corner at (0, 0), and lets translation do all the work instead.
translate()instead of calculating new coordinates. Like much of what we teach, it is another tool in your toolbox, and it will be up to you to figure out when it makes sense to use this new