Reaction-Diffusion Playground - Introduction

Reaction-Diffusion Playground

Reaction-diffusion is a mathematical model describing how two chemicals might react to each other as they diffuse through a medium together. It was proposed by Alan Turing in 1952 as a possible explanation for how the interesting patterns of stripes and spots that are seen on the skin/fur of animals like giraffes and leopards form. Learn more about reaction-diffusion below.

When run at large scales and high speeds, reaction-diffusion simulations can produce an amazing variety of dynamic, mesmerizing patterns and behaviors, as shown in the screenshots below. In the time since Turing published his original paper on the topic, reaction-diffusion has been studied extensively by researchers in biology, chemistry, physics, computer science, and other fields. Today it has become accepted as a plausible (some say proven) explanation for the formation of patterns such as zebrafish pigmentation, hair follicle spacing, the Belousov-Zhabotinsky (BZ) chemical reaction, certain types of coral, zebra and tiger stripes, and more.

Open the playground

See the source code on Github

Using the app

Style map

Upload an image from your computer to vary the f, k, dA, and dB values based on the brightness value of each pixel. The secondary values you choose here will become endstops in an interpolation calculation with the primary values (on the right UI pane). In other words, the four equation parameters will be interpolated to be between the original parameter values (on the right pane) and these secondary parameter values (left pane) using the brightness value of each pixel.

In addition to the reaction-diffusion equation parameters, you can also adjust the uniform scale, rotation, and X/Y offset of the image for different effects.

Your image will automatically be scaled to fit the entire canvas, so it may be stretched. Resize your image to match the width and height of the canvas (or at least its aspect ratio) to minimize distortion.

The following images make for good style maps, and are included in the source repository:

Bias

Normally diffusion occurs evenly in all directions due to the default radially symmetrical Laplacian stencil. Using this X/Y pad you can "weight" this stencil to cause diffusion to favor one particular direction.

Equation parameters

Each of the four fundamental parameters of the reaction-diffusion equation (f, k, dA, dB), along with the timestep increment, can be changed using the sliders found at the top of the right panel. Change them gradually to avoid collapsing the system.

Interactive parameter map

Use this map to navigate through the parameter space easily and find areas with interesting patterns and behaviors. k values are plotted along the X axis, f values along the Y axis.

Use the crosshairs attached to the mouse position to navigate to a region you're interested in, then click to set the main f and k values to match where you clicked.

This map is inspired by the work of Robert Munafo.

Seed pattern

Choose a pattern to use in the first frame of the simulation to seed the reaction. Each pattern has some additional options you can play with for different effects.

Circle - radius.<br>Square - width, height, scale, and rotation.<br>Text - string, size, rotation.<br>Image - upload an image from your computer, fit, scale, rotation.

Also provides buttons to reset the simulation with the selected pattern or clear the canvas completely.

Rendering style

Control how the chemical concentration data is translated into visuals.

Canvas size

Set the width and height of the simulation area.

You can also maximize the canvas to fit the entire viewport.

Global actions

Buttons to pause/play or export an image of the current state of the simulation area.

Keyboard controls

Space = pause/play.<br>r = reset using the currently-selected seed pattern.<br>s = save an image of the current canvas content.<br>u = show/hide the UI.

Mouse controls

Click and drag anywhere on the canvas to increase the concentration of the B chemical around the mouse position.

Use your mouse wheel to change the diameter of the area affected by clicking / dragging. The size of the brush is indicated with a circle that follows the mouse.

MIDI controls

If you have an Akai LPD8 Wireless or a Novation Launch Control XL, mappings are provided for the various pads and knobs. See ./js/midi.js for details.

What is reaction-diffusion?

Reaction-diffusion is a mathematical model describing how two chemicals might react to each other as they diffuse through a medium together. It was proposed by Alan Turing in 1952 as a possible explanation for how the interesting patterns of stripes and spots that are seen on the skin/fur of animals like giraffes and leopards form.

The reaction-diffusion equations really only describes how the concentrations of the chemicals change over time, which means that all of the interesting patterns and behaviors that we see are emergent...