A collection of p5.js examples for teaching, learning, and experimenting — created by Jon E. Froehlich and the Makeability Lab at the University of Washington. You can view many more p5js projects by Professor Froehlich in the p5js editor here.
🎨 Browse the interactive gallery →
Examples span several categories including sound visualization, computer vision, games, generative art, Web Serial communication, and more. Each example is a self-contained folder with an index.html you can open directly in a browser.
Many of these examples accompany the Physical Computing course, particularly the Web Serial and p5.js Serial lessons.
Most examples run by simply opening index.html in a browser. For Web Serial examples, you need a local web server (the browser blocks serial access from file:// URLs).
The easiest approach is VS Code with the Live Server extension: open any example folder, right-click index.html, and choose "Open with Live Server."
The WebSerial/ folder contains examples that communicate with Arduino and other microcontrollers via the browser's Web Serial API. These use the serial.js wrapper from the Makeability Lab JS library, loaded via CDN:
<script src="https://cdn.jsdelivr.net/gh/makeabilitylab/js@main/dist/makelab.serial.iife.js"></script>Web Serial requires Chrome, Edge, or Opera. See the Web Serial lesson for setup instructions.
- Create a folder under the appropriate category (e.g.,
Sound/MyNewVis/) - Add an
index.html(and optionalsketch.js,css/style.css, etc.) - Optionally add a
screenshot.pngfor a thumbnail in the gallery - Commit and push — the gallery rebuilds automatically
The interactive gallery is auto-generated on every push to main by a GitHub Actions workflow. Here's how it's set up:
scripts/build_gallery.py walks the repo, finds every folder containing an index.html, groups them by category and subcategory, and writes a self-contained index.html at the repo root. Configuration (excluded directories, branch name, repo URL) is defined as constants at the top of the script.
.github/workflows/build-gallery.yml runs the build script and commits the generated index.html back to main. The [skip ci] tag in the commit message prevents an infinite loop.
GitHub Pages is configured under Settings → Pages to deploy from the main branch at / (root). No special "GitHub Actions" source setting is needed — the workflow simply commits the file to the branch that Pages already serves.
To replicate this pattern in another repo, you need three things: the build script (adapted for your folder structure), the workflow file, and Pages set to "Deploy from a branch" pointing at your default branch.
- makeabilitylab/js — Makeability Lab JavaScript library (serial, math, graphics, logo modules)
- makeabilitylab/arduino — Arduino sketches that pair with the Web Serial examples
- Physical Computing course — Full course website with lessons, labs, and references