Meta Lounge — an audio visualizer

1. The Central Icosahedron

The reflective shape at the center is a regular icosahedron — 12 vertices, 30 edges, 20 equilateral faces.

What's special: per the paper "General Theory of Music by Icosahedron" (Imai, Dellby, Tanaka — arXiv:2103.10272), the 12 chromatic pitches (C, C#, D, …, B) map onto the 12 icosahedron vertices in exactly four valid ways that satisfy the symmetry constraints:

• The chromatic scale traces a Hamiltonian cycle on the edges (each semitone is an edge).
• One whole-tone scale forms a regular hexagon; the other forms a hexagram (two triangles).
• Tritone pairs sit at the 6 antipodal vertex axes through the center.
• Major and minor triads land on golden triangles (vertex triples with edge ratios of 1 : φ : φ where φ = (1+√5)/2).

We're using Type 1 of the four mappings. When chord notes are detected in your audio, the corresponding golden-triangle outline glows on the surface. When two notes a tritone apart hit, the axis line through the icos center pulses. Each chroma class also lights its own vertex pip.

2. The Floating Crystals

Six concentric shells of platonic solids surround the icosahedron — tetrahedra, cubes, octahedra, dodecahedra, icosahedra, and spheres. 72 crystals total (6 shells × 12 chroma vertices), each hard-mapped to a specific (note, octave) pair:

• Angular position = which chromatic note (C, C#, D, …, B). All 6 shells line up so the same note's crystals form a radial line outward from the center.
• Shell radius = which octave (innermost shell ≈ A1, outermost ≈ A6). 6 musically-useful octaves; the topmost overtones and the inaudible sub-bass are dropped.
• Glow intensity = wavelet magnitude at that bin. The shape lights up in its chroma color when its specific (note, octave) is playing.
• Spin speed scales with that bin's amplitude — louder = faster spin.

So a sustained C-major chord at middle-C, for example, would light up three radial spokes (C, E, G) at the matching octave shell. Bass notes light inner shells; high harmonics light outer shells. The pattern across the scene shows you the harmonic structure of the music.

3. The Snail Graph (other tab)

Click the Snail tab at the top to see the same audio data on a 2D logarithmic spiral instead of in 3D. 96 dots — one per wavelet bin — arranged so:

• Angle = chromatic note. Same chroma class at the same angle across all octaves, so the 12 chromatic notes radiate outward as 12 spokes from the center. C is at the top (12 o'clock); going clockwise: C, C#, D, D#, … B.
• Radius = octave. Innermost dot = A0 (~27.5 Hz), outermost = B7 (~3951 Hz). Each full rotation outward = one octave higher.
• Dot size + brightness = wavelet magnitude at that bin. A pure tone lights up one dot. A chord lights up three radial spokes. Harmonically rich notes (a piano hitting middle C) light the fundamental dot brightly plus dimmer dots at the harmonic frequencies above it.
• Hover any dot for its note name + exact frequency in Hz.

Same engine, same tuning — switching between tabs doesn't restart the mic, so audio sensitivity sliders apply to both views identically. The snail is more of an analytical tool ("what is this audio doing right now?"); the lounge is the experience ("let the music drive a world").

4. The Wavelet Engine

Audio analysis runs on a complex Morlet continuous wavelet transform (CWT) in an off-thread AudioWorklet. 96 kernels covering A0 through B7 (8 octaves × 12 semitones), running at 48 kHz with a 256-sample hop (≈187 frames/second).

Why complex Morlet instead of a regular FFT spectrogram? Complex wavelets give the envelope directly — magnitude = √(real² + imag²). That's a smooth amplitude curve, phase-invariant, well-localized in both time and frequency at the same instant. FFTs make you choose one or the other.

Each kernel is energy-normalized and shaped to ~4 cycles of its target frequency (about 9 ms for high notes, ~85 ms for bass). Per hop, every kernel does a sliding inner product against the most recent samples, producing one envelope value per bin.

All 96 kernels precomputed once, all per-frame work runs in C++-speed AudioWorklet thread (~30M MACs/sec — small fraction of one core). Main thread reads the latest frame from a ref each render tick — the audio→visual loop never goes through React, no re-renders, no garbage. That's how it stays smooth even at full visual complexity.

▸ Tweaking the Visualization

Use the right-side panel to tune everything in real time. Notable knobs:

• Audio tab — gain, gamma (compression vs lift), noise-floor, bass/treble EQ, attack/decay smoothing.
• Visual tab — crystal opacity, glow intensity, audio-driven spin amount.
• Theory tab — brightness of vertex pips, triad outlines, tritone axes on the central icos.
• Engine group — kernel cycles (frequency resolution vs latency tradeoff), max kernel length (bass-resolution cap).