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.
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).
//First rectangle is at (40, 40) translate(40,40); rect(0, 0, 80, 80); //Second rectangle is at (200, 200) because translate() accumulates translate(160,160); rect(0, 0, 80, 80);
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.
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.