Technical explanation, aesthetic goals, and peer-feedback reflection for a fullscreen GPU Gray–Scott simulation.
I built a fullscreen reaction-diffusion piece in WebGPU using gulls.js and a compute shader that updates the Gray–Scott system entirely on the GPU. The simulation stores chemical A, chemical B, and a change buffer in storage buffers, then ping-pongs them each frame so the compute pass can read the previous state and write the next one. I exposed all four main coefficients required by the assignment—feed, kill, diffusion A, and diffusion B—plus a time-step control, brush radius, and reset/pause interactions. Users can click or drag directly on the canvas to inject chemical B and disturb the field. For the required Sims “option,” I implemented flow: a procedural vector field derived from layered noise bends the diffusion updates, so the patterns shear into tidal streams instead of expanding symmetrically. In the fragment shader, I color the simulation by combining B concentration, reaction-front intensity, and a small noise shimmer, which gives stable regions, edges, and active fronts visibly different roles.
Visually, I wanted the piece to feel less like a lab demo and more like a living topographic map or microscopic tide pool. I used a dark oceanic base, turquoise midtones, pale mineral ridges, and rose highlights at the most active reaction fronts. That color mapping makes the growth read as geography: calm areas feel like depth, while unstable borders look like illuminated coastlines. The flow option was important aesthetically because it prevents the simulation from feeling too centered or static; instead, it creates the impression that the chemistry is being pulled by an unseen current. I also added three presets—Coral, Maze, and Tidal—so users can quickly move between different personalities of the system while still fine-tuning the core coefficients. Clicking into the field turns the user into a disturbance source, which keeps the work playful and exploratory instead of purely observational.
A classmate responded most strongly to the flow-driven version and said it felt “more alive than the normal circular reaction-diffusion examples” because the patterns looked like they were being dragged sideways by water. That matched my intention: I wanted the extra option to meaningfully change the character of the simulation rather than read as a subtle parameter tweak. They also liked that the presets made it easy to discover interesting parameter regions quickly instead of getting lost in the coefficient sliders. One note they gave was that the pause button is useful for studying a frozen pattern, but the most compelling moments happen while the image is actively changing, especially after painting into the surface. That also matched my expectations. Overall, the feedback suggested the project succeeds both as an interactive technical demonstration and as a more atmospheric visual piece.
a4.htmla4.jsindex.htmlREADME.md