Code

Other Places

Code in other places:

Topics

p5.js

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

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.

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.

Course notes are here.

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.

Notes are here.

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.

p5.js
(source) 02/2020–03/2020
Course Notes for NYUSH IMA Creative Coding
Languages:
  • Dockerfile
  • JavaScript
  • CSS
Topics:
  • education
  • p5js
(source) 04/2020–02/2021
Example web programs that use the imu-tools npm package to connect via BTLE or MQTT to an ESP32 + BNO055
Languages:
  • HTML
  • JavaScript
  • CSS
Topics:
  • bno055
  • mqtt
  • btle
  • p5js
  • physical-computing
(source) 10/2020–11/2020
Languages:
  • HTML
  • JavaScript
  • CSS
Topics:
  • processing
  • arduino
  • p5js
  • visualization
  • education
Languages:
  • HTML
  • JavaScript
  • CSS
Topics:
  • p5js
  • device-orientation
  • device-motion
  • orientation-events
  • example
  • demo
12/2019
A component that embeds a p5.js canvas in a React application
Languages:
  • HTML
  • CSS
  • JavaScript
Topics:
  • p5
  • p5js
  • react
  • reactjs
  • react-components
(source) 07/2021–10/2021
Command-line tool to create and run p5.js sketches. It runs a server with live reload, sketch-aware directory listings, automatic libraries for JavaScript-only sketches.
Languages:
  • JavaScript
  • TypeScript
  • HTML
  • Nunjucks
  • Pug
  • Shell
  • Prolog
  • CSS
Topics:
  • p5
  • p5js
  • live-reload
Languages:
  • HTML
  • JavaScript
  • CSS
Topics:
  • template
  • p5js
02/2020–03/2020
Languages:
  • HTML
  • JavaScript
  • CSS
Topics:
  • p5js
11/2019–10/2021
https://www.notion.so/P5-js-Particle-Workshop-aba7992a689c457a8cca10e2f49e6a04
Languages:
  • HTML
  • JavaScript
Topics:
  • p5js
(source) 06/2021–10/2021
Languages:
  • JavaScript
  • HTML
  • Shell
  • Prolog
Topics:
  • p5js
  • creative-coding
09/2019–02/2021
Starter kit for exploring WebCam-based pose recognition with PoseNet and p5.js
Languages:
  • HTML
  • JavaScript
  • CSS
Topics:
  • p5js
  • posenet
  • template
10/2019
Use p5.js to render data from an OptiTrack CSV -> WebSocket server.
Languages:
  • HTML
  • JavaScript
  • CSS
Topics:
  • p5js
  • posenet
  • optitrack
(source) 12/2020
This is an example of a sketch that accepts poses either from PoseNet, or from a JSON file that was created by P5 PoseNet Recorder.
Languages:
  • HTML
  • JavaScript
  • CSS
Topics:
  • p5js
  • posenet
(source) 12/2020
Record a sequence of PoseNet poses to a JSON file, for later playback.
Languages:
  • HTML
  • JavaScript
  • CSS
Topics:
  • p5js
  • posenet
  • motion-capture
10/2019–09/2021
P5.js + PoseNet browser that can also render and test images from a directory on the server
Languages:
  • JavaScript
  • HTML
  • CSS
Topics:
  • posenet
  • p5js
11/2019–12/2019
Publish PoseNet data from one page to another in the same browser.
Languages:
  • HTML
  • JavaScript
Topics:
  • posenet
  • p5js
  • motion-capture
(source) 11/2020–03/2021
Languages:
  • HTML
  • JavaScript
  • CSS
Topics:
  • p5js
  • classroom-tools
Processing
12/2020
A Processing sketch to shuffle a list of student or team names
Languages:
  • Processing
Topics:
  • processing
  • classroom-tools
  • processing-sketch
11/2020
This is a pair of programs for the Arduino and Processing, to help students develop an understanding of Pulse Width Modulation (PWM).
Languages:
  • C++
  • Processing
