Tools

p5 server is a command-line tool that runs p5.js sketches. It is a development server with live reload, that can run JavaScript-only sketches and figure out which libraries to include based on the functions and classes that they use. It can also create sketch templates, and create a static sketch froma collection of sites.

The P5 Server Visual Studio Code extension creates and runs p5.js sketches within Visual Studio code. It includes an integrated development server, an integrated browser and output console, a sketch explorer (for listing all the sketches in a collection), and commands to create sketch files.

Libraries

• p5.layers adds functions that simplify the use of createGraphics and p5.js Renders objects. It makes it easier to use Graphics objects to implement drawing layers, and it removes the need to add or remove the “g.” prefix from draw calls in order to change them between drawing on the canvas, versus drawing on a instance of Graphics. See these examples.

• p5.rotate-about adds rotateAbout() and scaleAbout() functions, that rotate and scale around a point.

• p5.vector-arguments modifies the p5.js Shape functions to accept instances of p5.Vector as arguments.

Examples and Tutorials

Examples of topics that have come up during student projects: controlling gif animation, cross-fading audio, slicing sketches, etc.

Step-by-step tutorials. These differ from the examples in that they take several steps to build up to a solution. They are intended to teach an understanding of various concepts along the way to the solution, rather than to present it whole sale.

React integration defines a React component that renders a p5 sketch. One application can include multiple sketches.

Education Resources

Some of my p5.js instructional materials are on my notes site.

Starter templates for GitHub and Glitch. These use a CDN.

Sketches & Other

p5.js sketches on OpenProcessing.org

P5.js Pixel Manipulation Timings compares the performance of image(), get()/set(), and pixels/image.pixels to each other, and between Processing and p5.js.

For Students

Map Explorer (source) is an interactive visualization of the map function in Arduino, Processing, and p5.js.

PWM Explorer (source) is an interactive visualization of Pulse Width Modulation (PWM).

For Educators

Tools to manage multiple repositories, and to track and collate assignments that are distributed as Jupyter notebooks:

Callgraph runs in a Jupyter notebook. It adds call graphs to functions.

Section Wheel (source) spins a wheel to select a student (or team) name from a list of names. Repeat until all the names have been chosen. I use it to select presentation order.

NameShuffler performs the same function, but with an animated list instead of a wheel. It is written as a Processing sketch.

multiclone clones all the forks of a repository, or all the copies of a GitHub Classroom assignment. It’s very fast. It renames the files to incorporate the students’ GitHub handles into the local project directory names. It creates a mr configuration file, so that you can pull (or push) all the repositories with as single command.

nbcollate combines Jupyter notebooks (one per student) into a single notebook that is collects all the cells that follow a header cell into a section. I use it for reviewing and sometimes presenting student work.

assignment-dashboard is for situations where students submit their assignments as Jupyter notebooks on GitHub. It shows a table of which students have submitted which notebooks on which dates. You can drill in to see a table of which students have answered which questions.