🔊
Web / Interactive

Rig Builder

Year
2024
Audio Engine
Web Audio API
3D
Three.js
Theme
Warehouse Rave
Overview

Rig Builder is a warehouse rave sound system builder and tuning tool that lives entirely in the browser. The concept: pick your speaker stacks, subs, and amplifiers from a catalogue of real-world PA hardware, assemble a rig, then tune it using a real digital signal processing chain built with the Web Audio API. It's simultaneously a toy, an educational tool, and a genuinely usable DSP sandbox.

The build interface presents speaker systems as selectable components — line arrays, point source tops, cardioid sub configurations, flown delay fills. As you add components, a running estimate of total SPL, frequency coverage, and power draw updates in real time. The physics model is simplified but plausible: the relationship between amplifier headroom, speaker sensitivity, and achievable volume is real.

The DSP panel slides out from the right: a full signal chain with a parametric EQ (four bands, adjustable frequency, gain, and Q), a low-pass and high-pass crossover with variable slopes, a multiband compressor with ratio, threshold, attack, and release controls, and a delay section for time alignment between system components. These are real Web Audio API nodes, producing real audio processing — not simulated controls.

The Three.js 3D end card renders your assembled rig in an atmospheric warehouse environment. Volumetric fog, moving crowd simulation beneath the system, industrial architecture with practical lighting rigs casting pools of light on the concrete floor. When you save your rig, the scene captures and renders your specific configuration — your speaker layout, your stack height, your sub arrangement — as a shareable 3D image.

A community leaderboard tracks the most powerful, most creatively named, and most technically sophisticated rigs submitted by users, with persistent storage and a voting system. The combination of the playful element with real DSP learning made this one of the most-shared projects in the portfolio on social media.

AI Workflow

DSP processing chain with Claude

The Web Audio API processing chain is the technical heart of the project, and it was designed and written in full by Claude. The Web Audio API's node graph model is powerful but verbose — connecting oscillators, filters, compressors, and gain nodes requires precise understanding of the API's connection model, and building a clean, modular DSP chain requires careful architecture upfront.

Claude designed the node graph structure: the signal flow from input through EQ, crossover, compression, to the AnalyserNode that feeds the spectrum visualiser, to the final output destination. It also wrote the parameter mapping that connects the UI controls to the underlying audio node properties, with proper AudioParam automation to prevent clicking artefacts when parameters change.

Three.js warehouse scene and crowd simulation

The 3D warehouse environment required constructing a convincing architectural space from primitives — floor plane, wall planes, ceiling beams, industrial lighting rigs — and populating it with a crowd simulation that feels alive without being prohibitively expensive to render. Claude wrote the scene construction and the crowd simulation code: a particle system where each particle represents a person, with position, velocity, and animation state, governed by simple steering behaviours that produce the appearance of crowd movement when viewed at the appropriate distance.

The speaker rig rendering — placing Three.js geometry representing actual speaker cabinets in positions matching the user's configuration — was also written with Claude. The mapping from abstract rig specification (number of boxes, sub arrangement, flying height) to 3D scene positions required a spatial layout algorithm that produces visually plausible and physically realistic-looking installations.

Leaderboard backend architecture

The community leaderboard required a persistent backend — storing rig configurations, scores, and user metadata across sessions. Claude helped design the data model and the API structure, recommending a lightweight serverless approach that could handle the expected traffic without infrastructure overhead. The rig serialisation format — a compact JSON representation of a full speaker stack configuration and DSP chain settings — was also Claude's design.

Tech Stack

A pure browser stack with no framework dependencies — vanilla JavaScript, Web Audio API, Three.js, and CSS for a project that needed to be fast, lightweight, and universally accessible.

Web Audio API Three.js JavaScript CSS Node.js Claude AI
Next Project
Void Wave Synth