P5.js is a JavaScript library designed to help you make interactive drawings and share them on the web.
Open up the web editor
There are a few different ways you could code in p5. One of the most common ways is to download p5, write your program in a text editor, and view your drawing in a browser. Then, when you’re ready, you can upload the whole package to a server so other people can see it. That’s pretty easy to do!
But because we’re all using differently configured computers, we’re going to do something even easier: We’ll use an interactive web editor for p5. This is a way to write and execute your p5 code directly on the web.
To open the editor, go to editor.p5js.org/.
Understanding the web editor
You’ll notice that your screen is divided into two parts. The left side is where you write your code; the right side, where it says Preview, is where you’ll see your drawing.
The left side of your screen, the editor, is already populated with two JavaScript functions. (Functions are bits of code that do something.) The first function, setup( ) builds a canvas (a drawing space) that is 400 pixels tall by 400 pixels wide.
The second function, draw( ), colors the background of the canvas gray. (The number inside the background( ) function, 220, refers to a grayscale integer value — a number between 0 (black) and 255 (white)).
But the right side of your screen is white, not gray! What’s going on? Well, in order to execute the functions in your editor, you have to click the play button. Try that and see what happens.
Can you figure out how to make the background black? Try that and press play.
Work through chapter three
Under Module 3 of BruinLearn, I’ve placed chapter three of the book Getting Started with p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry. Work through the examples, using the web editor. With the knowledge you gain, try to draw a set of images that look like the picture below. Remember, the p5js.org website has a Reference section that will help you understand the various functions.