Topics:
  • arduino
  • processing
  • visualization
  • education
(source) 11/2020
Arduino and Processing examples for NYU Shanghai Interaction Lab
Languages:
  • Processing
  • C++
Topics:
  • processing
  • arduino
  • education
(source) 10/2020–11/2020
Languages:
  • HTML
  • JavaScript
  • CSS
Topics:
  • processing
  • arduino
  • p5js
  • visualization
  • education
12/2020
A demo of interprocess communication in Processing using WebSockets
Languages:
  • Processing
Topics:
  • processing
  • websockets
Education
11/2020
This is a pair of programs for the Arduino and Processing, to help students develop an understanding of Pulse Width Modulation (PWM).
Languages:
  • C++
  • Processing
Topics:
  • arduino
  • processing
  • visualization
  • education
01/2018–06/2021
Magic to display dynamic call graphs of Python function calls
Languages:
  • Python
  • Makefile
Topics:
  • jupyter-notebook-extension
  • ipython-magic
  • python
  • education
  • visualizations
(source) 02/2020–03/2020
Course Notes for NYUSH IMA Creative Coding
Languages:
  • Dockerfile
  • JavaScript
  • CSS
Topics:
  • education
  • p5js
(source) 11/2020
Arduino and Processing examples for NYU Shanghai Interaction Lab
Languages:
  • Processing
  • C++
Topics:
  • processing
  • arduino
  • education
(source) 10/2020–11/2020
Languages:
  • HTML
  • JavaScript
  • CSS
Topics:
  • processing
  • arduino
  • p5js
  • visualization
  • education
12/2017
Miscellaneous Jupyter notebooks.
Languages:
  • Jupyter Notebook
Topics:
  • jupyter-notebooks
  • education
03/2017
Create a Reveal.js slide show for the forks of a GitHub repo
Languages:
  • Python
  • HTML
Topics:
  • reveal-js
  • github
  • education
(source) 10/2020–12/2020
Interactive visualization of Pulse Width Modulation (PWM)
Languages:
  • HTML
  • JavaScript
  • CSS
Topics:
  • pwm
  • arduino
  • visualization
  • education
Arduino
12/2019–02/2021
Publish IMU data over BLE
Languages:
  • C++
Topics:
  • arduino
  • imu
  • bno055
  • ble
  • btle
  • esp32
  • esp32-arduino
11/2020
This is a pair of programs for the Arduino and Processing, to help students develop an understanding of Pulse Width Modulation (PWM).
Languages:
  • C++
  • Processing
Topics:
  • arduino
  • processing
  • visualization
  • education
(source) 11/2020
Arduino and Processing examples for NYU Shanghai Interaction Lab
Languages:
  • Processing
  • C++
Topics:
  • processing
  • arduino
  • education
(source) 10/2020–11/2020
Languages:
  • HTML
  • JavaScript
  • CSS
Topics:
  • processing
  • arduino
  • p5js
  • visualization
  • education
(source) 10/2020–12/2020
Interactive visualization of Pulse Width Modulation (PWM)
Languages:
  • HTML
  • JavaScript
  • CSS
Topics:
  • pwm
  • arduino
  • visualization
  • education
Physical Computing
(source) 04/2020–02/2021
Example web programs that use the imu-tools npm package to connect via BTLE or MQTT to an ESP32 + BNO055
Languages:
  • HTML
  • JavaScript
  • CSS
Topics:
  • bno055
  • mqtt
  • btle
  • p5js
  • physical-computing
08/2019–09/2021
Send sensor data from an ESP + BNO055 → MQTT and/or serial port
Languages:
  • Shell
  • Python
  • HTML
  • JavaScript
  • CSS
  • TypeScript
Topics:
  • esp8266
  • esp32
  • micropython
  • bno055
  • imu-sensor
  • mqtt
  • esp
  • physical-computing
