Physarum Slime Mold Network

// Physarum slime mold (Jeff Jones, 2010): thousands of agents sense a
// trail field ahead/ahead-left/ahead-right, turn toward the strongest
// signal, deposit pheromone, and the field diffuses + decays each frame.
// Emergent networks form between food sources dropped by the user.

const SCALE = 2;
const N_AGENTS = 4000;
const SENSE_DIST = 9;       // grid cells looked ahead
const SENSE_ANGLE = 0.5;    // radians off-axis
const TURN = 0.55;           // radians per turn
const SPEED = 1.05;          // grid cells per tick
const DEPOSIT = 28;
const DECAY = 0.93;
const FOOD_DEPOSIT = 240;
const FOOD_RADIUS = 6;

let W, H, GW, GH;
let field, field2, agentX, agentY, agentA;
let foods = [];
let img, pix, offCanvas, offCtx;

function init({ ctx, width, height }) {
  W = width; H = height;
  GW = Math.max(80, Math.floor(W / SCALE));
  GH = Math.max(80, Math.floor(H / SCALE));
  const N = GW * GH;
  field = new Float32Array(N);
  field2 = new Float32Array(N);

  agentX = new Float32Array(N_AGENTS);
  agentY = new Float32Array(N_AGENTS);
  agentA = new Float32Array(N_AGENTS);
  // Seed agents on a ring pointing inward — gives an immediate visible
  // collapse toward the center within ~10 frames.
  const cx = GW / 2, cy = GH / 2;
  const r0 = Math.min(GW, GH) * 0.32;
  for (let i = 0; i < N_AGENTS; i++) {
    const a = (i / N_AGENTS) * Math.PI * 2 + Math.random() * 0.4;
    agentX[i] = cx + Math.cos(a) * r0 * (0.6 + Math.random() * 0.4);
    agentY[i] = cy + Math.sin(a) * r0 * (0.6 + Math.random() * 0.4);
    agentA[i] = a + Math.PI + (Math.random() - 0.5) * 0.6;
  }

  foods = [{ x: cx, y: cy, life: 600 }];

  img = ctx.createImageData(GW, GH);
  pix = img.data;
  for (let i = 3; i < pix.length; i += 4) pix[i] = 255;
  offCanvas = new OffscreenCanvas(GW, GH);
  offCtx = offCanvas.getContext('2d');
}

function sample(x, y) {
  const ix = ((x | 0) % GW + GW) % GW;
  const iy = ((y | 0) % GH + GH) % GH;
  return field[iy * GW + ix];
}

function depositFood(px, py, amt) {
  const gx = px / SCALE, gy = py / SCALE;
  const r = FOOD_RADIUS;
  for (let dy = -r; dy <= r; dy++) {
    for (let dx = -r; dx <= r; dx++) {
      const d2 = dx * dx + dy * dy;
      if (d2 > r * r) continue;
      const x = ((((gx + dx) | 0) % GW) + GW) % GW;
      const y = ((((gy + dy) | 0) % GH) + GH) % GH;
      const falloff = 1 - d2 / (r * r);
      field[y * GW + x] += amt * falloff;
    }
  }
  foods.push({ x: gx, y: gy, life: 480 });
  if (foods.length > 12) foods.shift();
}

