Petri: Logistic Growth

const GW = 80, GH = 60;
let nutrient, bacteria, history, peakPop, fit, t, frame, stationaryTimer;
let dishCX, dishCY, dishR, cell, chartH;
const MAX_POP = 1800;

function reseed() {
  nutrient.fill(1);
  bacteria.length = 0;
  for (let i = 0; i < 3; i++) {
    const a = Math.random() * Math.PI * 2, rr = Math.random() * 8;
    bacteria.push({ x: dishCX + Math.cos(a) * rr, y: dishCY + Math.sin(a) * rr, age: 0, gen: 0, divT: 3 + Math.random() * 2, alive: true, glow: 0 });
  }
  t = 0;
  history.length = 0;
  peakPop = 0;
  stationaryTimer = 0;
  fit = { N0: 3, r: 0.6, K: 1500 };
}

function layout(width, height) {
  chartH = Math.max(120, height * 0.26);
  const dh = height - chartH;
  dishR = Math.min(width, dh) * 0.45;
  dishCX = width / 2;
  dishCY = dh / 2;
  cell = Math.min(width / GW, dh / GH);
}

function init({ width, height }) {
  nutrient = new Float32Array(GW * GH);
  bacteria = [];
  history = [];
  peakPop = 0;
  fit = { N0: 3, r: 0.6, K: 1500 };
  t = 0;
  frame = 0;
  stationaryTimer = 0;
  layout(width, height);
  reseed();
}

function gridIdx(x, y) {
  const gx = (((x - dishCX) / cell + GW / 2) | 0);
  const gy = (((y - dishCY) / cell + GH / 2) | 0);
  if (gx < 0 || gy < 0 || gx >= GW || gy >= GH) return -1;
  return gy * GW + gx;
}

function step(dt) {
  t += dt;
  if ((frame & 3) === 0) {
    const n2 = new Float32Array(nutrient.length);
    for (let y = 1; y < GH - 1; y++) for (let x = 1; x < GW - 1; x++) {
      const i = y * GW + x;
      n2[i] = nutrient[i] * 0.92 + (nutrient[i - 1] + nutrient[i + 1] + nutrient[i - GW] + nutrient[i + GW]) * 0.02;
    }
    nutrient = n2;
  }
  let alive = 0;
  for (const b of bacteria) {
    if (!b.alive) continue;
    alive++;
    b.age += dt;
    b.glow *= 0.9;
    const idx = gridIdx(b.x, b.y);
    let food = idx >= 0 ? nutrient[idx] : 0;
    if (idx >= 0) nutrient[idx] = Math.max(0, nutrient[idx] - 0.015 * dt);
    b.x += (Math.random() - 0.5) * 0.15;
    b.y += (Math.random() - 0.5) * 0.15;
    const dx = b.x - dishCX, dy = b.y - dishCY, d = Math.hypot(dx, dy);
    if (d > dishR - 4) { b.x = dishCX + dx / d * (dishR - 4); b.y = dishCY + dy / d * (dishR - 4); }
    if (food > 0.15 && b.age > b.divT && bacteria.length < MAX_POP) {
      b.age = 0; b.divT = 4.5 + Math.random() * 1.5;
      const a = Math.random() * Math.PI * 2;
      bacteria.push({ x: b.x + Math.cos(a) * 2, y: b.y + Math.sin(a) * 2, age: 0, gen: b.gen + 1, divT: b.divT, alive: true, glow: 1 });
      b.glow = 1;
    }
    if (food < 0.05 && Math.random() < 0.02 * dt * 20) b.alive = false;
  }
  if ((frame & 31) === 0) bacteria = bacteria.filter((b) => b.alive);

  history.push({ t, n: alive });
  if (history.length > 600) history.shift();
  if (alive > peakPop) peakPop = alive;
  if (history.length === 60) {
    const a = history[10].n, bv = history[55].n;
    if (a > 2 && bv > a) fit.r = Math.log(bv / a) / (history[55].t - history[10].t);
    fit.N0 = history[0].n || 1;
  }
  fit.K = Math.max(fit.K, peakPop);
  if (alive > 0 && alive < peakPop * 0.4 && peakPop > 50) stationaryTimer += dt;
  if (stationaryTimer > 4 || (alive === 0 && history.length > 30)) reseed();
}

