Basic & Advanced Shapes
Drawing Basic Shapes
p5.js allows us to create basic shapes with the use of the following functions:
ellipse( )- circles, ovals
rect( )- rectangles, squares
triangle( )- all triangles
arc( )- portions of circles/ovals
Each shape function requires a different set of arguments to be added when called. Typically, the first two arguments dictate the X and Y coordinate of a point of the shape’s placement on the canvas, while the following arguments dictate the shapes size:
- ellipse(X location of the shape’s center, Y location of the shape’s center, Diameter (Total Width of the shape), Diameter (Total Height of the shape)
- A perfect circle would use the same number for the third and fourth arguments.
- rect(X location of the shape’s upper lefthand point, Y location of the shape’s upper lefthand point, Total Width of the shape, Total Height of the shape)
- Since the shape is placed on the canvas by it’s upper lefthand corner, the location of the other corners of the square can be determined by the numbers used for the third and fourth arguments.
- Example: calling
rect(50, 50, 100, 100)would have the upper lefthand corner located at 50 X & 50 Y, and the upper righthand corner at 150 X & 50 Y, and the lower righthand corner at 150 X & 150 Y.
- A perfect square would use the same number for the third and fourth argument.
- triangle(X location of the shape’s first point, Y location of the shape’s first point, X location of the shape’s second point, Y location of the shape’s second point, X location of the shape’s third point, Y location of the shape’s third point)
- Unlike ellipses and rectangles, p5.js draws triangles based on the coordinates of all three of the shape’s corner points. You can place these point coordinate pairs in any order you’d like, but it is best to image drawing the shape on the canvas moving from left to right or right to left in order to keep track of the point coordinates in your head.
- arc(X location of the shape’s center, Y location of the shape’s center, Total Width of the shape, Total Height of the shape, Start of the arc’s perimeter, Stop of the arc’s perimeter)
- The first four arguments are the same as those used to create an ellipse.
- The fifth argument states where to start drawing the outer perimeter of the circle. p5.js draws the perimeter counterclockwise, and the sixth argument tells the function at what point to stop drawing the perimeter.
- Be default, p5.js requires radians (PI, QUARTER_PI, etc.) to be used for the fifth and sixth arguments of
arc( )but it is a bit easier to use degrees (0-360). In order to use degrees instead, call
angleMode(DEGREES)before calling your
arc( )function and p5.js will convert the fifth and sixth arguments properly.
calling arc(120, 15, 60, 60, 90, 270)draws a half circle split vertically, with its center located at 120 X & 15 Y, 60 pixels wide and 60 pixels tall (if the entire circle was drawn), with a perimeter that starts at 90 degrees and extends counterclockwise stopping at 270 degrees.
- By default, arcs are left “open” when drawn. To add a stroke outline to the flat edges of an arc, add the word PIE as a seventh argument to the
An example of these four basic shapes can be found in the code below. Try changing some of the arguments to see how this modifies the shape’s location or appearance:https://codepen.io/lsuddem/pen/zQRVby
Outlines (Stroke weight and Stroke Color)
p5 draws shapes with a thin black outline by default. This outline is called the stroke, and it can be modified in a number of ways.
stroke() function changes the color of any shapes drawn after it is called. It can take either a String or RGB color values as arguments, similar to the
The thickness of a shape’s stroke can be set with the
strokeWeight() function. It takes a single argument that sets the thickness in units of pixels.
To remove an outline from a shape entirely, use the
The following code adds changeable stroke color and stroke weight to the same shapes from the previous code. Try adding the
noStroke() to see its effect:
Drawing Custom Shapes
We can create complex images by overlapping basic shapes, but we can also design our our shapes by connecting multiple vertices together. To do this, we first call the
beginShape()function, then one
vertex() function with a pair of X & Y coordinates for the location of each angle point of our shape. Finally, we call the
endShape() function to designate that we have completed our design. Similar to the
triangle() function, p5 draws connects the coordinates in our
vertex() functions in the order in which we code them, so take extra care to have a plan in place for working in a clockwise or counterclockwise order or you will have stroke outlines bisecting your finished shape.
Like the arc() function, the final line segment of our custom shape is left “open”. To add a final stroke and “close” the shape, we can add the word CLOSE as an argument in the
The following code shows two custom shapes drawn using the