Hello, p5!

Processing and p5.js

This book explores a wide range of media and provides examples in a variety of languages and libraries. The most commonly used library is p5.js, a very popular JavaScript creative coding library. The p5.js is a JavaScript version of the Processing creative coding language and library.

Both Processing and p5.js were created to support students learning computer programming within a creative art and design context. Because p5.js has a contained scope and a strong community, it is a great library for teaching, learning, sketching, and experimenting.

A full introduction to p5.js is outside of the scope of this book, but this chapter aims to point you in the right direction.

Processing

Processing is a programming language created for visual artists learning to make creative coding projects. It was released in 2001 by MIT Media Lab alumni and creative coders Casey Reas and Benjamin Fry. The project is now also led by Daniel Shiffman, who has published a number of popular books and video tutorials on creating art with Processing.

Processing combines a simple programming environment, a programming language built on top of Java, and a drawing library to create a low friction entry point for creative computing. In addition to the basic but powerful drawing API, and has libraries for other common applications like sound and networking.

p5.js

The p5.js library was created by artist Lauren McCarthy to bring the Processing API and spirit to JavaScript and the web. Programming with p5.js is very similar to working in Processing, with the benefit that p5.js sketches work in any modern browser.

Here are a few examples to give you an idea of what kinds of things people make with p5.js

Amy Goodchild

Curved Line Jellyfish, 2020

Amy used the curve() and noise() functions from p5.js to create these organic, jellyfish-like orbs.

Curved Line JellyfishCase Studyamygoodchild.comArtist Site

Roni Cantor

Programmed Plotter Drawings, 2020

Roni used the p5.js sin() and lerp() functions to create waveforms that were then drawn with a plotter and pens.

Programmed Plotter DrawingsProject Page

Jenny Kowalski

Haystack, 2021

Jenny uses the p5.js random() function to generate new layouts of overlapping lines.

HaystackProject Pagejennybkowalski.comArtist Site

Daniel Zou

WORM, 2020

Daniel created a Pac-Man-like game purely using p5.js.

WORMProject Pageactbee.github.ioArtist Site

Studio Dumbar

DEMO Festival, 2019

Studio Dumbar took advantage of p5.js mouse interactions to create DEMO festival's web experience. The apertures of the letterforms in the festival's logo move with the user's mouse.

DEMO FestivalEvent PageStudio DumbarArtist Site

Playables (Mario von Rickenbach and Michael Frei)

Coin, 2019

This simple coin slot game was created purely with p5.js.

CoinGame Pageplayables.netArtist Site

A p5.js Example Sketch

Want to try p5.js RIGHT NOW? The example below draws a very simple house. You can try changing or adding to the house by editing the code below. You’ll need to hit cmd/ctrl-s to update the code after you make changes.

Learning Processing and p5.js

Processing and p5.js are both widely popular open-source projects with large, active communities. They are also both well documented. You can start with either language, you don’t need to know Processing to learn p5.js. These resources are a good place to start.

Sketching Locally

You can try out p5.js in the editor above, but to start making your own sketches you’ll want a better setup. The most common way to work with p5.js is to use a local editor and browser. You will probably need a local web server too, because Chrome won’t let your code do certain things unless it comes from a server.

Recommended Tools

Code Editor

To edit your sketches, you’ll need a code editor. I use VS Code with the following extensions.

Web Browser

To view your sketches, you’ll load them in a web browser. I tend to use Google Chrome because I like its developer tools. In Chrome, be sure to open the JavaScript console with command-option-j. If you have problems in your code, Chrome will report errors in the console.

Creating a p5.js Project

To create a p5.js Project from scratch you need to do a few things.

1. Install a text editor and browser.
2. Download the p5.js library.
3. Create an .html file that includes the p5.js library.
4. Write a sketch in JavaScript. The script will be included either in <script> tags with your .html file or in a separate .js file.
5. Load the .html file in a browser to see it run.

This process is detailed in the p5.js Get Started guide.

Tips

1. Always Read your Error Messages

   Once you are up and running be sure to open the JavaScript console to see error messages and debugging information. In Chrome you can open the console with the View » Developer » JavaScript Console menu or by pressing command-option-j. When something goes wrong with your code, Chrome tries to help by providing error messages in the console. Sometimes these messages are not very clear, but they are always more helpful than nothing.

   Keep the console open all of the time.

2. Run a Local Server

   If you are working with a source code editor like VS Code, you are going to need a local server or your web browser will complain about security issues. The Live Server extension for VS Code makes this super simple.

3. Use Live Reload

   It is important to break down your problem into small steps and try them out one by one. It is a good idea to reload your sketch after each small change, so you will be reloading very often. Manual reloading requires saving, switching to the browser, and reloading. Live Server provides live reloading by default. It will tell the browser to reload every time you save. This keeps you in your editor and speeds up your workflow.

4. Use a Code Formatter

   When your code is well formatted it is easier to read and it is easier to spot mistakes. A code formatter will keep your code consistently formatted completely automatically, giving you this benefit without any extra effort.