We need to create index.html file with inline CSS/JS that implements a Gray-Scott reaction-diffusion simulation, with mouse seeding new growth. We don't need external libraries. So we will write the HTML file with canvas, and JS to compute Gray-Scott. We'll implement reaction-diffusion PDE using finite difference on a grid. We can use a 2D array of floats for U and V. For each time step, we compute Laplacian via convolution of kernel. Use periodic boundary conditions or wrap. We can store grid in Float32Array of size N*N. Provide speed by using typed arrays. Use 200x200 grid maybe. Render onto canvas by mapping to pixels. Mouse input: on mousemove, set u and v small region to initial values? Many implementations set cell to u=1, v=0. So we seeding? Actually seeding new growth: maybe setting v to 1. Ok.

We'll need a requestAnimationFrame loop updating and drawing. Provide speed by using canvas.getContext('2d'); and putImageData. Use createImageData of width height, set pixel data per loop.

Implement parameters in UI? Not required.

Ok we can create index.html.

We will use JavaScript to create simulation.

We will calculate Laplacian using kernel: [0.05 0.2 0.05; 0.2 -1 0.2; 0.05 0.2 0.05] or classic kernel: for Laplacian: (u(above)+u(below)+u(left)+u(right)-4u)/dx^2.

We'll probably compute approximate Laplacian with separate loops to speed.

Ok simple approach:

- grid x y size N 200.

- arrays U, V length N*N. Use Float32Array.

- Reaction-diffusion equations: du/dt = Du*laplacian(U)+f*(1-U)-U*V^2; dv/dt = Dv*laplacian(V)- (f+k)*V+U*V^2.

We pick typical Du=0.2, Dv=0.1, f=0.035, k=0.065.

Use a time step dt = 1.0 or 1.5.

We'll update each cell: compute laplacian via computing central difference.

Simpler: use 1D loops: for each i, j compute indices.

Compute laplacian:  lapu = U[up]+U[down]+U[left]+U[right]-4*U[center]; similarly for V.

To access neighbors with wrap: if i==0 left = N-1 else i-1; etc.

We'll use grid offset index = j*N + i.

Ok.

Mouse seeding: on mousemove, we can set a disk of radius r around mouse coordinates to U=1, V=0.

Implement event listener on canvas.

We must convert canvas pixels to grid coordinates: canvas width = grid size maybe. But we could have canvas size 400 or bigger.

Simpler: canvas width and height equal N, each pixel in canvas represents one grid cell; so the simulation grid corresponds 1-1 with canvas pixels.

We can set canvas width=height=512 maybe > N? But for performance, use N=256 or 512.

Ok choose 512 to match typical screen.

But with 512, grid 512x512 = 262k cells, fine.

Ok.

Set canvas width=height=512.

In drawing, we can iterate over all cells and set pixel values:_COLOR() = ... compute intensity from V maybe.

We'll convert V to grayscale or color.

Simpler: compute grayscale: val = Math.floor(V * 255); color = val; set data[i*4+0] = data[i*4+1] = data[i*4+2] = val; data[i*4+3] = 255.

We can set color using formula: color of U maybe.

Ok.

Mouse seeding: When mouse moves over canvas, get x,y; for each cell within radius r, set U=1, V=0.

The radius maybe 10.

Implement with for loops.

Click or move? The description "seeding new growth" as we move mouse.

So event mousedown maybe.

Ok.

We'll implement:

canvas.addEventListener('mousemove', function(e){});
Need to convert event coordinates to canvas coordinate: const rect = canvas.getBoundingClientRect(); const cx = e.clientX - rect.left; based on canvas scale.

But if canvas has CSS scaling not same as internal resolution: need to transform: cx/internalScale.

Simpler: set canvas style width same as its intrinsic size: no scaling. Use style width same as height.

Ok.

Now simulation steps: schedule function step that loops few steps per frame: say 5 steps per render.

Use requestAnimationFrame to call the stepAndRender method.

During step loop, compute new arrays and swap.

