Touch
the
sound.
A physics-simulated surface. Every point is playable. The deformation you see is what you hear. Wave propagation, overtones, sympathetic resonance between your fingers.
Multi-touch: one finger is a drum. Two is a chord. Three is polyrhythm. The membrane couples between touch points — press one spot, let it ring, press a harmonic neighbor. Physics does the rest.
Three surface modes. Drum head: deep, warm, medium decay. Glass plate: bright overtones, long sustain. Taut string: fast attack, sharp edge. Each mode changes the physics — not a filter preset, a different material.
A 48×48 grid runs the 2D wave equation every frame. Each cell's acceleration equals the tension constant times the laplacian of its neighbors minus damping times velocity. Boundary cells are fixed at zero — the membrane edge. Touch events inject energy as localized gaussian impulses. The simulation runs at 60fps, fast enough to see ripples propagate from your finger in real time.
The oscillators use custom PeriodicWaves built from circular membrane mode ratios (1, 1.594, 2.136, 2.296, 2.653, 2.918) — the inharmonic overtone series of a real drumhead. Not sampled. Synthesized from the mathematics of vibrating membranes. Each surface mode changes tension, damping, and decay — different materials, not EQ presets.
Eight pre-allocated voices with per-voice signal chains: OscillatorNode (custom wave) → BiquadFilterNode (LP, Y-axis) → WaveShaperNode (velocity-driven saturation) → GainNode → dry/wet split → ConvolverNode (procedural reverb IR) → master → AnalyserNode → destination. Voice pooling means zero allocation on touch start. Phase-continuous oscillators — no clicks.
The wave simulation and the audio graph read the same gesture data. Touch position → frequency + filter cutoff. Touch velocity → distortion amount + filter modulation. Grid displacement → cell color and contour lines. AnalyserNode feeds frequency data back into the spectrum bar and ambient glow. Seeing and hearing: the same act.
| Input | Audio Parameter | Visual Effect | Curve |
|---|---|---|---|
| Touch X | Frequency (55–1760 Hz) | Cell column excitation | Logarithmic |
| Touch Y | Filter cutoff (300–6300 Hz) | Cell row excitation | Linear |
| Drag velocity | Distortion amount + filter boost | Wave injection intensity | Quadratic |
| Release | Exponential gain decay | Ripple dissipation | Exponential |
| Multi-touch | Polyphonic voices (up to 8) | Interference patterns | Superposition |
The web has always been a visual medium that can hear. This membrane doesn't translate between senses. It doesn't visualize audio or sonify visuals. The deformation is the sound. The ripple is the waveform. One physics. Two perceptions.