An interactive generative artwork created with p5.js and WebGL shaders that explores fluid motion, particle dynamics, and real-time visual feedback. The piece combines physics simulation with GPU-accelerated rendering to create a responsive visual experience that adapts to user input and time-based animation.
Sloppy Donut presents a field of animated particles that drift, bounce, and respond to your cursor. Each frame, the system computes the motion of multiple particles using a physics simulation that applies forces, handles collisions with the canvas boundaries, and adds procedural animation patterns. The visual rendering leverages GLSL fragment and vertex shaders to create textured, color-graded effects that respond to both the particle positions and real-time parameters.
The piece demonstrates the interplay between discrete particle systems and continuous GPU-based rendering. Rather than drawing each particle as a simple shape, the shader interprets particle positions as uniform inputs and uses them to influence the color and texture generation across the entire canvas. This creates a cohesive visual field where individual elements dissolve into emergent patterns.
Move your mouse across the screen to influence the particle trajectories. When the mouse is pressed, particles accelerate toward or away from the cursor, creating a localized force field. Without input, the particles follow algorithmic patterns that evolve with the animation timeline, resulting in organic, flowing motion even in idle states.
The behavior and appearance of Sloppy Donut can be easily modified by adjusting a few key parameters:
- Particle count: Change the loop in the
setup()function fromi < 6to any other number to add more or fewer particles. More particles create denser, more complex visual overlaps. - Physics parameters: Adjust the velocity multipliers (currently
0.99for friction,0.015for acceleration) to make particles move faster or slower, or feel more or less inertial. - Shader effects: Edit the fragment and vertex shaders to apply different color schemes, noise functions, or texture patterns. Swapping the shader files entirely transforms the visual output while keeping the same particle logic intact.
For example, setting friction to 0.95 instead of 0.99 would create more drag, slowing particles more dramatically over time. Conversely, reducing the acceleration multiplier would make the animation feel more sparse and minimal.
To run Sloppy Donut in your browser, clone this repository and open index.html in a modern web browser that supports WebGL. No build process or dependencies beyond p5.js (which is loaded via CDN) are required.
git clone https://github.com/QC20/Sloppy-Donut.git
cd Sloppy-Donut
open index.html
The project uses a substep physics loop that runs 10 iterations per frame to ensure stable particle motion and collision handling. The rendering pipeline combines two modular GLSL shaders: the vertex shader handles coordinate transformation and the fragment shader generates the final color output. Uniforms are passed from the JavaScript side each frame, including the current resolution, elapsed time, mouse position, and all particle positions. This architecture allows for independent iteration on visual effects without disrupting the underlying physics system.
The code is written to be responsive, automatically scaling to fill the browser window and recalculating on resize events.