Code

Other Places

Code in other places:

Topics

p5.js

p5.layers is a library that adds beginLayer() and endLayer() functions, that simplify the use of p5.js Graphics objects and redirect fill(), rect() etc. to the current “layer” (Graphics). See these examples.

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.

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

p5.js sketches on OpenProcessing.org

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

PoseNet

p5pose is a starter template for p5.js + ml5.js. I prefer it to the official starter because I prefer for my students to use the for…of statement.

p5pose-recorder (online version) records PoseNet data into a JSON file (or set of files). Before saving the file, the user can use a built-in timeline editor to trim the beginning and end, which tend to includes poses from when the user backed up from the webcam after starting the program, and from when they approached the webcam again after creating the pose.

p5pose-playback (online demo) adds a menu to (my version of) the ml5.js PoseNet starter. Use the menu to switch between the webcam, and PoseNet JSON datasets that were recorded with p5pose-recorder (above).

p5pose-optitrack presents data from an OptiTrack motion capture setup as though it were PoseNet data. Students who have written a sketch to work with PoseNet data can run it on OptiTrack data by changing a line of code.

In some circumstances, PoseNet runs faster when the sketch that is running PoseNet is different from the page that is running the animation. Here’s how.

Physical Computing

imu-tools is a set of tools for sending IMU data from an ESP32 and receiving it on a command-line program or in a web application. It includes the source for an npm package that can be used in a web application to receive data via MQTT (any browser) or Bluetooth (Google Chrome).

Arduino-BLE-IMU is firmware that runs on an ESP32 and relays BNO055 data wirelessly to computer via MQTT (over WiFi) and/or Bluetooth.

imu-client-examples is a set of examples that use relayed wireless IMU data in various ways: to animate one or more Stanford bunnies, and to graph the data.

Education Tools

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.

GitHub Repository Browser

Generated from GitHub metadata. Under construction. About.