p5.js is “Processing reimagined for the web,” meaning it’s a tool for programming art, sound, animation and more. Like Processing, it’s designed for learning coding in a more interactive and hands-on way. Unlike Processing, p5.js is in JavaScript, so it’s made for the web. Everything you write (if it works!) should be able to run in a browser.

When we started teaching p5.js on Kadenze, there was a great IDE (integrated development environment) where you could write code and run your sketch, no questions asked. That IDE has since been deprecated, so the biggest hangup for one of the easiest frameworks to get into became: how do I actually use the thing?

There are two really good solutions for this: one even simpler than the old IDE, and one a little more complicated to set up, but great once you’re used to it. The first is the p5 Web Editor, and the second is a quick, local environment setup using Browsersync.

Easy mode: p5 Web Editor

Works out of the box, and looks good too. The p5 Web Editor lets you write p5 code right in your browser, and runs in your browser, so no installation necessary. It’s even got a basic file directory system so you can add images to work with. This feature is in alpha right now, so don’t expect everything to work perfectly, but it’s really fantastic if you just want to see what p5 can do.

Pro mode: Browsersync

If you’re alright with doing a little bit of work in the console, Browsersync is an excellent tool for working in p5 (and web development in general). You can use it to run a basic server, and look at your sketch in your preferred browser. Browsersync can also be configured so that it will hot-reload every time you make changes to a file, which is how we’ll use it here. Below is what a basic directory for a p5.js project should look like:

Obviously you’ll need p5, which you can download here.

In this example, we’re going to use the following as our index.html page: just a simple, no-nonsense page that loads in the necessary scripts and does a bit of styling to let your sketch take up as much of the screen as you need.

We’re assuming you already have Node installed, but if you don’t, there are a million guides out there, so we won’t add to the pile. It’s super easy to download and install it straight from the site. Make sure you also install npm (Node Package Manager)!

Once you’ve got Node and npm, open up your terminal/bash/shell and enter the below script to install Browsersync:

$ npm install -g browser-sync

Once it’s done, open up the project’s directory in your terminal. Then:

$ browser-sync start --server --files "*"

You’re done! Browsersync will automatically open up a tab running your index.html file, which means your p5 sketch will run like a dream (if there are no bugs, that is). Whenever you save changes to any file in the directory, it’ll automatically refresh as well. You can also specify a browser to load in like so:

$ browser-sync start --server --files "*" -b="firefox"

What’s your environment look like? Let us know on Twitter @kadenzeofficial. Once you’ve got yourself going in p5, try out one of these free online courses to see how powerful it is:

Introduction to p5.js



The Nature of Code