Motion Tracking
09/2019–06/2021
Serve OptiTrack data from a CSV file to a WebSocket connection
Languages:
  • Shell
  • Python
Topics:
  • websocket-connection
  • optitrack
  • motion-capture
(source) 12/2020
Record a sequence of PoseNet poses to a JSON file, for later playback.
Languages:
  • HTML
  • JavaScript
  • CSS
Topics:
  • p5js
  • posenet
  • motion-capture
11/2019–12/2019
Publish PoseNet data from one page to another in the same browser.
Languages:
  • HTML
  • JavaScript
Topics:
  • posenet
  • p5js
  • motion-capture
Classroom Tools
12/2020
A Processing sketch to shuffle a list of student or team names
Languages:
  • Processing
Topics:
  • processing
  • classroom-tools
  • processing-sketch
02/2017–06/2018
A web dashboard for viewing the forks of a classroom assignment repo
Languages:
  • Python
  • HTML
  • CSS
  • Mako
  • Nginx
  • Shell
Topics:
  • github
  • jupyter-notebook
  • classroom-tools
(source) 12/2016–06/2021
Tools for collecting and analyzing assignments – mostly related to GitHub and Jupyter notebooks – plus a few other tasks.
Languages:
  • Python
  • HTML
  • Shell
  • JavaScript
Topics:
  • jupyter-notebook
  • github-classroom
  • classroom-tools
10/2017–11/2017
Clone forks of a GitHub repo, or copies of a GitHub Classroom assignment
Languages:
  • Go
  • Makefile
Topics:
  • github
  • github-classroom
  • myrepos
  • cli
  • git
  • classroom-tools
02/2017–06/2021
Collate Jupyter assignment notebooks
Languages:
  • Python
  • Jupyter Notebook
Topics:
  • jupyter-notebook
  • jupyter
  • classroom
  • cli
  • classroom-tools
(source) 11/2020–03/2021
Languages:
  • HTML
  • JavaScript
  • CSS
Topics:
  • p5js
  • classroom-tools
Web Apps
(source) 01/2018–04/2018
Visualize Dropbox file and folder sizes
Languages:
  • Elm
  • JavaScript
  • CSS
  • Shell
  • Haskell
  • Makefile
Topics:
  • dropbox
  • dropbox-client
  • treemap
  • visualization
  • webapp
06/2018–08/2021
A photo gallery for photos from a Matrix room.
Languages:
  • Python
  • HTML
  • JavaScript
  • SCSS
Topics:
  • matrix-client
  • photo-gallery
  • dinacon
  • webapp
07/2018–08/2021
On-the-ground piece for Dinacon
Languages:
  • JavaScript
  • CSS
  • Python
  • HTML
Topics:
  • matrix-client
  • dinacon
  • webapp
(source) 12/2017–10/2018
Web page that displays the current value of Bitcoin alongside the face of a six-sided die
Languages:
  • Makefile
  • Elm
Topics:
  • webapp
  • humor
Command Line Tools
06/2018–06/2021
Configuration-free Sphinx documentation
Languages:
  • Python
  • Smarty
Topics:
  • sphinx
  • sphinx-doc
  • python
  • documentation
  • documentation-tool
  • python-package
  • cli
11/2017–09/2021
Displays GitHub forks and their stats, to identify successors to abandoned repos.
Languages:
  • JavaScript
  • TypeScript
Topics:
  • github
  • cli
  • git
06/2017–06/2021
A fast Go clone of the Jekyll blogging engine
Languages:
  • Go
  • Shell
  • HTML
  • Makefile
  • CSS
  • Ruby
  • Dockerfile
Topics:
  • liquid
  • jekyll
  • blog-engine
  • static-site-generator
  • golang
  • cli
10/2017–11/2017
Clone forks of a GitHub repo, or copies of a GitHub Classroom assignment
Languages:
  • Go
  • Makefile
Topics:
  • github
  • github-classroom
  • myrepos
  • cli
  • git
  • classroom-tools
