How to create advanced 2D shapes in p5.js

The p5.js library makes it easy to bring graphics and visual elements to our creative coding projects with shapes. While its core functions allow us to draw basic shapes like circles, squares, and triangles, p5.js also offers the tools to build more complex and advanced forms.

Merging basic shapes

Let’s create advanced shapes by merging basic shapes, such as rectangles and ellipses. This requires us to be diligent about setting up and using the coordinatesThe "x" and "y" position of the shape. for the shapes.

Let’s look at an example of how this would work.

Example: Basic shapes

In this example, we’ll use a rectangle and an ellipse to create a "D" shape.

Code explanation

• Lines 1–4: The x and y variables store the coordinates of the shapes. The size variable stores the size of the shapes.

• Lines 7–33: The setup() function sets up the application canvas and the background. We initialize x and y to the center of the canvas, and set the rectangles and ellipses to be drawn from their center point. Then, we draw a rectangle and an ellipse using the x, y, and size variables.

Advanced shapes

Next, let’s look at how to create advanced polygonal shapes using the beginShape(), endShape(), and vertex() functions.

The beginShape() and endShape() functions

The beginShape() begins recording vertices for a shape, and the endShape() stops recording. Let’s look at the signatures for these functions:

• kind is an optional parameter. It’s either POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, QUAD_STRIP, or TESS. It controls the "look" of the shape.

• mode is an optional parameter. We can use CLOSE to close the shape, i.e., connect the starting point to the ending point. count is also an optional parameter. It represents the number of times we want to draw/instance the shape.

The vertex() function

Shapes in p5.js are built by connecting a series of points called vertices. The vertex() function defines the coordinates of these points within the beginShape() and endShape() functions.

The signature of the vertex() function looks like this:

• x is the "x" coordinate of the vertex.

• y is the "y" coordinate of the vertex.

• z is the "z" coordinate of the vertex. It defaults to 0 if not specified. (Optional)

• u is the vertex's texture "u" coordinate. (Optional)

• v is the vertex's texture "v" coordinate. (Optional)

In practice, we usually work with the x and y parameters to create 2D shapes.

Example: Advanced polygonal shapes

Let’s look at an example of creating advanced shapes using these functions. In this example, we can see the effect of the kind variable in showing "kinds" of the beginShape() and endShape() functions. Press the keys "0" to "7" to see the results. Press "c" to open and "v" to close the shape. Press "f" to fill and "g" to empty the shape. Feel free to play around with the code below!

Code explanation

• Lines 1–7: The kind variable stores the type of shape to be drawn. The kindStr variable stores a text description of the shape type. The isClosed variable determines whether the shape will be closed or open. The isFilled variable determines whether the shape will have a filled color or an outline. 

• Lines 10–14: The setup() function sets up the application canvas and the background. The createCanvas() function creates the drawing space with a width of 500 pixels and a height of 500 pixels. The background function sets the initial background color to gray. The frameRate() function sets a target of drawing 60 frames per second.

• Lines 17–74: The draw() function handles the continuous update process. The code responds to key presses, letting the user switch between shape types (like points, lines, triangles), toggle whether shapes are closed or open, and control whether the shapes have a fill color. Additionally, a label function displays the current settings for clarity.

• Lines 76–97: The drawShape() function creates a polygonal shape using predefined vertices.

• Lines 100–111: The utility function label() displays labels. It sets the fill color to black, draws a centered rectangle above the bottom edge of the canvas, sets text alignment to center, sets the text fill() color to white, sets the textSize() to 16 pixels, and displays the input string lab at the center of the rectangle above the bottom edge.

Conclusion

The p5.js library allows us to create complex shapes with ease. There are also methods to create 3D shapes. You can look into the count parameter in the endShape() method for further exploration. Also, there are functions like bezierVertex(), curveVertex(), and quadraticVertex() to create even more complex shapes.