function tick({ ctx, dt, width, height }) {
  layout(width, height);
  frame++;
  step(Math.min(0.05, dt));

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

  const dh = height - chartH;
  const grad = ctx.createRadialGradient(dishCX, dishCY, dishR * 0.2, dishCX, dishCY, dishR);
  grad.addColorStop(0, "#0f1620");
  grad.addColorStop(1, "#05080b");
  ctx.fillStyle = grad;
  ctx.beginPath();
  ctx.arc(dishCX, dishCY, dishR, 0, Math.PI * 2);
  ctx.fill();

  ctx.globalCompositeOperation = "lighter";
  for (let y = 0; y < GH; y += 2) for (let x = 0; x < GW; x += 2) {
    const v = nutrient[y * GW + x];
    if (v < 0.05) continue;
    const px = dishCX + (x - GW / 2) * cell, py = dishCY + (y - GH / 2) * cell;
    if (Math.hypot(px - dishCX, py - dishCY) > dishR) continue;
    ctx.fillStyle = `rgba(60,140,90,${v * 0.12})`;
    ctx.fillRect(px, py, cell * 2, cell * 2);
  }
  for (const b of bacteria) {
    if (!b.alive) continue;
    const hue = 120 + Math.min(b.gen * 6, 180);
    if (b.glow > 0.1) {
      ctx.fillStyle = `hsla(${hue},90%,70%,${b.glow * 0.4})`;
      ctx.beginPath();
      ctx.arc(b.x, b.y, 4, 0, Math.PI * 2);
      ctx.fill();
    }
    ctx.fillStyle = `hsl(${hue},80%,${55 + b.glow * 20}%)`;
    ctx.beginPath();
    ctx.arc(b.x, b.y, 1.6, 0, Math.PI * 2);
    ctx.fill();
  }
  ctx.globalCompositeOperation = "source-over";
  ctx.strokeStyle = "rgba(180,200,210,0.4)";
  ctx.lineWidth = 1.5;
  ctx.beginPath();
  ctx.arc(dishCX, dishCY, dishR, 0, Math.PI * 2);
  ctx.stroke();

  const cy0 = dh + 10, cyH = chartH - 20;
  const cx0 = 40, cxW = width - 60;
  ctx.fillStyle = "#0d1115";
  ctx.fillRect(cx0, cy0, cxW, cyH);
  ctx.strokeStyle = "#1f2a33";
  ctx.strokeRect(cx0, cy0, cxW, cyH);

  if (history.length > 1) {
    const tmax = Math.max(history[history.length - 1].t, 30);
    const nmax = Math.max(fit.K * 1.1, peakPop * 1.1, 50);
    const phases = [["lag", "#1a2a1f", 0, 2], ["exp", "#1a3024", 2, 8], ["stationary", "#2a2a1a", 8, 16], ["death", "#301a1a", 16, 30]];
    for (const [name, col, a, b] of phases) {
      const x1 = cx0 + (a / tmax) * cxW, x2 = cx0 + Math.min(b, tmax) / tmax * cxW;
      ctx.fillStyle = col;
      ctx.fillRect(x1, cy0, x2 - x1, cyH);
      ctx.fillStyle = "rgba(200,210,220,0.45)";
      ctx.font = "10px monospace";
      ctx.fillText(name, x1 + 4, cy0 + 12);
    }
    ctx.strokeStyle = "rgba(255,180,80,0.8)";
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    for (let i = 0; i <= 120; i++) {
      const tt = (i / 120) * tmax;
      const N = fit.K / (1 + ((fit.K - fit.N0) / Math.max(fit.N0, 1)) * Math.exp(-fit.r * tt));
      const px = cx0 + (tt / tmax) * cxW, py = cy0 + cyH - (N / nmax) * cyH;
      if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
    }
    ctx.stroke();
    ctx.strokeStyle = "#7fe3a5";
    ctx.lineWidth = 2;
    ctx.beginPath();
    for (let i = 0; i < history.length; i++) {
      const h = history[i];
      const px = cx0 + (h.t / tmax) * cxW, py = cy0 + cyH - (h.n / nmax) * cyH;
      if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
    }
    ctx.stroke();
    ctx.fillStyle = "#9aa6b2";
    ctx.font = "11px monospace";
    const aliveCount = bacteria.filter((b) => b.alive).length;
    ctx.fillText(`N=${aliveCount}  K~${fit.K | 0}  r=${fit.r.toFixed(2)}`, cx0 + 8, cy0 + cyH - 8);
  }
}