A collection of five GPU-accelerated procedural art simulations that run in the browser. Built with Three.js and GPGPU compute shaders, packaged as a lightweight npm library that can be embedded in any web page.
The simulations started as Unity experiments (documented in my compute shaders article) and evolved into a standalone web project. Each one takes a simple algorithm and pushes it to hundreds of thousands of particles, all computed on the GPU.
Simulations
Boids recreates Craig Reynolds' 1986 flocking algorithm. Hundreds of thousands of agents follow three rules (separation, alignment, cohesion) and produce organic swarm behavior. Predator-prey dynamics, spatial hashing for performance, and bloom post-processing give it a bioluminescent deep-sea look.
Reaction-Diffusion implements the Gray-Scott model: two chemicals spreading across a surface at different speeds, producing Turing patterns like spots, stripes, and coral branches. Anisotropic diffusion and fake lighting make it look three-dimensional.
Physarum simulates slime mold (Physarum polycephalum). Thousands of agents deposit a chemical trail, sense their surroundings, and turn toward higher concentrations. The result is an efficient transport network that mirrors how the organism solves mazes and optimizes paths in nature.
Curl Noise generates smooth, divergence-free noise fields that drive particle motion. The particles trace fluid-like paths without any actual fluid simulation, creating organic flowing patterns.
Fluid is a real-time Navier-Stokes fluid solver. Mouse interaction injects velocity and dye into the simulation, producing swirling, colorful fluid dynamics.
Technical Details
All simulations use Three.js DataTexture and custom fragment shaders for GPGPU computation. Particle state (position, velocity, chemical concentrations) lives in floating-point textures that the GPU reads and writes each frame. Rendering uses instanced meshes or full-screen quads depending on the simulation type.
The library exposes a single mount() function that takes a DOM container and returns controls for switching simulations and cleaning up resources. It's published on npm as @benjadiazp/procedural-art.
You can try all five simulations in the live demo.
