This note provides an interactive, visual simulation of the Gray-Scott Reaction-Diffusion model, which demonstrates how simple chemical reactions can produce complex patterns that range from biological structures (cells, coral, animal skin) to pure chemical phenomena (spirals, waves, spots). The simulation allows you to inject chemical B by clicking and dragging on the canvas, adjust feed and kill rates, and observe beautiful patterns emerge from the reaction.

The simulation uses the Gray-Scott model on a 256×256 grid, which is rendered at 512×512 pixels. The model tracks two chemicals, A and B, that react and diffuse according to specific rules. Chemical A is initially present everywhere (A = 1.0), while Chemical B starts at zero. When you inject Chemical B by clicking on the canvas, it triggers a reaction that produces intricate patterns as the chemicals interact and diffuse.

The Gray-Scott model is famous for producing both biological-looking patterns (cell division, coral growth, animal skin patterns) and chemical patterns (spirals, traveling waves, oscillating spots). The patterns emerge from the interaction between two processes: reaction (where A and B combine to produce more B) and diffusion (where chemicals spread out). The balance between these processes, controlled by the Feed rate (f) and Kill rate (k) parameters, determines which pattern emerges.

The simulation includes a pattern selector dropdown that instantly sets the Feed and Kill rates to known values. Patterns are organized into two categories: Biological Patterns (Cells/Mitosis, Coral, Worms/Loops, Zebra Stripes) that resemble living structures, and Chemical Patterns (Spirals, Traveling Waves, Spots, Oscillating) that demonstrate pure chemical reaction-diffusion phenomena. You can also manually adjust the parameters using sliders to explore the parameter space. The visualization maps the concentration of Chemical B to colors, with low concentrations appearing black, medium concentrations appearing purple/dark blue, and high concentrations appearing white/neon cyan.

NOTE : The simulation uses Float32Array for high-performance computation and direct pixel manipulation for rendering. The Laplacian (diffusion) is calculated using a 3×3 weighted kernel for better isotropy. The simulation runs multiple steps per frame (8 steps) to make the reaction grow fast enough to be visually interesting. When you first load the simulation, the screen will be black - you must click and drag on the canvas to inject Chemical B and start the reaction.

Math behind the Simulation

The Gray-Scott Reaction-Diffusion model describes how two chemicals A and B react and diffuse:

∂A/∂t = d_A∇²A - AB² + f(1 - A)
∂B/∂t = d_B∇²B + AB² - (k + f)B

where A(x,y,t) and B(x,y,t) are the concentrations of chemicals A and B at position (x,y) and time t, d_A and d_B are diffusion coefficients, f is the feed rate, and k is the kill rate. The term AB² represents the reaction where A and B combine to produce more B, while ∇² is the Laplacian operator representing diffusion.

The simulation uses the finite difference method to discretize these equations on a 256×256 grid. The Laplacian is calculated using a 3×3 weighted kernel for better isotropy:

[ 0.05, 0.2, 0.05 ]
[ 0.2, -1.0, 0.2 ]
[ 0.05, 0.2, 0.05 ]

The update equations are: A_next = A + (d_A∇²A - AB² + f(1 - A))·dt and B_next = B + (d_B∇²B + AB² - (k + f)B)·dt, where dt = 1.0 is the time step. The simulation runs multiple steps per frame to accelerate pattern growth.

 

Usage Example

Follow these steps to explore the Gray-Scott Reaction-Diffusion patterns:

1. Initial State: When you first load the simulation, the screen will be black (or very dark) because Chemical B starts at zero everywhere. You must inject Chemical B to start the reaction. Click the "Play" button to start the simulation, then click and drag on the canvas to inject Chemical B.
2. Start Your First Reaction: Click and drag on the canvas to inject Chemical B. You'll see the reaction begin to grow from where you clicked. The pattern will start small and expand as the chemicals react and diffuse. Watch how the pattern evolves over time - it may form spots, stripes, or other structures depending on the Feed and Kill rates.
3. Try the Pattern Presets: Use the Pattern dropdown to select from predefined patterns. The patterns are organized into two categories:
   • Biological Patterns:
     • Cells/Mitosis: Produces cell-like structures that divide and grow
     • Coral: Creates coral-like branching patterns
     • Worms/Loops: Forms worm-like or loop structures
     • Zebra Stripes: Creates striped patterns resembling animal skin
   • Chemical Patterns:
     • Spirals: Forms rotating spiral patterns, typical of chemical oscillators
     • Traveling Waves: Creates wave-like patterns that propagate across the domain
     • Spots: Produces isolated spot patterns, common in chemical reactions
     • Oscillating: Forms oscillating, pulsing patterns
   After selecting a pattern, click and drag on the canvas to inject Chemical B and watch the pattern emerge.
