Gray-Scott Mitosis Painter

let W, H, GW, GH, SCALE = 3;
let A1, A2, B1, B2;
let img, pix;

function init({ canvas, ctx, width, height, input }) {
  W = width; H = height;
  GW = Math.max(40, Math.floor(W / SCALE));
  GH = Math.max(40, Math.floor(H / SCALE));
  const N = GW * GH;
  A1 = new Float32Array(N);
  A2 = new Float32Array(N);
  B1 = new Float32Array(N);
  B2 = new Float32Array(N);
  for (let i = 0; i < N; i++) { A1[i] = 1; A2[i] = 1; }
  const cx = GW >> 1, cy = GH >> 1, r = 6;
  for (let y = cy - r; y <= cy + r; y++) {
    for (let x = cx - r; x <= cx + r; x++) {
      const dx = x - cx, dy = y - cy;
      if (dx * dx + dy * dy <= r * r) {
        const i = ((y + GH) % GH) * GW + ((x + GW) % GW);
        B1[i] = 1; A1[i] = 0.5;
      }
    }
  }
  img = ctx.createImageData(GW, GH);
  pix = img.data;
  for (let i = 3; i < pix.length; i += 4) pix[i] = 255;
}

function paintBlob(px, py, radius) {
  const gx = Math.floor(px / SCALE);
  const gy = Math.floor(py / SCALE);
  const r = radius;
  for (let y = -r; y <= r; y++) {
    for (let x = -r; x <= r; x++) {
      if (x * x + y * y <= r * r) {
        const xi = ((gx + x) % GW + GW) % GW;
        const yi = ((gy + y) % GH + GH) % GH;
        const i = yi * GW + xi;
        B1[i] = 1; A1[i] = 0.2;
      }
    }
  }
}

function step(A, B, A2, B2) {
  const dA = 1.0, dB = 0.5, f = 0.055, k = 0.062, dt = 1.0;
  for (let y = 0; y < GH; y++) {
    const ym = (y - 1 + GH) % GH;
    const yp = (y + 1) % GH;
    const yrow = y * GW;
    const ymrow = ym * GW;
    const yprow = yp * GW;
    for (let x = 0; x < GW; x++) {
      const xm = (x - 1 + GW) % GW;
      const xp = (x + 1) % GW;
      const i = yrow + x;
      const a = A[i], b = B[i];
      const lapA = (A[ymrow + x] + A[yprow + x] + A[yrow + xm] + A[yrow + xp]) * 0.25 - a;
      const lapB = (B[ymrow + x] + B[yprow + x] + B[yrow + xm] + B[yrow + xp]) * 0.25 - b;
      const abb = a * b * b;
      let na = a + (dA * lapA - abb + f * (1 - a)) * dt;
      let nb = b + (dB * lapB + abb - (k + f) * b) * dt;
      if (na < 0) na = 0; else if (na > 1) na = 1;
      if (nb < 0) nb = 0; else if (nb > 1) nb = 1;
      A2[i] = na;
      B2[i] = nb;
    }
  }
}

function tick({ ctx, dt, frame, time, width, height, input }) {
  const clicks = input.consumeClicks();
  for (let c = 0; c < clicks.length; c++) {
    paintBlob(clicks[c].x, clicks[c].y, 8);
  }
  if (input.mouseDown) {
    paintBlob(input.mouseX, input.mouseY, 6);
  }

  const SUB = 6;
  for (let s = 0; s < SUB; s++) {
    step(A1, B1, A2, B2);
    let t = A1; A1 = A2; A2 = t;
    t = B1; B1 = B2; B2 = t;
  }

  const t = time * 0.3;
  const N = GW * GH;
  for (let i = 0; i < N; i++) {
    let v = B1[i] * 4.5;
    if (v > 1) v = 1;
    const j = i << 2;
    const v2 = v * v;
    const r = (v * 255 * (0.6 + 0.4 * Math.sin(t)));
    const g = (v2 * 255);
    const b = (Math.sqrt(v) * 255);
    pix[j]     = r < 0 ? 0 : r > 255 ? 255 : r;
    pix[j + 1] = g < 0 ? 0 : g > 255 ? 255 : g;
    pix[j + 2] = b < 0 ? 0 : b > 255 ? 255 : b;
  }

  ctx.putImageData(img, 0, 0);
  ctx.imageSmoothingEnabled = false;
  ctx.globalCompositeOperation = 'copy';
  ctx.drawImage(ctx.canvas, 0, 0, GW, GH, 0, 0, W, H);
  ctx.globalCompositeOperation = 'source-over';
}