scale() is another function that transforms the p5.js coordinate system. As shown in the image below, you can see that the
scale() function changes the size of the coordinate system as well the elements placed on it.
Notice how the size of the shape’s strokes also gets larger. This is because
scale() enlarges the whole p5.js coordinate system, not just the shape. In a sense, the
scale() function is like zooming in and out of the canvas.
scale() function can take two arguments but must have at least one to represent the percentage amount for scaling the canvas. Scale values are written in decimal percentages. For example,
scale(2.0) multiplies the size of the coordinate system and all of its elements by 200%. The default scale for the p5.js canvas is 1.0 or 100%.
Let’s take a closer look at the syntax above:
srepresents the percentage value to scale the canvas. It is also the percentage to scale the canvas along the x-axis if the second
yargument is given.
ycan optionally be given to represent the percentage value to scale the canvas along the y-axis.
Similar to the
rotate() function, if you want to scale a shape from its center, you would need to set the origin point of the shape to
CENTER. In the image below, you can see the difference between scaling from a shape’s
CORNER versus its
Above the first
rect() function, scale the rectangle down by 0.5. This means the rectangle will scale down by 50%.
Above the second
rect() function, scale the rectangle up by a value of 4. This means it will scale up by 400%.
Below the last
scale() function that scaled the rectangle by 400%, set the origin point of the rectangle to be