In class today, we’re going to do a little bit of drawing with p5.js. As you learned, 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 could upload the whole package to a server so other people can see it. That’s pretty easy to do!
But because there are a lot of us, and 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 https://alpha.editor.p5js.org/. (The “alpha” in that URL is meant to suggest that this web editor is still under development, so there could be bugs!)
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 Week 10 of CCLE, I’ve placed some files for you. They are two different versions of the book Getting Started with p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry. The first version of the book, the one that ends in .epub, will look a lot nicer, so first try to download and work with that. If you can’t read epubs on your computer, download the second version of the file, the one that ends in .pdf.
When you’ve downloaded the book, go to chapter three and work through the examples. 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.
