Lotka-Volterra: Rabbits and Foxes

const GW = 45, GH = 50, CS = 10;
let grass, rabbits, foxes, trail, tickN;
// Agent panel rect in canvas pixels
let AX = 0, AY = 0, AW = 450, AH = 500;
// Phase panel rect
let PX = 0, PY = 0, PW = 200, PH = 200;
let stacked = false;
let killEff = 0.55; // fox-kill efficiency, driven by mouseY
const PMAX = 300, FMAX = 100;

function layout(width, height) {
  stacked = width < 600;
  if (stacked) {
    // vertical stack: agents on top, phase below
    AX = 0; AY = 0;
    AW = width;
    AH = Math.floor(height * 0.6);
    PX = 10; PY = AH + 10;
    PW = width - 20;
    PH = height - PY - 30;
  } else {
    AX = 0; AY = 0;
    AW = Math.min(width * 0.5, 500);
    AH = height;
    PX = AW + 20; PY = 30;
    PW = width - PX - 20;
    PH = AH - 60;
  }
  // clamp grid size to agent panel
  // (grid is fixed GW*CS, GH*CS = 450x500 — fits both layouts at width>=320)
}

function init({ width, height }) {
  layout(width, 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() * AW, y: Math.random() * AH, e: 1 });
  for (let i = 0; i < 20; i++) foxes.push({ x: Math.random() * AW, y: Math.random() * AH, 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 > AW) r.x = AW;
    if (r.y < 0) r.y = 0; if (r.y > AH) r.y = AH;
    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);
  }

  // killEff controls how easily foxes convert kills into energy:
  //   low  → foxes starve, rabbits explode
  //   high → foxes wipe out rabbits, then crash
  const killRadius2 = 16 + killEff * 60; // 16..76 px^2 hit radius
  const killGain = 0.2 + killEff * 1.0;  // 0.2..1.2 energy per kill

  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 > AW) f.x = AW;
    if (f.y < 0) f.y = 0; if (f.y > AH) f.y = AH;
    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 < killRadius2) { rabbits.splice(j, 1); f.e += killGain; 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 handleInput(input) {
  // mouseY controls killEff. Map mouseY across the agent panel to 0..1.
  if (input && typeof input.mouseY === "number" && AH > 0) {
    const my = input.mouseY - AY;
    if (my >= 0 && my <= AH) {
      killEff = Math.max(0, Math.min(1, my / AH));
    }
  }
  // Clicks inside agent panel: top half drops foxes, bottom half drops rabbits.
  if (input && typeof input.consumeClicks === "function") {
    const clicks = input.consumeClicks() || [];
    for (const c of clicks) {
      const cx = c.x, cy = c.y;
      if (cx >= AX && cx <= AX + AW && cy >= AY && cy <= AY + AH) {
        const topHalf = (cy - AY) < AH * 0.5;
        for (let k = 0; k < 10; k++) {
          const px = cx + (Math.random() - 0.5) * 30;
          const py = cy + (Math.random() - 0.5) * 30;
          const x = Math.max(0, Math.min(AW, px));
          const y = Math.max(0, Math.min(AH, py));
          if (topHalf) {
            if (foxes.length < FMAX) foxes.push({ x, y, e: 1.5 });
          } else {
            if (rabbits.length < PMAX) rabbits.push({ x, y, e: 1 });
          }
        }
      }
    }
  }
}

function tick({ ctx, width, height, input }) {
  layout(width, height);
  handleInput(input);
  step();

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

  // Grass — clip to agent panel bounds (grid is fixed GW*CS x GH*CS).
  ctx.save();
  ctx.beginPath();
  ctx.rect(AX, AY, AW, AH);
  ctx.clip();
  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(AX + gx * CS, AY + gy * CS, CS, CS);
    }
  }
  // Agents
  for (const r of rabbits) { ctx.fillStyle = "#7fdc7f"; ctx.beginPath(); ctx.arc(AX + r.x, AY + r.y, 2.2, 0, Math.PI * 2); ctx.fill(); }
  for (const f of foxes) { ctx.fillStyle = "#ff5a4a"; ctx.beginPath(); ctx.arc(AX + f.x, AY + f.y, 3.2, 0, Math.PI * 2); ctx.fill(); }
  ctx.restore();
  ctx.strokeStyle = "#1a2030";
  ctx.strokeRect(AX, AY, AW, AH);

  // Visual hint: thin horizontal line at the mouseY position inside the agent panel
  if (input && typeof input.mouseY === "number") {
    const my = input.mouseY;
    if (my >= AY && my <= AY + AH) {
      ctx.strokeStyle = "rgba(255,220,120,0.35)";
      ctx.beginPath();
      ctx.moveTo(AX, my); ctx.lineTo(AX + AW, my);
      ctx.stroke();
    }
    // Divider at half (top=foxes / bottom=rabbits zones for clicks)
    ctx.strokeStyle = "rgba(120,140,180,0.12)";
    ctx.beginPath();
    ctx.moveTo(AX, AY + AH * 0.5); ctx.lineTo(AX + AW, AY + AH * 0.5);
    ctx.stroke();
  }

  // Phase plot
  ctx.strokeStyle = "#2a3344";
  ctx.strokeRect(PX, PY, PW, PH);
  ctx.fillStyle = "#6a7388";
  ctx.font = "11px monospace";
  ctx.fillText("rabbits →", PX + Math.max(0, 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();
  }

  // HUD
  ctx.fillStyle = "#cfd6e0";
  ctx.font = "13px monospace";
  ctx.fillText("Lotka-Volterra Predator-Prey", AX + 8, AY + 16);
  ctx.fillStyle = "#7fdc7f";
  ctx.fillText("rabbits: " + rabbits.length, AX + 8, AY + AH - 42);
  ctx.fillStyle = "#ff5a4a";
  ctx.fillText("foxes:   " + foxes.length, AX + 8, AY + AH - 26);
  ctx.fillStyle = "#ffe680";
  ctx.fillText("kill eff (mouseY): " + killEff.toFixed(2), AX + 8, AY + AH - 10);

  ctx.fillStyle = "#6a7388";
  ctx.font = "11px monospace";
  ctx.fillText("phase space (rabbits vs foxes)", PX + 8, PY + 16);
  ctx.fillText("click top=+10 foxes, bottom=+10 rabbits", AX + 8, AY + 32);
}