junkpile

10 · Tauri v1 MIDI Input

A modernized Junkpile foundation for receiving native MIDI through Rust and using it to control a p5.js WebGL shader inside one Tauri v1 window.

The repository folder intentionally keeps its original name:

p5-tauri-midi-template

What this example teaches

• Why Web MIDI is not the dependable path inside Tauri v1 WebViews
• Receiving CoreMIDI, ALSA, or WinMM input through Rust midir
• Parsing channel voice messages into structured Tauri events
• Listening for those events in JavaScript
• Scaling MIDI CC values into useful visual parameter ranges
• Mapping controls with MIDI learn
• Combining hardware input with manual HTML controls
• Driving p5.js shader uniforms from the resulting state

Signal flow

MIDI controller / virtual MIDI port
        ↓
Rust midir callback
        ↓
parse_midi()
        ↓
window.emit("midi-event")
        ↓
JavaScript mapping + parameter state
        ↓
p5 draw loop
        ↓
GLSL uniforms

Run

npm install
npm run dev

npm install provides both the local Tauri v1 CLI and p5.js. The pre-development script copies the pinned p5 build into src/vendor/, so the app does not require a CDN at runtime.

Production build

npm run build

On macOS, bundles are generated under:

src-tauri/target/release/bundle/

Default MIDI mapping

CC	Parameter
1	Hue
2	Zoom
3	Speed
7	Brightness
10	Distortion
74	Complexity

Saturation and glow begin unmapped. Use MIDI learn to assign them—or replace any default mapping. The mapping is saved in local storage.

Additional messages:

• Note On creates a velocity-scaled light impulse.
• Pitch bend rotates the shader field around its center.
• Note Off, aftertouch, pressure, and program changes appear in the event terminal.

Test without a physical controller

macOS

1. Open Audio MIDI Setup.
2. Choose Window → Show MIDI Studio.
3. Double-click IAC Driver.
4. Enable Device is online.
5. Send MIDI to the IAC Bus from Max, Pure Data, Ableton Live, Logic, or another application.

Linux

Install ALSA development support before compiling:

sudo apt install libasound2-dev

Windows

Class-compliant devices and virtual WinMM ports should appear automatically.

Interface

• Device scans, connects, disconnects, and prints native port diagnostics.
• Quick states change visual parameters without changing MIDI assignments.
• MIDI learn maps the next received CC to a chosen parameter.
• Visual parameters remain fully operable without hardware.
• Mini MIDI terminal shows parsed messages and raw bytes.
• Meters visualize note velocity, pitch bend, and the latest CC value.

Keyboard shortcuts:

Key	Action
Space	Pause or resume animation
R	Restore visual defaults
F	Toggle native fullscreen

Project structure

p5-tauri-midi-template/
├── README.md
├── MODERNIZATION-NOTES.md
├── package.json
├── scripts/
│   └── sync-p5.mjs
├── src/
│   ├── index.html
│   ├── sketch.js
│   ├── styles.css
│   └── vendor/p5.min.js    generated after npm install
└── src-tauri/
    ├── Cargo.toml
    ├── tauri.conf.json
    └── src/main.rs

Rust commands

Command	Purpose
list_midi_ports	Returns currently visible MIDI inputs
debug_midi_ports	Returns a human-readable native port report
connect_midi_port_by_name	Opens a port and begins emitting events
disconnect_midi	Closes the active connection
midi_connection_name	Reports the current connection
toggle_fullscreen	Controls the native Tauri window

Extend this example

To add another MIDI-controlled shader parameter:

1. Add the parameter to PARAMS in src/sketch.js.
2. Add a matching uniform to FRAG_SHADER.
3. Upload it inside draw().
4. Use MIDI learn to assign a CC, or provide a default cc number in the parameter specification.

Known limitations

• The example accepts one MIDI input connection at a time.
• MIDI output is outside this example’s scope.
• The MIDI mapping is intentionally linear; custom curves can be added in setParam().
• p5.js and WebGL run in the WebView rather than through native wgpu.

This site is open source. Improve this page.