Kamel Ghabte · Course · Free

Reaction-Diffusion

Create biological patterns with the Gray-Scott algorithm in p5.js.

The concept

Reaction-diffusion (Turing, 1952) models how two chemicals interact and diffuse to create patterns: leopard spots, zebra stripes, corals. Gray-Scott simulates two concentrations (A, B) on a grid. A fills in, B consumes A, both diffuse. Result: stable patterns emerge from chaos.

The code

// Simplified Reaction-Diffusion (visual approx)
let grid;
function setup() {
  createCanvas(400, 280); pixelDensity(1);
  grid = Array.from({length:height},(_,j)=>Array.from({length:width},(_,i)=>noise(i*0.05,j*0.05)));
}
function draw() {
  loadPixels();
  for (let j=0;j<height;j++) for(let i=0;i<width;i++){
    let v=grid[j][i]; v+=0.01*(noise(i*0.02,j*0.02,frameCount*0.005)-0.5);
    grid[j][i]=constrain(v,0,1);
    let idx=(j*width+i)*4; let c=v*255;
    pixels[idx]=c*0.2;pixels[idx+1]=c*0.9;pixels[idx+2]=c*0.77;pixels[idx+3]=255;
  }
  updatePixels();
}

Going further

Explore other free courses on the Learn page, or book a call to discuss your project.

Want to go further?

Book a discovery call →