function tick({ ctx, frame, time, width, height, input }) {
  // Handle taps / clicks for food sources.
  const clicks = input.consumeClicks();
  for (let c = 0; c < clicks.length; c++) {
    depositFood(clicks[c].x, clicks[c].y, FOOD_DEPOSIT);
  }
  if (input.mouseDown && (frame & 3) === 0) {
    depositFood(input.mouseX, input.mouseY, FOOD_DEPOSIT * 0.4);
  }

  // Move agents.
  for (let i = 0; i < N_AGENTS; i++) {
    const a = agentA[i];
    const x = agentX[i], y = agentY[i];
    const fL = sample(x + Math.cos(a - SENSE_ANGLE) * SENSE_DIST,
                      y + Math.sin(a - SENSE_ANGLE) * SENSE_DIST);
    const fC = sample(x + Math.cos(a) * SENSE_DIST,
                      y + Math.sin(a) * SENSE_DIST);
    const fR = sample(x + Math.cos(a + SENSE_ANGLE) * SENSE_DIST,
                      y + Math.sin(a + SENSE_ANGLE) * SENSE_DIST);
    let na = a;
    if (fC >= fL && fC >= fR) {
      // straight
    } else if (fL > fR) na = a - TURN;
    else if (fR > fL) na = a + TURN;
    else na = a + (Math.random() - 0.5) * TURN * 2;

    let nx = x + Math.cos(na) * SPEED;
    let ny = y + Math.sin(na) * SPEED;
    // wrap (toroidal)
    if (nx < 0) nx += GW; else if (nx >= GW) nx -= GW;
    if (ny < 0) ny += GH; else if (ny >= GH) ny -= GH;
    agentX[i] = nx; agentY[i] = ny; agentA[i] = na;

    const ix = nx | 0, iy = ny | 0;
    field[iy * GW + ix] += DEPOSIT;
  }

  // Re-deposit active food sources so trails persist toward them.
  for (let i = foods.length - 1; i >= 0; i--) {
    const f = foods[i];
    f.life--;
    if (f.life <= 0) { foods.splice(i, 1); continue; }
    const r = FOOD_RADIUS;
    const amt = FOOD_DEPOSIT * 0.06 * (f.life / 480);
    for (let dy = -r; dy <= r; dy++) {
      for (let dx = -r; dx <= r; dx++) {
        const d2 = dx * dx + dy * dy;
        if (d2 > r * r) continue;
        const x = ((((f.x + dx) | 0) % GW) + GW) % GW;
        const y = ((((f.y + dy) | 0) % GH) + GH) % GH;
        field[y * GW + x] += amt * (1 - d2 / (r * r));
      }
    }
  }

  // Diffuse (3x3 box blur) + decay into field2, then swap.
  for (let y = 0; y < GH; y++) {
    const ym = y === 0 ? GH - 1 : y - 1;
    const yp = y === GH - 1 ? 0 : y + 1;
    const yr = y * GW, ymr = ym * GW, ypr = yp * GW;
    for (let x = 0; x < GW; x++) {
      const xm = x === 0 ? GW - 1 : x - 1;
      const xp = x === GW - 1 ? 0 : x + 1;
      const s = field[ymr + xm] + field[ymr + x] + field[ymr + xp]
              + field[yr  + xm] + field[yr  + x] + field[yr  + xp]
              + field[ypr + xm] + field[ypr + x] + field[ypr + xp];
      field2[yr + x] = (s * (1 / 9)) * DECAY;
    }
  }
  const tmp = field; field = field2; field2 = tmp;

  // Render: cyan/green slime palette over deep purple.
  const t = time * 0.15;
  const N = GW * GH;
  for (let i = 0; i < N; i++) {
    let v = field[i] * 0.018;
    if (v > 1) v = 1;
    if (v < 0) v = 0;
    const j = i << 2;
    // dim purple background, glowing cyan/green trails on top
    const v2 = v * v;
    pix[j]     = (10 + v2 * 60 + v * 90 * (0.6 + 0.4 * Math.sin(t))) | 0;
    pix[j + 1] = (12 + v * 200 + v2 * 55) | 0;
    pix[j + 2] = (22 + v * 180 + v2 * 75) | 0;
  }

  offCtx.putImageData(img, 0, 0);
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(offCanvas, 0, 0, GW, GH, 0, 0, W, H);

  // Food markers.
  for (let i = 0; i < foods.length; i++) {
    const f = foods[i];
    const px = f.x * SCALE, py = f.y * SCALE;
    const pulse = 0.6 + 0.4 * Math.sin(time * 4 + i);
    ctx.strokeStyle = `rgba(255,220,120,${0.35 * pulse})`;
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.arc(px, py, FOOD_RADIUS * SCALE + 2, 0, Math.PI * 2);
    ctx.stroke();
    ctx.fillStyle = `rgba(255,240,180,${0.55 * pulse})`;
    ctx.beginPath();
    ctx.arc(px, py, 2.5, 0, Math.PI * 2);
    ctx.fill();
  }

  ctx.fillStyle = 'rgba(220,230,255,0.78)';
  ctx.font = '12px system-ui, sans-serif';
  ctx.fillText(`agents: ${N_AGENTS}  food: ${foods.length}  tap to drop`, 10, 18);
}