Lenia Drift

let W, H, GW, GH, R;
let A, B, N, img;
let kernel, kSum, kR;
const MU = 0.15, SIGMA = 0.017, DT = 0.1;

function seedBlob(cx, cy, rad) {
  for (let j = -rad; j <= rad; j++) {
    for (let i = -rad; i <= rad; i++) {
      if (i * i + j * j > rad * rad) continue;
      const x = ((cx + i) % GW + GW) % GW;
      const y = ((cy + j) % GH + GH) % GH;
      A[y * GW + x] = Math.random();
    }
  }
}

function init({ canvas, ctx, width, height }) {
  W = width; H = height;
  R = 4;
  GW = (W / R) | 0;
  GH = (H / R) | 0;
  A = new Float32Array(GW * GH);
  B = new Float32Array(GW * GH);
  N = new Float32Array(GW * GH);
  img = ctx.createImageData(W, H);

  kR = 13;
  const kd = kR * 2 + 1;
  kernel = new Float32Array(kd * kd);
  kSum = 0;
  for (let j = -kR; j <= kR; j++) {
    for (let i = -kR; i <= kR; i++) {
      const r = Math.sqrt(i * i + j * j) / kR;
      let v = 0;
      if (r > 0 && r < 1) {
        const rr = (r - 0.5) / 0.15;
        v = Math.exp(-0.5 * rr * rr);
      }
      kernel[(j + kR) * kd + (i + kR)] = v;
      kSum += v;
    }
  }
  for (let i = 0; i < kernel.length; i++) kernel[i] /= kSum;

  for (let s = 0; s < 8; s++) {
    const cx = (Math.random() * GW) | 0;
    const cy = (Math.random() * GH) | 0;
    const rad = 10 + ((Math.random() * 8) | 0);
    seedBlob(cx, cy, rad);
  }
}

function convolve(src, dst) {
  const kd = kR * 2 + 1;
  for (let y = 0; y < GH; y++) {
    for (let x = 0; x < GW; x++) {
      let sum = 0;
      for (let j = -kR; j <= kR; j++) {
        const yy = ((y + j) % GH + GH) % GH;
        const row = yy * GW;
        const krow = (j + kR) * kd;
        for (let i = -kR; i <= kR; i++) {
          const xx = ((x + i) % GW + GW) % GW;
          sum += src[row + xx] * kernel[krow + (i + kR)];
        }
      }
      dst[y * GW + x] = sum;
    }
  }
}

function growth(u) {
  const d = (u - MU) / SIGMA;
  return 2 * Math.exp(-0.5 * d * d) - 1;
}

function step() {
  convolve(A, N);
  for (let i = 0; i < A.length; i++) {
    let v = A[i] + DT * growth(N[i]);
    if (v < 0) v = 0; else if (v > 1) v = 1;
    B[i] = v;
  }
  const tmp = A; A = B; B = tmp;
}

function render(ctx) {
  const data = img.data;
  for (let y = 0; y < H; y++) {
    const gy = (y / R) | 0;
    for (let x = 0; x < W; x++) {
      const gx = (x / R) | 0;
      const v = A[gy * GW + gx];
      const t = v;
      const r = (255 * Math.pow(t, 1.6)) | 0;
      const g = (200 * Math.pow(1 - Math.abs(t - 0.5) * 2, 2) + 30 * t) | 0;
      const b = (255 * (1 - t) * t * 4) | 0;
      const idx = (y * W + x) * 4;
      data[idx] = r;
      data[idx + 1] = g < 0 ? 0 : g > 255 ? 255 : g;
      data[idx + 2] = b < 0 ? 0 : b > 255 ? 255 : b;
      data[idx + 3] = 255;
    }
  }
  ctx.putImageData(img, 0, 0);
}

function tick({ ctx, input }) {
  const clicks = input.consumeClicks();
  for (let i = 0; i < clicks.length; i++) {
    const c = clicks[i];
    const cx = (c.x / R) | 0;
    const cy = (c.y / R) | 0;
    const rad = 10 + ((Math.random() * 8) | 0);
    seedBlob(cx, cy, rad);
  }
  step();
  render(ctx);
}