The origin of the shape determines which point the shape is transformed from. For example, some built-in p5.js drawing functions, such as
rect(), are oriented around the upper left corner of the shape—but you can always change your shape’s origin point.
ellipseMode() functions allow you to modify the location from which the shape is drawn by changing how the x and y arguments passed to
ellipse() functions are interpreted.
rectMode(CENTER) function is called, the x and y coordinates passed to the
rect() function changes to represent the center of the rectangle, instead of the top left corner.
The code below shows how to specify a rectangle’s origin point to be its center:
rectMode(CENTER); rect(200, 200, 250, 250);
Here, the first argument of the
rect() function represents the x position of the origin point, which is now the horizontal center of the rectangle. The second argument, which represents the y position of the origin point, is now the vertical center of the rectangle. Since p5.js reads the code from top to bottom, the origin of a shape should be determined before the shape is drawn.
The diagram below shows that the rectangle’s origin point is now in the center of the rectangle.
rectMode(CORNER), the x and y coordinates passed into the
rect() function represents the rectangle’s top-left corner. If you don’t explicitly call
rectMode(CORNER), p5.js will automatically assign the origin to be the
The above code will produce the same results as the code below, which draws the rectangle without specifying the
rectMode(CORNER). Both examples result in the rectangle having a top left corner orientation.
In p5.js, ellipses are automatically drawn from the shape’s center. The first and second values that are passed to the
ellipse() function represent the x and y coordinates of its center point.
The code below explicitly calls
ellipseMode(CENTER) which keeps the ellipse’s origin point at the shape’s center.
Above code will produce the same results as the one below, which draws the ellipse without specifying
You can also change the ellipse’s origin to be from its center to its top-left corner by giving
CORNER as the argument of the
ellipseMode() function. When you use
ellipseMode(CORNER), the arguments for the x and y positions given to the
ellipse() function will represent the top-left corner of the bounding box of the ellipse.
In the line above the
ellipse() function, specify the origin point of the ellipse to be from the
Notice how the position of the ellipse changes.
In the line above the
rect() function, specify the origin point of the rectangle to be from the
Notice how the position of the rectangle changes.