Lotka-Volterra: Rabbits and Foxes

const GW = 45, GH = 50, CS = 10;
let grass, rabbits, foxes, trail, tickN;
let WW = 450, HH = 500;
const PMAX = 300, FMAX = 100;

function init({ width, height }) {
  WW = Math.min(width * 0.5, 500);
  HH = height;
  grass = new Float32Array(GW * GH);
  for (let i = 0; i < grass.length; i++) grass[i] = Math.random();
  rabbits = [];
  foxes = [];
  for (let i = 0; i < 80; i++) rabbits.push({ x: Math.random() * WW, y: Math.random() * HH, e: 1 });
  for (let i = 0; i < 20; i++) foxes.push({ x: Math.random() * WW, y: Math.random() * HH, e: 1.5 });
  trail = [];
  tickN = 0;
}

function step() {
  tickN++;
  for (let i = 0; i < grass.length; i++) if (grass[i] < 1) grass[i] = Math.min(1, grass[i] + 0.004);

  for (let i = rabbits.length - 1; i >= 0; i--) {
    const r = rabbits[i];
    r.x += (Math.random() - 0.5) * 4; r.y += (Math.random() - 0.5) * 4;
    if (r.x < 0) r.x = 0; if (r.x > WW) r.x = WW;
    if (r.y < 0) r.y = 0; if (r.y > HH) r.y = HH;
    const gx = Math.floor(r.x / CS), gy = Math.floor(r.y / CS), gi = gy * GW + gx;
    if (gi >= 0 && gi < grass.length && grass[gi] > 0.3) { r.e += grass[gi] * 0.4; grass[gi] = 0; }
    r.e -= 0.01;
    if (r.e > 1.6 && rabbits.length < PMAX) { r.e *= 0.5; rabbits.push({ x: r.x, y: r.y, e: r.e }); }
    if (r.e <= 0) rabbits.splice(i, 1);
  }

  for (let i = foxes.length - 1; i >= 0; i--) {
    const f = foxes[i];
    let nr = null, nd = 1e9;
    for (let j = 0; j < rabbits.length; j++) {
      const r = rabbits[j];
      const dx = r.x - f.x, dy = r.y - f.y, d = dx * dx + dy * dy;
      if (d < nd) { nd = d; nr = r; }
    }
    if (nr) {
      const dx = nr.x - f.x, dy = nr.y - f.y;
      const d = Math.sqrt(dx * dx + dy * dy) || 1;
      f.x += dx / d * 2.2; f.y += dy / d * 2.2;
    } else {
      f.x += (Math.random() - 0.5) * 3; f.y += (Math.random() - 0.5) * 3;
    }
    if (f.x < 0) f.x = 0; if (f.x > WW) f.x = WW;
    if (f.y < 0) f.y = 0; if (f.y > HH) f.y = HH;
    for (let j = rabbits.length - 1; j >= 0; j--) {
      const r = rabbits[j];
      const dx = r.x - f.x, dy = r.y - f.y;
      if (dx * dx + dy * dy < 25) { rabbits.splice(j, 1); f.e += 0.6; break; }
    }
    f.e -= 0.012;
    if (f.e > 2.2 && foxes.length < FMAX) { f.e *= 0.5; foxes.push({ x: f.x, y: f.y, e: f.e }); }
    if (f.e <= 0) foxes.splice(i, 1);
  }
  if (tickN % 2 === 0) {
    trail.push({ r: rabbits.length, f: foxes.length });
    if (trail.length > 600) trail.shift();
  }
}

function tick({ ctx, width, height }) {
  WW = Math.min(width * 0.5, 500);
  HH = height;
  step();

  ctx.fillStyle = "#0a0e14";
  ctx.fillRect(0, 0, width, height);

  for (let gy = 0; gy < GH; gy++) for (let gx = 0; gx < GW; gx++) {
    const v = grass[gy * GW + gx];
    if (v > 0.2) {
      ctx.fillStyle = `rgba(60,140,60,${v * 0.35})`;
      ctx.fillRect(gx * CS, gy * CS, CS, CS);
    }
  }
  ctx.strokeStyle = "#1a2030";
  ctx.strokeRect(0, 0, WW, HH);
  for (const r of rabbits) { ctx.fillStyle = "#7fdc7f"; ctx.beginPath(); ctx.arc(r.x, r.y, 2.2, 0, Math.PI * 2); ctx.fill(); }
  for (const f of foxes) { ctx.fillStyle = "#ff5a4a"; ctx.beginPath(); ctx.arc(f.x, f.y, 3.2, 0, Math.PI * 2); ctx.fill(); }

  const PX = WW + 20, PY = 30, PW = width - PX - 20, PH = HH - 60;
  ctx.strokeStyle = "#2a3344";
  ctx.strokeRect(PX, PY, PW, PH);
  ctx.fillStyle = "#6a7388";
  ctx.font = "11px monospace";
  ctx.fillText("rabbits →", PX + PW - 70, PY + PH + 15);

  const sx = (v) => PX + (v / PMAX) * PW;
  const sy = (v) => PY + PH - (v / FMAX) * PH;
  ctx.beginPath();
  for (let i = 0; i < trail.length; i++) {
    const p = trail[i];
    const px = sx(p.r), py = sy(p.f);
    if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
  }
  ctx.strokeStyle = "rgba(140,160,200,0.5)";
  ctx.stroke();
  if (trail.length) {
    const p = trail[trail.length - 1];
    ctx.fillStyle = "rgba(255,220,120,0.25)";
    ctx.beginPath();
    ctx.arc(sx(p.r), sy(p.f), 10, 0, Math.PI * 2);
    ctx.fill();
    ctx.fillStyle = "#ffe680";
    ctx.beginPath();
    ctx.arc(sx(p.r), sy(p.f), 4, 0, Math.PI * 2);
    ctx.fill();
  }

  ctx.fillStyle = "#cfd6e0";
  ctx.font = "13px monospace";
  ctx.fillText("Lotka-Volterra Predator-Prey", 12, 20);
  ctx.fillStyle = "#7fdc7f";
  ctx.fillText("rabbits: " + rabbits.length, 12, HH - 26);
  ctx.fillStyle = "#ff5a4a";
  ctx.fillText("foxes:   " + foxes.length, 12, HH - 10);
  ctx.fillStyle = "#6a7388";
  ctx.fillText("phase space (rabbits vs foxes)", PX + 8, PY + 16);
}