

When you talk about angles in degrees, you say that a full circle has 360°. In Processing, all the functions that have to do with rotation measure angles in radians rather than degrees. This function takes one argument, which is the number of radians that you want to rotate. In addition to moving the grid, you can also rotate it with the rotate() function.
VECTOR 2D PROCESSING CODE
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. Triangle(x + 15, y, x, y + 15, x + 30, y + 15) Ĭompare that to the version of the function that uses translate(). Look at all the additions that you have to keep track of. This is the code for drawing the house by changing its position. It uses a loop that calls a function named house(), which takes the x and y location of the house's upper-left corner as its parameters. Here is some code that draws a row of houses. But let's take an example of where translate() can make life easier. For a simple example like the rectangle, you are correct. You may be thinking that picking up the coordinate system and moving it is a lot more trouble than just adding to coordinates. Later on in this tutorial, you will find out why those functions seem to have such strange names. However, when you start doing more sophisticated operations with the coordinate system, it's easier to use pushMatrix() and popMatrix() to save and restore the status rather than having to undo all your operations. Yes, you could have done a translate(-60, -80) to move the grid back to its original position. Finally, popMatrix() restores the coordinate system to the way it was before you did the translate.

Remember, the things you draw don't move-the grid moves instead. The rect(20, 20, 40, 40) draws the rectangle at the same place it was originally. The translate(60, 80) moves the coordinate system 60 units right and 80 units down. pushMatrix() is a built-in function that saves the current position of the coordinate system. Let's look at the translation code in more detail. draw a translucent blue rectangle by translating the grid draw a translucent red rectangle by changing the coordinates Copy and paste this code into Processing and give it a try. Only the method used to move them has changed.

The rectangles are translucent so that you can see that they are (visually) at the same place. Here is code that draws the rectangle in red by changing its coordinates, then draws it in blue by moving the grid. When you use transformations, the things you draw never change position the coordinate system does. Its upper left corner is still at (20,20). The important thing to notice in the preceding diagram is that, as far as the rectangle is concerned, it hasn't moved at all.