4. Experiment with Parameters: Adjust the Feed Rate (f) and Kill Rate (k) sliders to explore the parameter space. Be careful - these parameters are very sensitive! Even small changes (0.001) can cause the pattern to die out (turn black) or flood the screen (turn white). Use the presets as starting points, then make small adjustments to see how the patterns change.
5. Observe Pattern Evolution: Once you inject Chemical B and start the reaction, watch how the pattern evolves. Patterns may grow, split, merge, or form complex structures. The reaction continues as long as the simulation is playing. Try injecting Chemical B at different locations to create multiple reaction centers and observe how they interact.
6. Reset and Try Different Patterns: Click "Reset" to clear the simulation and return to the initial state (A = 1.0, B = 0.0 everywhere). Try different presets and parameter combinations to see the variety of patterns that can emerge. Each combination of Feed and Kill rates produces unique behavior.
7. Create Complex Patterns: Inject Chemical B at multiple locations to create several reaction centers. Watch how the patterns from different centers interact as they grow. You can create intricate, interconnected patterns by strategically placing injection points.
8. Explore the Parameter Space: The Feed and Kill rates determine which pattern emerges. Try adjusting them slowly and observing the results. Some parameter combinations produce stable patterns, while others may cause the reaction to die out or flood. The presets are in the "Goldilocks zone" where interesting patterns form.

Tip: The key to understanding this simulation is that patterns emerge from the balance between reaction (where A and B combine to produce more B) and diffusion (where chemicals spread out). The Feed rate controls how fast Chemical A is replenished, while the Kill rate controls how fast Chemical B is removed. The diffusion coefficients (d_A and d_B) control how fast each chemical spreads, affecting the scale and detail of patterns. The interaction between these processes creates the complex, life-like patterns you see. If nothing happens, make sure you've clicked and dragged on the canvas to inject Chemical B - the reaction needs a seed to start!

Parameters

Followings are short descriptions on each parameters

• Feed Rate (f): Controls how fast Chemical A is replenished in the system. Higher values (closer to 0.1) mean more A is fed into the system, which can cause the reaction to flood (turn white). Lower values (closer to 0.01) mean less A is available, which can cause the reaction to die out (turn black). The Feed rate works together with the Kill rate to determine which pattern emerges. Default is 0.022. Range: 0.01 to 0.1, step 0.001. This parameter is extremely sensitive - even small changes can dramatically affect the pattern.
• Kill Rate (k): Controls how fast Chemical B is removed from the system. Higher values (closer to 0.07) mean B is removed faster, which can cause the reaction to die out. Lower values (closer to 0.045) mean B persists longer, which can cause the reaction to flood. The Kill rate works together with the Feed rate to determine which pattern emerges. Default is 0.051. Range: 0.045 to 0.07, step 0.001. This parameter is extremely sensitive - even small changes can dramatically affect the pattern.
• Diffusion A (d_A): Controls how fast Chemical A spreads (diffuses) across the grid. Higher values mean A spreads faster, creating larger-scale patterns. Lower values mean A spreads slower, creating finer, more detailed patterns. Default is 1.0. Range: 0.5 to 2.0, step 0.1. The ratio d_A/d_B is important for pattern formation - typically d_A should be greater than d_B for stable patterns.
• Diffusion B (d_B): Controls how fast Chemical B spreads (diffuses) across the grid. Higher values mean B spreads faster. Lower values mean B spreads slower and tends to stay localized. Default is 0.5. Range: 0.1 to 1.0, step 0.1. The standard ratio d_A/d_B = 2:1 (1.0/0.5) is commonly used, but exploring different ratios can produce interesting pattern variations.
• Grid Resolution: The simulation uses a 256×256 grid for computation, which is rendered at 512×512 pixels (2× scaling). Each grid cell represents a small area where the chemicals react and diffuse. The pixel-perfect scaling makes individual pixels visible, giving the simulation a retro aesthetic while maintaining smooth pattern evolution.
• Visualization: The concentration of Chemical B is mapped to colors using a biological/fluorescent theme. Low B concentrations (near 0) appear black. Medium B concentrations (around 0.1-0.5) appear purple/dark blue. High B concentrations (near 1.0) appear white/neon cyan. This color mapping makes the patterns clearly visible and creates a biological, fluorescent appearance.
• Steps Per Frame: The simulation runs 8 steps per animation frame to accelerate pattern growth. This makes the reaction grow fast enough to be visually interesting without requiring long wait times. The multiple steps per frame are necessary because the reaction can be slow at the default time step (dt = 1.0).

