Procedural Audio & WebGL WebAssembly Experiences in Coni
In the last 24 hours alone, we’ve pushed the boundaries of the Coni WebAssembly ecosystem to produce an entire suite of procedural audiovisual web experiences. By combining the Coni macro system with raw WebGL and the WebAudio API, we successfully scaffolded, compiled, and deployed complex graphical and musical systems natively in the browser—with absolutely zero external asset dependencies.
Let’s take a look at the five new applications we’ve built. You can experience them all natively in your browser on the Coni WASM Gallery.
1. Minimal Techno Visualizer
Theme: Dark, driving, algorithmic club energy. Link: Minimal Techno App
We wanted to prove that Coni could orchestrate real-time procedural music generation and sync it flawlessly with heavy 3D geometry rendering.
- Audio Engine: A custom 140 BPM timeline engine triggers an analog-style sawtooth bassline on the 16th-note off-beats, pairs it with an 808-style synthesized kick, and introduces a crispy noise-based snare/clap during the drop.
- WebGL Subtleties: We mapped 5,000 falling rain particles that reverse gravity during the 16-bar “Breakdown,” and a dense pulsing 3D geometry core that blooms aggressively on every kick hit, shifting from cool cyan to fiery orange based on the sequencer state.
2. Divine Infinity 999Hz
Theme: Ethereal, mathematical healing. Link: Divine Infinity 999Hz
Centered around the concept of divine frequency healing, this application is a marriage of pure mathematics and ambient audio.
- Audio Engine: It generates a 999Hz “Angel Frequency” sine wave, complemented by a subtle 8Hz Theta binaural beat to induce profound relaxation.
- WebGL Subtleties: We used raw trigonometry within the GLSL vertex shaders to map 500,000 particles onto the “Lemniscate of Bernoulli” (the infinity symbol). It renders flawlessly in 3D space with a subtle ambient glow and depth-based opacity fading.
3. Clear Brain Fog 40Hz
Theme: Geometric clarity and focus. Link: Clear Brain Fog 40Hz
Aimed at dissipating mental clutter, this app uses mesmerizing geometry paired with grounding frequencies.
- Audio Engine: A pure 40Hz binaural beat created by detuning two oscillators (432Hz in the left ear, 472Hz in the right).
- WebGL Subtleties: We programmed a 5-petal rotating 3D spirograph in the vertex shader. The intricate overlapping curves create an illusion of constant forward motion without the camera ever actually moving, trapping the eye in a state of flow.
4. WebGL Guided Breathing App
Theme: Controlled, rhythmic meditation. Link: Breathing App
A functional meditation tool designed to guide users through the 6-2-6 breathing technique (inhale for 6s, hold for 2s, exhale for 6s).
- WebGL Subtleties: The core of the visual is a massive glowing circle that physically expands and contracts on a precise 14-second loop timeline. The vertex shader interpolates the radius smoothly, avoiding any jagged jumps.
5. Restore Inner Peace (432Hz)
Theme: Tranquility and balance. Link: Restore Inner Peace
A beautiful, slow-paced generative environment tuned to the universal 432Hz pitch.
- Audio Engine: We layered multiple procedural oscillators to create an evolving, drone-like soundscape that doesn’t rely on short loops, keeping the audio fresh over long sessions.
- WebGL Subtleties: A sea of floating points rendered with extreme depth of field, bringing a sense of vast, quiet space directly to the canvas.
The Power of AOT WebAssembly
All of these applications are AOT compiled into native WebAssembly utilizing Wasm-GC. This means the heavy lifting—array buffer allocation, timeline tracking, state mutations—runs at near-native speeds, allowing the JavaScript thread to calmly hand off rendering instructions to the GPU without dropping a single frame.
We’re incredibly proud of how expressive and powerful writing WebGL and WebAudio logic natively in Coni has become. Try them out on the WASM Gallery!