p5.js Skill Building: Creating Shapes

Objectives and Overview

This lesson reviews the process for creating an ellipse and introduces some new shapes. This should be an active exploration time. Additionally, this lesson introduces the p5 Reference Manual and contains activities designed to help you build familiarity with using this resource.

Learning Objectives

  • Demonstrate familiarity with basic p5 skills such as using shapes and changing colors by integrating them into a sketch.
  • Demonstrate the ability to use the p5 Reference Manual to find information by looking up additional information about rect().

Building With Shapes

In the previous lesson, you created an ellipse with code. Ellipses are one of the first hello world projects that creative coders do with p5. However, there are many other shapes and line drawing methods available. This lesson introduces some of the shapes, but the bulk of the time should be spent actively practicing and writing code.

Basic Review: The Ellipse

Remember, draw() repeats on a loop and is often contains the bulk of the project code. At this point, you should already have created your canvas in setup(). If you don’t remember how to do this, review the previous lesson.

Most p5 shapes share similar syntax. Typically you’ll include parameters such as the x and y origins, height, and width. Some shapes, especially more complex shapes, have additional parameters that you need to include. Let’s revisit an example from before:

Write the following code in draw():

function draw() { ellipse(100,100, 50,50); }
Code language: JavaScript (javascript)

The example shows that ellipse() takes four parameters: x origin, y origin, height, and width. Remember that (0,0) is the top left corner of the canvas. This example sets the origin 100 pixels to the right and then 100 pixels down so that the center of the ellipse is at (100,100). The ellipse is drawn with a height and width of 50 pixels each. Experiment with changing some of these values and see what happens when you re-run your code.

Going Further With Shapes

This is a great opportunity to start exploring the p5 Reference Manual. The reference is available online and is thorough and well-documented. Try to build the habit of using online documentation to find answers to questions that you have, as this is a core programming skill. The more familiar you become with using reference pages to answer questions, the more independent you’ll become.

Here is a link to the shapes section: p5 Reference Manual: Shapes.

In that section, there are several shapes broken into different categories. If you click on one of them, such as the ellipse, you’ll be taken to a page with an explanation and code examples. The documentation further breaks down the parameters that can be included. Try reading the documentation about a shape and then create a quick example sketch. This is a great way to build your knowledge and skill by experimenting with p5.

Activity: Shape Practice

If you haven’t already, navigate to the reference manual and select a shape. Use the documentation to guide you in integrating it into your sketch. If you get stuck, consult the manual and follow the examples.

Here’s a link to help you get started: p5 Reference Manual: rect(). That link is to the rect() reference page. Follow along with the code examples and pay attention to the parameters that it uses. Try changing some of the values and complete the following tasks:

  • Draw a rectangle in the top quadrant of your screen.
  • Draw a rectangle with rounded corners in the bottom quadrant of your screen.
  • Select two other shapes and draw them in the remaining quadrants.

If you finish this early, try to stack shapes together to create your own original designs!