A zero-dependency, interactive audio-visual synthesizer and generative art architecture engineered entirely within a single index canvas matrix. BitBox orchestrates a real-time multi-track step sequencer with an adaptive particle physics engine, transforming audio frequencies into high-fidelity celestial animations.
🔗 Live
The ecosystem operates without external frameworks or dependencies, achieving high-performance rendering loops and precise audio processing via native web APIs:
- Web Audio API Pipeline: Implements an orchestrated 4-channel, 16-step synthesize network using custom oscillators, dynamic gain staging, and explicit node scheduling to prevent main-thread blockages or clock drift during tempo swings.
- Generative Astro-Matrix Engine: Renders a fluid field of 300 twinkling stellar bodies running on a multi-layer parallax layout. The background canvas utilizes high-velocity frame clearing combined with canvas alpha trails to simulate deep-space nebula glow.
- Deterministic Constellation Mapping: Sequencer states are mapped directly to coordinate nodes in the center of the viewport, calculating line vectors programmatically to draw interconnected stellar networks matching the live note matrix.
- Frequency-Responsive Physics: Low-frequency triggers (kick drums) pipe data into a localized view-matrix displacement function to execute cinematic screen-shake metrics. Concurrently, global BPM variants dynamically calculate the angular velocity of orbital paths.
- State Persistence Matrix: Full local storage lifecycle hooks mapping sequencer patterns, channel volumes, and preset configurations directly across execution sessions.
- Dynamic URI Serialization: Encodes the entire 4-channel step-sequencer state into compressed URL parameters, enabling seamless cross-network sharing of custom audio patterns without central database overheads.
- Hot-Swappable Matrix Themes: Real-time mutation of global color matrices (Neon, Sunset, Cosmic, Ocean, Fire) without triggering viewport redraw flags or interrupting audio processing buffers.
- Heads-Up Diagnostics (HUD): Real-time monitoring metrics overlay tracking active particle arrays, stellar instances, and canvas frames-per-second (FPS) optimization metrics.
| Keystroke | Operational Directive |
|---|---|
Spacebar |
Toggle Master Sequencer Play/Pause State |
R |
Trigger Pseudo-Random Pattern Generation Engine |
C |
Execute Structural Step Clear Buffer |
- Runtime Environment: Vanilla ECMAScript 2026 Engine
- Graphics Layout: Native HTML5 Canvas API (2D Context Context Matrix)
- Audio Core: Standard Web Audio API Node Pipelines
- Sizing Engine: Adaptive Viewport Flexing System