Reaction Diffusion

 from Red Blob Games
29 Jan 2019

I read Jonathan McCabe[1]’s paper in the Bridges conference: Cyclic Symmetric Multi-Scale Turing Patterns[2] and was inspired to play with reaction-diffusion systems.He’s made some amazing artwork[3] by running multiple reaction-diffusion systems at different scales and applying symmetry and difference functions to them. Jason Rampe goes into more details[4] about how Jonathan’s images are produced, and he has his own experiments. Ricky Reusser has an amazing web version[5].

For a background on reaction-diffusion systems, see Karl Sims’s fantastic explanation[6] and then play with Pablo Márquez-Neila’s WebGL implementation[7]. And definitely check out this parameter map of behaviors[8] which includes math, descriptions, and videos! Ken Voskuil also has an explanation of the algorithm[9]. In 2022 I discovered Phillip Compeau’s great online course[10] that teaches reaction-diffusion; it helped me understand this model much better, and I revisited this topic and wrote some study notes.

This is an implementation of the formulas on Karl Sims’s page:


Try: feed=0.037, kill=0.065
Try: feed=0.055, kill=0.062
Try: feed=0.024, kill=0.056
Draw on the canvas to get out of equilibrium

The behavior is rather sensitive to the parameters. I’ve seen it change drastically between kill=0.062 and kill=0.063. You can paint with the mouse or finger. This demo won’t work on some devices, because it uses some WebGL extensions (OES_texture_float and OES_texture_float_linear).

Code is in reaction-diffusion.js

Note: this page seems to use a lot more RAM in Chrome than in Firefox. I haven’t tracked down why.

Email me , or tweet @redblobgames, or comment: