HAND-ROLLED SOFT BODY PHYSICS
Instead of relying on a physics library like Matter.js, this script implements a custom spring-mass system from scratch. Each node in the grid remembers its "home" coordinates and calculates velocity based on tension and dampening, creating an elastic, fabric-like behavior rather than chaotic, independent particle movement. The logic also accounts for kinetic transfer, meaning if you "strum" the grid hard, the mathematical energy propagates through the mesh, creating organic ripples that decay naturally over time.
NATIVE GENERATIVE AUDIO SYNTHESIS
The audio isn't a pre-recorded file; it is synthesized in real-time using the Web Audio API. The code spawns oscillators on the fly, varying the waveform between Sine and Triangle based on the velocity of the cursor interaction. It constructs a manual delay and reverb chain using gain nodes and feedback loops, giving the sound a distinct sense of space without loading external assets. Furthermore, screen coordinates are normalized and mapped to a specific frequency array (C Major Pentatonic), ensuring that no matter how chaotic the input, the output remains tonally consonant.
HARDWARE-ACCELERATED REACTIVITY
The script bridges the gap between the digital canvas and the physical world through multiple hardware sensors. It captures live microphone input, runs it through a Fast Fourier Transform, and isolates specific frequency bins to inject energy back into the visual physics engine, allowing the mesh to "breathe" with the ambient noise of the room. (HEAVIER BASS SOUNDS and guttural frequencies recommended for MAXimum effect). It also utilizes device orientation events to map the gyroscope data of a mobile device to the wind vectors of the particles, so tilting the phone physically causes the digital liquid to flow in that direction.
EFFICIENT RENDERING TECHNIQUES
By setting the canvas blending mode to "lighter," overlapping lines naturally act as light sources, creating a neon bloom effect without the heavy GPU cost of WebGL fragment shaders. The clearing function uses a low-opacity fill instead of a full clear, which creates a motion blur trace that emphasizes the fluidity of the simulation.
ZERO-DEPENDENCY ARCHITECTURE
Everything—the physics engine, the audio synthesizer, the input management, and the rendering loop—is contained within roughly 200 lines of vanilla JavaScript. It requires no build step, no external CSS, and no framework overhead to run.
