Animated WebGL Library
86+ visual experiments in light and math — particles, fractals, audio-reactive shaders, and GPU-accelerated beauty.
Architecture
“86+ visual experiments in light and math.”
The Problem
Creative coding is often dismissed as 'not real engineering.' But the math behind particle systems, fractal geometry, and real-time audio analysis is some of the most demanding programming there is. GPU programming requires thinking in parallel. Shader math requires thinking in gradients. And making it all run at 60fps requires thinking in constraints.
The Approach
Built a library of 86+ WebGL/Three.js visualizations spanning particles, fractals, audio-reactive scenes, fluid dynamics, and geometric art. Each experiment is a self-contained scene with configurable parameters. Custom GLSL shaders handle the heavy math on the GPU. Web Audio API drives the audio-reactive pieces.
Key Insight
The constraint of real-time rendering forces elegant solutions. When you have 16.6ms per frame, you can't brute-force anything. Every visualization taught a different optimization lesson: spatial hashing for particles, LOD for fractals, texture ping-pong for fluid simulation. The beauty is a byproduct of the engineering.
How it works
The architecture behind the system.
86+ Visual Scenes
From simple particle fountains to complex fractal landscapes. Each scene is a standalone experiment with tunable parameters and full source code.
Particle Systems
GPU-instanced particles with forces, attractors, and field effects. Spatial hashing for collision detection. Millions of particles at 60fps.
Fractal Generators
Mandelbrot, Julia sets, L-systems, and procedural terrain. Infinite zoom with progressive refinement and smooth color mapping.
Audio-Reactive
Web Audio API analysis feeds frequency and amplitude data into shaders. Visualizations pulse, morph, and evolve with the music in real-time.
Custom GLSL Shaders
Hand-written vertex and fragment shaders for each scene. Noise functions, ray marching, signed distance fields, and post-processing effects.
60fps Optimized
GPU instancing, texture atlases, LOD systems, and draw-call batching. Performance profiling baked into every scene for consistent frame times.
Built with
