3. Before you start

Three things to set up. Only the first one is required, and even that is optional if you take the p5.js route at the bottom of this page.

Install Processing 4

1. Download Processing 4 from processing.org/download. It bundles its own Java.
2. Unzip and open it. On macOS, drag it to Applications first. The first launch may need a right-click, then Open.
3. Press Run on the empty sketch. A small grey window means you are ready.

Everything here uses javax.sound.midi, which is built into Java, so there are no libraries to add. The device helpers are ordinary sketch tabs and each starter already carries its own copies.

Still on Processing 3.5.4? That's fine, the same sketches work. Install "Python Mode for Processing 3" instead of the version 4 one.

Python Mode

Optional. Every example exists in Java mode and Python Mode.

1. Click the mode dropdown at the top right of the Processing window. It says Java.
2. Choose Manage Modes….
3. Select Python Mode for Processing 4 and press Install. It is a few tens of megabytes.
4. Pick Python from the same dropdown.

Python Mode runs on Jython, which is Python 2.7. That means no f-strings, and every example starts with from __future__ import division, print_function. It can still call any Java class, which is how the helpers work.

Two things that bit me this morning:

• Processing 4 decides a sketch's mode from a sketch.properties file in the sketch folder, not from the .pyde extension. Every Python sketch in this repo ships one. If you write your own Python sketch and it opens in Java mode and crashes the editor, add this two-line file next to it:

  sketch.properties

  mode=Python
  mode.id=jycessing.mode.PythonMode

• If your own Python sketch imports javax.sound.midi directly, put this before the import, or Java 17 throws InaccessibleObjectException. The helpers already do it.

  from org.python.core import Options
  Options.respectJavaAccessibility = True

A browser that speaks MIDI

The Processing sketches do not need a browser. The p5.js demos and starters do, and they use Web MIDI.

Browser	Web MIDI	Notes
Chrome	Yes	Asks once per site. The Launchpad demos also ask for SysEx, a second prompt.
Edge	Yes	Same as Chrome.
Opera	Yes	Same as Chrome.
Brave	Yes	Same as Chrome. If a device is missing, check the Shields panel for the site.
Firefox 108 and later	Yes, with a step	The first MIDI request offers to install a small site permission for that site. Accept it, then reload.
Safari	No	No Web MIDI on macOS or iOS.

Phones don't have Web MIDI either, so read this site on your phone and run the sketches on your laptop.

Use the p5.js web editor

Every starter also runs in the p5.js web editor, nothing installed:

1. In the editor, open index.html from the file list and add one script tag after the p5.js one:

   <script src="https://pcd2026.mand.is/midi-helpers/p5/midi-helpers.js"></script>

2. Replace sketch.js with the p5.js tab of your device page.

3. Press play, then click the canvas once. The browser asks for MIDI (and SysEx for the Launchpad). The status line at the bottom of the canvas says what it found.

Use one of the browsers in the table. If you want the Web MIDI side explained from scratch, George wrote it up for CSS-Tricks: Dip Your Toes Into Hardware With WebMIDI. Two other ways to run the same sketches, from the starters' README:

Each index.html loads the helpers from the repo (../../../midi-helpers/p5/midi-helpers.js) and, when that path does not exist, from https://pcd2026.mand.is/midi-helpers/p5/midi-helpers.js. p5 itself comes from cdnjs, so you need to be online.

1. Open it live

https://pcd2026.mand.is/starters/p5/pipsqueak/ (same path for the others). From a checkout, serve the repo over http:

python3 -m http.server 8765

then http://localhost:8765/starters/p5/pipsqueak/. Plug the device in, click once. The status line says what it found. The Launchpad asks for SysEx; allow it.

2. Download the folder and double-click

Download the starter folder (index.html and sketch.js), double-click index.html. The repo path is not there, so the page loads the hosted helpers. Chrome treats file:// as a secure context, so Web MIDI works. Edit sketch.js in any editor and reload.

3. Paste it into the p5 web editor

1. editor.p5js.org, new sketch.
2. Open the file list (the > at top left). Replace index.html with the starter's, then sketch.js.
3. Play. Click the canvas once to connect.

The preview is an iframe, so the first click has to land on the canvas. If Chrome asks for MIDI permission, answer in the bar at the top of the editor, not in the preview.

Chrome, Edge and Opera have Web MIDI. Safari and Firefox do not; the sketches still run there on the keyboard stand-ins and the status line says Web MIDI is unavailable.

On the day

• Plug your device in before you press Run. Java's MIDI on macOS doesn't see devices plugged in after a sketch starts. If you plug in late, stop the sketch and run it again. The browser version of the Explorer doesn't have this limit.
• On Windows only one program at a time can hold a MIDI input. On macOS and Linux a browser tab and a sketch can usually share, but if one goes quiet, close the other.
• Every sketch prints the MIDI devices it found in the Processing console. When nothing happens, that's the first place to look.