02/2017–06/2021
Collate Jupyter assignment notebooks
Languages:
  • Python
  • Jupyter Notebook
Topics:
  • jupyter-notebook
  • jupyter
  • classroom
  • cli
  • classroom-tools
Chrome Extension
(source) 06/2018–09/2018
A Chrome extension that adds star counts next to GitHub repo links
Languages:
  • JavaScript
  • HTML
  • CSS
  • Makefile
  • TypeScript
Topics:
  • chrome-extension
  • github
  • web-extension
  • github-browser-extensions
  • git
Jupyter Extensions
01/2018–06/2021
Magic to display dynamic call graphs of Python function calls
Languages:
  • Python
  • Makefile
Topics:
  • jupyter-notebook-extension
  • ipython-magic
  • python
  • education
  • visualizations
01/2018–06/2021
A Python package that simplifies the use of secrets in a Jupyter notebook
Languages:
  • Python
Topics:
  • jupyter
  • ipython
  • keyring
  • password-store
  • python-package
  • jupyter-notebook-extension
  • ipython-notebook
Python Packages
07/2018–06/2021
“Should array indices start at 0 or 1? My compromise of 0.5 was rejected without, I thought, proper consideration.” — Stan Kelly-Bootle
Languages:
  • Python
Topics:
  • python
  • python-package
  • humor
06/2018–06/2021
Configuration-free Sphinx documentation
Languages:
  • Python
  • Smarty
Topics:
  • sphinx
  • sphinx-doc
  • python
  • documentation
  • documentation-tool
  • python-package
  • cli
06/2018–06/2021
Python Keyring backend backed by a Google Sheet
Languages:
  • Python
  • Shell
Topics:
  • keyring
  • gspread
  • google-sheets
  • google-colab
  • python-package
01/2018–06/2021
A Python package that simplifies the use of secrets in a Jupyter notebook
Languages:
  • Python
Topics:
  • jupyter
  • ipython
  • keyring
  • password-store
  • python-package
  • jupyter-notebook-extension
  • ipython-notebook
01/2018
Compute the unique minimal keys from a collection of strings or sequences.
Languages:
  • Python
Topics:
  • python-package
Go Packages
(source) 06/2017–07/2021
A Liquid template engine in Go
Languages:
  • Go
  • Yacc
  • Ragel
  • Makefile
  • Shell
  • Ruby
Topics:
  • liquid
  • liquid-templating-engine
  • template-engine
  • golang
  • golang-package
(source) 08/2017–06/2021
Ruby-compatible strftime for golang
Languages:
  • Makefile
  • Go
Topics:
  • golang
  • strftime
  • golang-package
Music Theory
02/2014–07/2021
Music theory Dart package
Languages:
  • Dart
  • Shell
Topics:
  • music-theory
(source) 09/2013–09/2018
TypeScript music theory, pitch constellation diagram, and guitar chord calculator
Languages:
  • JavaScript
  • TypeScript
Topics:
  • music-theory
  • typescript
  • typescript-library
  • guitar-chords
Home Automation
01/2016–02/2016
Home Automation for Highland Ave.
Languages:
  • CoffeeScript
  • Shell
  • Python
Topics:
  • home-automation
01/2016–02/2016
Languages:
  • CoffeeScript
  • Shell
Topics:
  • home-automation
Languages:
  • Groovy
Topics:
  • home-automation
12/2015–01/2016
Christmas tree lights for the Minsky/Steele house.
Languages:
  • Python
  • Shell
  • HTML
  • JavaScript
Topics:
  • home-automation
Developer Tools
11/2017
🍺😜My Homebrew package manager formulae
Languages:
  • Ruby
Topics:
  • homebrew
  • developer-tools
04/2020
Create a Dash Cheatsheet from HTML on apple.com
Languages:
  • Python
Topics:
  • developer-tools