We need two arrays for U and V, compute next values; after loop, swap.

Ok.

We will also need to draw image: create ImageData once, call canvas.putImageData(img,0,0)

Ok.

Now put all into index.html with <style>, <script>.

Make sure no external resources.

Ok.

Let's draft code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gray-Scott Reaction Diffusion</title>
<style>
body{margin:0;overflow:hidden;background:#111;}
canvas{display:block;}
</style>
</head>
<body>
<canvas id="sim"></canvas>
<script>
const canvas=document.getElementById('sim');
const width=512;
const height=512;
canvas.width=width;
canvas.height=height;
const ctx=canvas.getContext('2d');
const imgData=ctx.createImageData(width,height);
const data=imgData.data;

const N = width; // use square grid
const dx=1.0;
const Du=0.2;
const Dv=0.1;
const f=0.035;
const k=0.065;
const dt=1.0;

let U = new Float32Array(N*N);
let V = new Float32Array(N*N);
let Unext = new Float32Array(N*N);
let Vnext = new Float32Array(N*N);

// initialize U near 1, V near 0
for (let i=0;i<N*N;i++){
  U[i]=1;
  V[i]=0;
}
// set a small square in center to unstable mixture
let r=20;
for (let y=height/2 - r; y<height/2 + r; y++){
  for (let x=width/2 - r; x<width/2 + r; x++){
    let idx=y*N+x;
    U[idx]=0.50;
    V[idx]=0.25;
  }
}

function laplacian(arr, idx) {
  const i = idx % N;
  const j = Math.floor(idx / N);
  let iUp = (i === 0) ? N-1 : i-1;
  let iDown = (i === N-1) ? 0 : i+1;
  let jUp = (j === 0) ? N-1 : j-1;
  let jDown = (j === N-1) ? 0 : j+1;
  let up = arr[jUp*N + i];
  let down = arr[jDown*N + i];
  let left = arr[j*N + iUp];
  let right = arr[j*N + iDown];
  return up + down + left + right - 4*arr[idx];
}

function step() {
  for (let idx=0; idx<N*N; idx++) {
    const u=U[idx], v=V[idx];
    const lapU=laplacian(U, idx);
    const lapV=laplacian(V, idx);
    const du = Du*lapU + f*(1-u) - u*v*v;
    const dv = Dv*lapV - (f+k)*v + u*v*v;
    Unext[idx] = u + du*dt;
    Vnext[idx] = v + dv*dt;
  }
  // swap
  let temp = U; U = Unext; Unext = temp;
  temp = V; V = Vnext; Vnext = temp;
}

function render() {
  for (let idx=0; idx<N*N; idx++){
    const v = V[idx];
    const val = Math.floor(v * 255);
    const pixel = idx*4;
    data[pixel] = val;
    data[pixel+1] = val;
    data[pixel+2] = val;
    data[pixel+3] = 255;
  }
  ctx.putImageData(imgData,0,0);
}

function animate() {
  for(let i=0; i<5; i++) step(); // multiple steps per frame
  render();
  requestAnimationFrame(animate);
}

// mouse seeding
canvas.addEventListener('mousemove', e => {
  const rect = canvas.getBoundingClientRect();
  const x = Math.floor((e.clientX - rect.left) / rect.width * width);
  const y = Math.floor((e.clientY - rect.top) / rect.height * height);
  const rad = 10;
  for (let dy=-rad; dy<=rad; dy++){
    for(let dx=-rad; dx<=rad; dx++){
      const nx = (x + dx + N) % N;
      const ny = (y + dy + N) % N;
      const idx = ny*N + nx;
      U[idx] = 1.0;
      V[idx] = 0.0;
    }
  }
});

animate();
</script>
</body>
</html>

Edge: The event mapping for scaling uses rect.width; we assume canvas pixel resolution equals its CSS width. This mapping should be correct.

Need to ensure index mapping: use N==width.

Also laplacian function not great re loops but ok.

Make final.

Let's write the file to workspace.