Intro to p5.js

Beyond Processing and into JavaScript and p5.js

p5.js. created by Lauren McCarthy, is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for the web. While we are not going to use p5.js exclusively in this class, it will serve as a good foundation for getting up and running with JavaScript to make browser-based text experiments.

The p5.js editor (created by Sam Lavigne) is currently in development, for your assignments you are welcome to try out the alpha. You can help by posting feedback and bugs Support for Windows and Linux coming soon, along with more features. Download the current release.

If you prefer, you could also just use a text editor. Here are some options:

  • Sublime — recommended, need a license or deal with pop ups
  • TextWrangler — free
  • brackets.io — free, dynamic code update, a little more confusing gui at first

With a text editor, you’ll want to run a local server (Python SimpleHTTPServer or Apache) to test your work.

Basic p5.js sketches look a lot like Processing code, just in JavaScript. There are some key differences, however. This tutorial outlines those differences and this tutorial will walk you through the basics of getting started.

You’ll also want to get used to using the console and other developer tools in the browser. Here’s some documentation for Chrome). For Firefox, check out this Firebug tutorial.