Quality Control — Visualizer

Live procedural visuals for Quality Control (Aug 14 2026, Spirit Lodge). The engine draws 1880s-style mechanical plates stroke by stroke, in the manner of Joshua Rose's Mechanical Drawing Self-Taught (1883), with a BPM-synced WebGL effects rack on top.

Two ways to run it

1. Just open the file. app/index.html is fully self-contained — no build, no install, no network. Double-click it in Chrome or Edge (needed for Web MIDI). This is the recommended way to run the gig.

2. As a desktop app.

npm install
npm start          # runs the Electron shell
npm run dist       # builds an installer for the current platform

The Electron shell adds: launch on the external display, F11 true fullscreen, screen-sleep blocking for the whole set, mic and MIDI pre-authorised (no permission prompts mid-show), no browser chrome, and the detached control window opening as a proper second window.

Builds are per-platform: run npm run dist on macOS for a .dmg, on Windows for an .exe. Cross-building is possible but fiddly; building on the target machine is easiest.

Controls

key	action
F / F11	fullscreen
D	detach the control panel to its own window
S	settings panel
M	display mode — plates / palimpsest
I	invert light ⇄ dark (15 s crossfade)
Q	title overlay on/off
N	new plate
A	audio-reactive pace on/off
B	burst
1 2 3	trigger FX slot envelopes
[ ]	drawing speed
SPACE	pause
H	HUD
dbl-click	reset any slider to its default

Everything above, plus per-slot FX depth and master BPM, is MIDI-learnable: open settings → MIDI → LEARN next to a parameter, then move a knob or hit a pad.

Layout

app/index.html      the visualizer — the whole thing, self-contained
electron/main.js    desktop shell
src/                generator sources (already inlined into app/index.html)
lib/                QC_DRAWING_LIBRARY.js — documented drawing library + registry
docs/               project notes, drawing catalog, version history
versions/           every released build, for rollback

src/ and lib/ are the sources of record for the drawings. app/index.html is the built artifact with everything inlined — edit it directly for quick changes, or regenerate from src/ for structural work.

Editing the drawings

Each figure is a parametric generator: gen(rng) -> {f, name, w, h}. The format, the Fig builder API, line-weight conventions and draw-order choreography are documented at the top of lib/QC_DRAWING_LIBRARY.js. docs/DRAWING_CATALOG.md indexes all 60 figures plus the 2 animated assemblies.