Friday, Jun 27, 2025

# Creating Visuals with p5.js

p5.js is a graphics programming toolkit for JavaScript that provides an astounding level of expressivity and productivity. The feedback loop when working with p5.js is as close to instant as you can get. You can use it to make interactive graphics and animations in a short time and with only a few lines of code.

See the code.

The p5.js project describes itself as "a friendly tool for learning to code and make art." It's fun to play with, and might be dismissed as a toy, but p5.js can be used for serious programming and visualization, too.

p5.js is supported by groups at NYU, UCLA, CMU, and the Univerity of Denver, among others. It is actively developed and there are a tremendous number of resources available for it online and in print.

I have spent a few weeks using p5.js and found it inspiring, enjoyable, and I have learned new skills. For instance, I started playing with Godot Engine for game development after learning p5.js, and many concepts transfer over directly.

You can see a number of other p5.js examples here on my website to get an idea of some things you can make with p5.js.

# Start Learning

I'm not big on learning via videos in general—I prefer to read and play—but I was intrigued after coming across Patt Vira's video Interactive Bridge with Bouncing Balls. The sketch uses matter.js (a physics engine) and ml5.js (object tracking via webcam).

Inspired by her video, I signed up for Patt's Spark program, where she hosts an online creative space with light weekly guidance. Spark provides goals and learning materials, eliminating the effort of figuring out what to do next, and thus greatly accelerating your learning. I highly recommend it.

After just a few weeks building sketches in Spark, I'm confident enough to try using matter.js and ml5.js on my own. The foundations and explorations from the first few weeks boosted my confidence and explore some of the patterns and possibilities in p5.js, so it was undeniably worthwhile to start with some basic, fun sketches and gradually learn more.

# p5.js Resources

There are a lot of great resources for p5.js. And because p5.js is sponsored by universities and targeted at artists and other non-programmers, these resources are really pleasant to read. They are not white papers or technical specifications or growth hacker blogs filled with slop and marketing drivel.

# Books

• The Nature of Code, by Daniel Shiffman, explores natural systems with p5.js. This book is excellent as a starting point to p5.js, and very fun to read. You can read it online for free or buy a paper copy for around $40 US.

• Generative Design / Generative Gestaltung, by Groß, Bohnacker, Laub, Lazzeroni, Lee, and Poldervaart, explores generative art with p5.js and comes highly recommended. This text is originally in German. The English version seems to be out of print, but there are dozens of sketches to peruse on the book's website.

• JavaScript.info, by Ilya Kantor builds up programming concepts using JavaScript. It features great explanations and code examples in a hands-on format. In particular, I found the explanations of Bezier curves and JavaScript animation to be quite interesting. Read it online for free or purchase the ebook for €18.

• Eloquent Javascript, by Marijn Haverbeke is a modern classic covering JavaScript programming. You can download it or read it online for free or buy a paper copy for around $50 US.

# Websites

• p5js.org is the official website, including tutorials, reference documentation, and examples. There is an older version of the website which includes many examples not found on the current version (notably, for p5.sound). There is also an online code editor which makes it very easy to get started.

• Collision Detection, by Jeffrey Thompson. This online-only "book" covers techniques to determine whether two shapes are touching eachother. Collision detection is a common challenge in game development but also in any interactive experience where you want to click on a shape. All of the examples use p5.js.

• Easings Function Cheat Sheet, by Andrey Sitnik and Ivan Solovev, contains a reference for easing functions. Easing is commonly used to transition between two states, such as moving, sliding, growing, shrinking, or changing shape or color. The examples are in JavaScript.

• p5.sound is a separate library maintained by the p5.js team which provides sound generation and listening capabilities.

• ml5.js, maintained by NYU and NYU Shanghai, provides object detection capabilities for images and real time* web cam feeds. It can recognize hand and finger position, facial structure, and body poses. It can also perform sound and image classification. *Real time time in the colloquial sense, not the technical sense.

• p5.func, by R. Luke DuBois, provides a number of functions including easing, generators, fourier transforms (for audio) as well as some utility functions.

• p5.speech, also by R. Luke DuBois, provides speech synthesis and recognition.

• The Coding Train, by Daniel Shiffman, has a ton of resources on p5.js and other JavaScript topics.

# Videos

• Patt Vira has dozens of informative, no-nonsense videos on YouTube covering p5.js topics. Patt's videos have zero fluff and get straight to the point to help you learn quickly. Her videos typically range from 20-30 minutes and generally cover a single sketch or concept, such as playing with text or images, machine learning, sound, physics, etc. You can also browse videos by theme on her website.

• CODE! Programming with P5.JS, by Daniel Shiffman. This YouTube course / playlist introduces p5.js to people with no programming experience, and gradually builds up to more complex concepts. There are dozens (hundreds?) more videos on his Coding Train YouTube channel.

There are obviously tons more videos out there, but these are not my preferred format so you can look around yourself.