12/2019
Stubs for MicroPython APIs, to assist type-checking tools
Languages:
  • Python
Topics:
  • python
  • developer-tools
08/2018–01/2020
Define VSCode problem matchers for Jekyll Liquid exceptions
Languages:
    Topics:
    • visual-studio-code
    • vscode
    • vscode-extension
    • jekyll
    • liquid
    • liquid-templating-engine
    • developer-tools
    Websites
    (source) 12/2013–09/2021
    My historical blog
    Languages:
    • Shell
    • CSS
    • HTML
    • Ruby
    Topics:
    • personal
    • website
    • blog
    (source) 09/2013–10/2021
    Languages:
    • CSS
    • HTML
    • Ruby
    • Shell
    • Elm
    • SCSS
    • JavaScript
    Topics:
    • personal
    • website
    (source) 10/2019
    Lesser-known CSS attributes
    Languages:
    • HTML
    • JavaScript
    • CSS
    Topics:
    • css
    • humor
    • website
    (source) 11/2016–06/2018
    Hacking the Library 2017 and 2018 @ Olin College
    Languages:
    • HTML
    • JavaScript
    • CSS
    • Python
    • Ruby
    • Shell
    Topics:
    • course-materials
    • website
    • olin-college
    • olin
    (source) 08/2018
    Source to Inventive Minds web site
    Languages:
    • Ruby
    • HTML
    Topics:
    • website
    (source) 12/2013–09/2021
    Source to personal web site
    Languages:
    • PHP
    • Shell
    • Ruby
    • Perl
    • JavaScript
    • CSS
    • Python
    • XSLT
    • Smalltalk
    • Common Lisp
    • Emacs Lisp
    • Java
    • HTML
    • NewLisp
    • Hack
    Topics:
    • personal
    • website
    Personal
    (source) 12/2013–09/2021
    My historical blog
    Languages:
    • Shell
    • CSS
    • HTML
    • Ruby
    Topics:
    • personal
    • website
    • blog
    (source) 09/2013–10/2021
    Languages:
    • CSS
    • HTML
    • Ruby
    • Shell
    • Elm
    • SCSS
    • JavaScript
    Topics:
    • personal
    • website
    01/2014–05/2020
    my https://dotfiles.github.io
    Languages:
    • Shell
    • Ruby
    • Vim script
    • Emacs Lisp
    • JavaScript
    • Python
    Topics:
    • dotfiles
    • personal
    04/2018
    Personal Elm extras. Extracted from Banyan.
    Languages:
    • Elm
    Topics:
    • elm-package
    • personal
    (source) 12/2013–09/2021
    Source to personal web site
    Languages:
    • PHP
    • Shell
    • Ruby
    • Perl
    • JavaScript
    • CSS
    • Python
    • XSLT
    • Smalltalk
    • Common Lisp
    • Emacs Lisp
    • Java
    • HTML
    • NewLisp
    • Hack
    Topics:
    • personal
    • website
    Other
    11/2017
    Store some parts of a repo file in the macOS Keychain; keep the rest un-encrypted
    Languages:
    • Ruby
    • Shell
    Topics:
    • macos-keychain
    • git-filter
    • secret-management
    • dotfiles
    • git
    06/2018–06/2021
    Export a Matrix room message archive
    Languages:
    • Python
    • Smarty
    Topics:
    • matrix-client
    • dinacon
    06/2018–07/2018
    Bluetooth signal meter for BBC micro:bit
    Languages:
    • TypeScript
    Topics:
    • dinacon
    • microbit
    • microbit-ble
    05/2020–06/2021
    Server-side support for the Quickdraw dataset of UGC vector sketches of common terms
    Languages:
    • JavaScript
    • HTML
    Topics:
    • webapi
    • server
    06/2021
    Bulk add and modify Slack channels from the command line
    Languages:
    • Python
    Topics:
    • slack
    08/2012
    Algorithm tests for the card game Stress
    Languages:
    • Python