Hum a melody. Watch it bloom. Hear it come alive.
Cosmic Hum is a synesthetic arts-tech web experience where your voice becomes permanent generative visual art and polyphonic musical composition. Hum into your microphone, and abstract shapes bloom across a starry canvas in real time — every shape, color, and size driven by the pitch, amplitude, and emotional prosody of your voice.
Built for Hack The Arts 2026 · Theme: Create art that couldn't exist without technology
- Listen — Captures real-time microphone audio input via the Web Audio API.
- Detect & Quantize — Runs zero-dependency autocorrelation pitch detection with parabolic interpolation and optional musical scale snap (In-Tune Mode).
- Visualize — Spawns procedural vector shapes continuously while you hum: frequencies map to color hues and shape families, amplitudes control sizing, and Simplex noise particle flow fields drive ambient stardust.
- Remember & Explore — Your art stays permanently on the canvas. Pan, zoom, and hover over any shape to inspect its exact frequency (Hz) and emotion.
- Playback & Scrutiny — Press Play to hear your creation synthesized back through concert-hall reverb with live timeline scrubbing, pause/resume, and rhythm speed modes.
- Export & Share — Export PNG snapshots, animated GIFs, standard MIDI (
.mid) files for DAW music production, or shareable URL links.
| Layer | Technology |
|---|---|
| Build Tool | Vite + TypeScript (Strict Mode) |
| Audio Processing | Web Audio API (AnalyserNode, DynamicsCompressorNode, custom Autocorrelation) |
| Synthesis | Polyphonic OscillatorNode with ADSR envelopes and delay reverb network |
| Rendering | HTML5 Canvas 2D with Frustum Culling & 4x Symmetry Optimization |
| Particle Physics | simplex-noise organic wind current flow fields |
| AI Integration | Hugging Face Transformers.js (ONNX wav2vec2-emotion-recognition) |
| Styling | Vanilla CSS with glassmorphism (reactbits.dev inspired) |
Backend: None — 100% client-side browser application.
# Install dependencies
npm install
# Start the dev server
npm run dev
# Type-check
npm run typecheck
# Build for production
npm run build- Real-time pitch detection with autocorrelation & parabolic interpolation
- In-Tune Musical Scale Snap (Chromatic, Pentatonic, Major, Minor, Blues)
- 65+ unique shape types across geometric, organic, and abstract parametric families (Lissajous knots, golden spirals, crystal blooms, quantum nodes)
- Simplex noise particle flow fields reacting to vocal energy
- Concert-hall reverb & Dynamics Compressor for studio-mastered synth playback
- Timeline scrubbing, pause/resume, and Real-Time vs. Condensed rhythms
- Standard MIDI (
.mid) file export for music production in Ableton/Logic - Built-in Masterpiece Demos (Ode to Joy, Twinkle Twinkle, Tetris Theme, Happy Birthday)
- Interactive canvas hover tooltips displaying exact Hz and emotional resonance
MIT
Built for Hack The Arts 2026.