p5.js + p5.dom
Processing and p5.js
Processing is a programming language created for visual artists learning to make creative coding projects. It was created in 2001 by MIT Media Lab alumni and creative coders Casey Reas and Benjamin Fry. The project is now also let 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 and a programming language to create an low friction entry point for creative computing. Processing provides a basic but powerful drawing API, and has libraries for other common applications like sound and networking.
Learning Processing and p5.js
Processing and p5.js are both widely popular open-source projects with large, active communities. They are both well documented as well. You can start with either language, you don’t need to know Processing to learn p5.js.
|Reference||The Processing core API Documentation|
|Tutorials||Official Processing tutorials|
|p5.js Reference||The p5.js core API Documentation|
|p5.js Tutorials||Official p5.js tutorials|
|Shiffman’s Videos||Dan Shiffman has a full range of video tutorials for p5.js and creative code.|
JS Drawing & Animation
|Complete, free course on drawing with code using p5.js.|
A p5.js Example Sketch
This sketch 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.
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.
- Google Chrome
command-option-j. If you have problems in your code, chrome will report errors in the console.
- Atom is a free text editor from Github. It works pretty good for quick p5.js sketches, especially if you install a few add-on packages. I recommend installing and using these.
|jsformat||Consistently formats the spacing and indenting of your code. Well formatted code is much easier to read and work with.|
|linter||Base package that looks for and reports mistakes in your code.|
|atom-live-server||Provides a simple webserver right from Atom, complete with live reload.|
Lately, I’ve also been using VS Code with similar packages. You can use any text editor you wish.
Creating a p5.js Project
To create a p5.js Project from scratch you need to do a few things.
- Install a text editor and browser.
- Download the p5.js library.
- Create an
.htmlfile that includes the p5.js library.
<script>tags with your
.htmlfile or in a seperate
- Load the
.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
You are going to need a local server. As soon as you start working with images or other network resources, Chrome is going to require that your code be served via
httpinstead of the local file system. The
atom-live-serverpackage for Atom provides a super easy-to-use and simple web server you can start right from within Atom.
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. The
atom-live-serverprovides live reloading: 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.