Visualizer Pad
A web-based audio-reactive visual editor with node-based programming for creating stunning real-time visual effects that respond to music and audio input.
Visualizer Pad
AudioGraphJS - Visual Audio Reactive Editor
What It Is
This is a web-based audio-reactive visual editor inspired by TouchDesigner - essentially a real-time visual effects generator that responds to audio input. It's like having a professional VJ (Video Jockey) tool in your browser that creates stunning visual effects based on music, voice, or any audio input.
Core Technology Stack
Frontend & Build:
- Vanilla JavaScript (ES6 modules) - No heavy frameworks, just pure JS
- Vite - Modern build tool for fast development and optimized builds
- HTML5 Canvas - For 2D rendering and node-based interface
- WebGL/Three.js - For 3D graphics and advanced visual effects
Audio Processing:
- Web Audio API - Real-time audio analysis and processing
- FFT (Fast Fourier Transform) - Frequency domain analysis for audio reactivity
- MediaDevices API - Microphone input and device selection
Graphics & Effects:
- Three.js - 3D graphics engine with advanced lighting and materials
- Custom shaders - For post-processing effects like glitch, color filters, and distortions
- Particle systems - Dynamic visual elements
Why It's Incredibly Cool
1. Real-Time Audio Reactivity
- Takes live audio input (microphone, music, etc.) and converts it into visual patterns
- Analyzes frequency spectrum and amplitude in real-time
- Creates dynamic visuals that "dance" with the music
2. Node-Based Visual Programming
- 20+ specialized nodes for different effects:
AudioInputNode- Captures and processes audioFFTBandNode- Extracts specific frequency bandsFluidNode- Simulates fluid dynamicsMyceliumNode- Organic growth patternsConway3DNode- 3D cellular automataWaterNode- Water simulationGlitchNode- Digital distortion effects- And many more...
3. Professional-Grade Visual Effects
- 3D rendering with advanced lighting (ambient, directional, spot lights)
- Post-processing pipeline with effects like glitch, color filters, and distortions
- Particle systems and dynamic geometry
- Real-time shader effects and material manipulation
4. Live Performance Ready
- Designed for real-time use during live performances
- Low-latency audio processing
- Responsive visual feedback
- Professional VJ tool capabilities
5. Modular Architecture
- Each effect is a separate, composable node
- Nodes can be connected in chains for complex effects
- Easy to extend with new visual effects
- Clean separation of concerns
Use Cases
- Live Music Performances - Visual accompaniment to concerts
- DJ Sets - Dynamic background visuals
- Interactive Installations - Art exhibits and public spaces
- Content Creation - Music videos and visual content
- Educational - Learning audio-visual programming concepts
Technical Innovation
- Web-native - No plugins or downloads required
- Real-time performance - Optimized for live use
- Cross-platform - Works on any modern browser
- Modular design - Easy to customize and extend
This project represents the cutting edge of web-based creative tools, combining real-time audio analysis, advanced 3D graphics, and a professional-grade node-based interface. It's essentially bringing the power of expensive professional VJ software to the web browser, making high-quality audio-reactive visuals accessible to anyone with a modern computer and microphone.