Buttons and Controls

Followings are short descriptions on each control

• Play/Pause: Starts or pauses the reaction-diffusion simulation. When paused, you can still inject Chemical B by clicking and dragging, but the reaction will not update until you resume. The button text changes to "Pause" during simulation, allowing you to pause and resume at any time. You can inject Chemical B even while the simulation is running.
• Reset: Clears the simulation and returns to the initial state (A = 1.0, B = 0.0 everywhere). This completely resets the reaction, and the screen will turn black. You can then inject Chemical B again to start a new reaction. The simulation continues running after reset.
• Pattern Selector: A dropdown menu that instantly sets the Feed and Kill rates to known values that produce specific patterns. Patterns are organized into two categories:
  • Biological Patterns (resemble living structures):
    • Cells/Mitosis: f = 0.0367, k = 0.0649. Produces cell-like structures that divide and grow.
    • Coral: f = 0.0545, k = 0.0620. Creates coral-like branching patterns.
    • Worms/Loops: f = 0.082, k = 0.060. Forms worm-like or loop structures.
    • Zebra Stripes: f = 0.022, k = 0.051. Creates striped patterns resembling animal skin.
  • Chemical Patterns (pure chemical reaction-diffusion phenomena):
    • Spirals: f = 0.025, k = 0.06. Forms rotating spiral patterns, typical of chemical oscillators.
    • Traveling Waves: f = 0.014, k = 0.054. Creates wave-like patterns that propagate across the domain.
    • Spots: f = 0.03, k = 0.062. Produces isolated spot patterns, common in chemical reactions.
    • Oscillating: f = 0.04, k = 0.065. Forms oscillating, pulsing patterns.
  Selecting "Custom (Manual)" allows you to manually adjust the parameters. After selecting a pattern, inject Chemical B on the canvas to see the pattern emerge.

Interaction and Visualization

• Mouse Interaction: Click and drag on the canvas to inject Chemical B. The injection has a radius of about 3 grid cells, with intensity decreasing from the center. This creates a seed for the reaction to start. You can inject Chemical B at multiple locations to create several reaction centers. The injection works whether the simulation is playing or paused.
• Canvas Visualization: The simulation is rendered using direct pixel manipulation (ImageData) for high performance. The 256×256 simulation grid is scaled up 2× to 512×512 pixels, creating a retro pixelated aesthetic. Each pixel's color is calculated based on the concentration of Chemical B at that location, mapped to a biological/fluorescent color scheme.
• Color Mapping: The concentration of Chemical B is mapped to colors: low concentrations (near 0) appear black, medium concentrations (0.1-0.5) appear purple/dark blue, and high concentrations (near 1.0) appear white/neon cyan. This creates a biological, fluorescent appearance that makes the patterns clearly visible.
• Reaction-Diffusion Process: The simulation updates the concentrations of Chemicals A and B according to the Gray-Scott equations. The reaction term (AB²) causes A and B to combine and produce more B, while the diffusion terms (∇²A and ∇²B) cause the chemicals to spread out. The balance between reaction and diffusion creates the complex patterns you see. The Laplacian (diffusion) is calculated using a 3×3 weighted kernel for better isotropy.
• Pattern Evolution: Once you inject Chemical B, the reaction begins to grow. Patterns may form spots, stripes, loops, or other structures depending on the Feed and Kill rates. The patterns evolve over time as the chemicals react and diffuse. Multiple reaction centers can interact and merge, creating complex, interconnected patterns.
• Parameter Sensitivity: The Feed and Kill rates are extremely sensitive. Even small changes (0.001) can cause the pattern to die out (turn black) or flood (turn white). The diffusion coefficients (d_A and d_B) are less sensitive but still affect pattern scale and stability. The pattern selector provides known "Goldilocks zones" where interesting patterns form. Use the presets as starting points, then make small adjustments to explore the parameter space. Note: When adjusting diffusion coefficients, keep d_A > d_B for stable pattern formation.