There are two ways to move a shape across your canvas. Let’s say you wanted to move your rectangle 60 pixels right and down, you can add 60 pixels to the x and y coordinates given to the rect() function. For example, rect(0, 0, 100, 100) would change to rect(60, 60, 100, 100). This is how we’ve been drawing and positioning shapes so far.
Another method is to move the p5.js coordinate system itself instead of moving the shape. The translate() function does exactly this—it changes the (0, 0) origin of the p5.js coordinate system to be the location specified as the function’s arguments.
For example, translate(60, 60) will move the coordinate system 60 pixels to the right and 60 pixels to the bottom. The first argument in the parentheses represents the amount of pixels to move along the x-axis. The second argument represents the amount of pixels to move along the y-axis.
Both ways would change the position of your shape, but the main difference is that instead of moving the shape itself, the translate() function moves the entire sketch’s coordinate system to the new position specified within the parentheses.
The diagram below shows the rendering of rect(0, 0, 140, 140). As you can see, the shape’s origin point is at (0, 0).
Notice what happens to the rectangle when you apply translate(40, 40) to it. The rectangle moves 40 pixels right and down without having to change the x and y arguments for the rect() function—the first and second arguments of the rect() function remain at (0, 0).
Keep in mind that transformation functions, like translate(), accumulate. This means that the x and y values given to a second translate() function will not represent the exact position of the new origin. Instead, the values inside the first and second translate() functions will add up to become the new position.
In the diagram below, you can see that while the second rectangle is translated by 160 pixels to the right and the bottom, the top-left corner of the shape is not at the x and y coordinate of (160, 160). This is because the second translation by 160 pixels to the right and the bottom is added onto the first translation by 40 pixels to the right and the bottom. Together, this adds up to set the new origin at the coordinates (200, 200).
The main benefit of the translate() function is that the shapes become independent of the position. This means that you can reuse the code for a shape multiple times to be drawn in various locations without having to assign new x and y variables for the shape functions.
Instructions
Above the first rect() function that has a width and height of 360 pixels, translate the shape by 60 pixels right and 60 pixels down.
Right above the second rect() function that has a width and height of 180 pixels, translate the shape to be 60 pixels right and 60 pixels down.
Notice how the second rectangle is not in the same location as the first rectangle, even though both rect() functions have the same x and y positions.