ReactionDiffusion

A living Gray-Scott reaction-diffusion pattern that fills the layer and blooms wherever you drag the cursor

Props

preset

"coral" | "mitosis" | "spots" | "maze" | "worms" | "fingerprints" | "holes" | "solitons" | "bubbles" | "waves" | "flowers" | "custom"

Default:coral

Named Gray-Scott regime — drives the feed & kill rates for a whole family of patterns. Choose Custom to dial feed & kill by hand

preset

"coral" | "mitosis" | "spots" | "maze" | "worms" | "fingerprints" | "holes" | "solitons" | "bubbles" | "waves" | "flowers" | "custom"

Default: coral

Named Gray-Scott regime — drives the feed & kill rates for a whole family of patterns. Choose Custom to dial feed & kill by hand

feednumber

Default:0.0545

Feed rate — how fast chemical U is replenished (used when Pattern = Custom)

feed

numberDefault: 0.0545

Feed rate — how fast chemical U is replenished (used when Pattern = Custom)

killnumber

Default:0.062

Kill rate — how fast chemical V is removed (used when Pattern = Custom)

kill

numberDefault: 0.062

Kill rate — how fast chemical V is removed (used when Pattern = Custom)

diffusionRationumber

Default:0.5

Ratio of the two chemicals' diffusion rates — shifts the pattern character (lower = tighter, more filament-like)

diffusionRatio

numberDefault: 0.5

Ratio of the two chemicals' diffusion rates — shifts the pattern character (lower = tighter, more filament-like)

featureSizenumber

Default:3

Size of the pattern features — lower shows finer, smaller cells; higher magnifies them into larger cells

featureSize

numberDefault: 3

Size of the pattern features — lower shows finer, smaller cells; higher magnifies them into larger cells

speednumber

Default:6

Simulation steps per frame — higher evolves the pattern faster

speed

numberDefault: 6

Simulation steps per frame — higher evolves the pattern faster

brushSizenumber

Default:0.04

Radius of the cursor brush that seeds new reagent as you drag

brushSize

numberDefault: 0.04

Radius of the cursor brush that seeds new reagent as you drag

brushStrengthnumber

Default:0.6

How much reagent the cursor injects while dragging

brushStrength

numberDefault: 0.6

How much reagent the cursor injects while dragging

colorAstring

Default:transparent

Background color (empty regions between cells)

colorA

stringDefault: transparent

Background color (empty regions between cells)

colorCstring

Default:#38bdf8

Accent color at the cell walls (mid pattern values)

colorC

stringDefault: #38bdf8

Accent color at the cell walls (mid pattern values)

colorBstring

Default:#e2f5ff

Color of the dense cell interiors (high pattern values)

colorB

stringDefault: #e2f5ff

Color of the dense cell interiors (high pattern values)

contrastnumber

Default:0.5

Sharpness of the cell walls — higher gives crisper, more graphic edges

contrast

numberDefault: 0.5

Sharpness of the cell walls — higher gives crisper, more graphic edges

thresholdnumber

Default:0.28

Pattern level the colors are centered on — shifts the balance of background vs. cells

threshold

numberDefault: 0.28

Pattern level the colors are centered on — shifts the balance of background vs. cells

colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"

Default:oklch

Color space for color interpolation

colorSpace

Color space for color interpolation

reliefnumber

Default:0.4

Treats the pattern as a raised surface and shades it with a light — higher gives a more sculpted, three-dimensional look (0 for a flat, graphic look)

relief

numberDefault: 0.4

Treats the pattern as a raised surface and shades it with a light — higher gives a more sculpted, three-dimensional look (0 for a flat, graphic look)

lightAnglenumber

Default:135

Direction the surface light comes from, in degrees

lightAngle

numberDefault: 135

Direction the surface light comes from, in degrees

childInfluencenumber

Default:0.6

When a child layer is nested, how strongly its brightness biases the pattern — the preset sets the character, the child steers where it grows dense vs. sparse (0 ignores the child)

childInfluence

numberDefault: 0.6

When a child layer is nested, how strongly its brightness biases the pattern — the preset sets the character, the child steers where it grows dense vs. sparse (0 ignores the child)

childContrastnumber

Default:0.5

Contrast applied to the child's brightness before it drives the pattern — higher pushes toward a crisp two-tone split (edges), lower keeps smooth tonal shading

childContrast

numberDefault: 0.5

Contrast applied to the child's brightness before it drives the pattern — higher pushes toward a crisp two-tone split (edges), lower keeps smooth tonal shading

childThresholdnumber

Default:0.5

Brightness level of the child that reads as neutral — shifts which tones grow the pattern vs. clear it

childThreshold

numberDefault: 0.5

Brightness level of the child that reads as neutral — shifts which tones grow the pattern vs. clear it

childInvertboolean

Default:false

Flip which tones of the child grow the pattern (bright vs. dark areas)

childInvert

booleanDefault: false

Flip which tones of the child grow the pattern (bright vs. dark areas)

Usage

<Shader>
  <ReactionDiffusion />
</Shader>

<Shader>
  <ReactionDiffusion />
</Shader>

<Shader>
  <ReactionDiffusion />
</Shader>

<Shader>
  <ReactionDiffusion />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'ReactionDiffusion', props: {} }
  ]
})

RandomBars

RectangularCoordinates