Reaction-diffusion · grok-4.20

Run a Gray-Scott reaction-diffusion simulation on a canvas that grows organic Turing patterns in real time, with the mouse seeding new growth.

⛨ sandboxed Open in new tab ↗

transcript · 4 messages

user

Run a Gray-Scott reaction-diffusion simulation on a canvas that grows organic Turing patterns in real time, with the mouse seeding new growth.

assistant

thinking

The task is: "Run a Gray-Scott reaction-diffusion simulation on a canvas that grows organic Turing patterns in real time, with the mouse seeding new growth." I need to build a single-page web app in o...The task is to create a single-page web app in one index.html file with CSS in <style> and JS in <script>, no external resources. It should run a Gray-Scott reaction-diffusion simulation on a canvas that grows organic Turing patterns in real time, with the mouse seeding new growth.

I need to implement 2D reaction-diffusion using canvas and JS.

Key components:

- Canvas element, say 512x512 for simplicity.

- Use ImageData for fast updates.

- Two grids: u and v, as Float32Arrays of size width*height.

- Parameters: Du, Dv, F, k.

- Typical values 0.16, 0.08, 0.035, 0.065 for patterns.

- Mouse: on mousedown/mousemove, set a region to high v or u=0.5 v=0.25 to seed.

- Update: in loop, compute laplacian for u and v 9-point stencil, apply reactions, swap buffers.

- Render: map u or v to color, e.g., black background, color based on v concentration.

- Add controls: sliders for F, k, Du, Dv, brush size, color mode, presets.

- Presets: e.g., spots, stripes 1, stripes 2.

- Reset button.

- Use requestAnimationFrame.

- Self-contained: all in one file.

I need to write the code.

First, sketch the code structure.

<!DOCTYPE html>

<html>

<head>

<title>Gray-Scott Turing Patterns</title>

<style>

body { margin:0 0; background:#000; color:#fff; font-family:Arial; }

#container { position:relative; }

canvas { display:block; }

#controls { position:absolute; top:10px; left:10px; background:rgba(0,0,0,0.7); padding:10px; border 1px solid #fff; }

</style>

</head>

<body>

<div id="container">

<canvas id="canvas" width="512" height="512"></canvas>

<div id="controls">

<label>F: <input type="range" id="F" min="0" max="0.1" step="0.001" value="0.035"></label><br>

<label>k: <input type="range" id="k" min="0" max="0.1" step="0.001" value="0.065"></label><br>

<button id="reset">Reset</button>

 <button id="pause">Pause</button>

</div>

</div>

<script>

// JS code here

</script>

</body>

</html>

Now, the JS.

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');

const width = canvas.width;

const height = canvas.height;

const size = width * height;

let u = new Float32Array(size);

let v = new Float32Array(size);

let u2 = new Float32Array(size);

let v2 = new Float32Array(size);

let Du = 0.16;

let Dv = 0. 08;

let F = 0.035;

let k = 0.065;

let timestep = 1.0; // adjust if needed

let paused = false;

let mouseDown = false;

let mouseX = 0;

let mouseY = 0;

let brushRadius = 10;

// init 1,0

for(let i=0; i<size; i++) {

  u[i] = 1.0;

  v[i] = 0.0;

}

// seed some

function seed() {

  for(let i=0; i<size; i++) {

    u[i] = 1 .0;

    v[i] = 0.0;

  }

  // central area

  let cx = width/2;

  let cy = height/2;

  for(let y=-10; y<10; y++) {

    for(let x=-10; x<10; x++) {

 let idx = (cx+x) + (cy+y)*width;

  if(idx >0 && idx <size) {

    u[idx] = 0.5;

    v[idx] = 0.25;

  }

    }

  }

}

seed();

// mouse

canvas.addEventListener('mousedown', ( e) => {

  mouseDown = true;

  updateMouse(e);

});

canvas.addEventListener('mousemove', updateMouse);

function updateMouse(e) {

  const rect = canvas.getBoundingClientRect();

  mouseX = (e.clientX - rect.left) * width / rect.width;

  mouseY = (e.clientY - rect.top) * height / rect.height;

}

canvas.addEventListener('mouseup', () => mouseDown = false);

canvas.addEventListener('mouseleave', () => mouseDown = false);

// presets

const presets = {

  spots: {F:0.035, k:0.065 },

  waves: {F:0.014, k:0.045},

  mitosis: {F:0.062, k:0.0609},

  // add more

};

document.getElementById('F').addEventListener('input', (e) => F = parseFloat(e.target .value));

document.getElementById('k').addEventListener('input', (e) => k = parseFloat(e.target.value));

document.getElementById('reset').addEventListener('click', () => {

  seed();

  F = parseFloat(document.getElementById('F').value);

 k = parseFloat(document.getElementById('k').value);

});

document.getElementById('pause').

→ write index.html (22890 bytes)

toolResult

Successfully wrote 22890 bytes to index.html

assistant

thinking

The task is complete. I've created a single self-contained index.html file with a Gray-Scott reaction-diffusion simulation. It features:

The simulation has been built and written to **index.html**. Open the file in a browser to run the interactive Gray-Scott reaction-diffusion demo (organic Turing patterns grow in real time; drag the mouse to seed new growth).

TAKE IT TO CODE

A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.

RUN

modelgrok-4.20

vendorxAI · Grok

harnesspi-agent

generated2026-08-01

EVALUATION

★★★★★ 2/5 partial

Canvas shows sparse purple dots but no visible growth or organic Turing patterns forming; drag adds slight mark but no diffusion spreading.

Vision grade · anthropic/claude-sonnet-5

MEASUREMENTS

Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.

idle motion17.6%

on click0.6%

on drag0.3%

on wheel0.3%

on enter + space0.0%

on arrow keys0.0%

on w/a/s/d0.0%

frame spread15.8 / 255

console errors1

js errors none

METRICS

runtime84.7s

tokens in6.2k

tokens out13k

cached2.3k

cost / run$0.0415