p5.js + github
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 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 an 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.
Here are a few examples to give you an idea of what kinds of things people make with p5.js
lerp()functions to create wave forms that were then drawn with a plotter and pens.
random()function to generate new layouts of overlapping lines.
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.
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.
ProcessingLibrary Website Processing Homepage, API reference, and tutorials.
p5.jsLibrary Website pt.js Homepage, API reference, and tutorials.
The Coding TrainVideo Tutorials Dan Shiffman has a wealth of video tutorials for p5.js and creative code.
JS Drawing & AnimationKhan Academy Course Complete, free course on drawing with code using p5.js.
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.
To edit your sketches, you’ll need a code editor. I use VS Code with the following extensions.
|Live Server||The Live Server extension makes it very simple to properly serve you sketches to your browser|
|Prettier||Prettier is a code formatter. It makes sure that your spaces and indents are consistent, improving the readability of your code.|
|ESLint||ESLint will audit your code to find potential problems.|
command-option-j. If you have problems in your code, chrome will report errors in the console.
To create a p5.js Project from scratch you need to do a few things.
.htmlfile that includes the p5.js library.
<script>tags with your
.htmlfile or in a seperate
.htmlfile in a browser to see it run.
This process is detailed in the p5.js Get Started guide.
Always Read your Error Messages
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.
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.
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.
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 formated completely automatically, giving you this benefit without any extra effort.
noise()functions from p5.js to create these organic, jellyfish-like orbs.