Reynolds Boids

const N = 110;
const VIEW = 40, VIEW2 = VIEW * VIEW;
const SEP = 14, SEP2 = SEP * SEP;
const MAXS = 110, MAXF = 220;
const FLEE = 150, FLEE2 = FLEE * FLEE;
const CELL = VIEW;
let boids = [];
let cols, rows, grid;

function init({ width, height }) {
  boids = [];
  for (let i = 0; i < N; i++) {
    const a = Math.random() * Math.PI * 2;
    boids.push({
      x: Math.random() * width,
      y: Math.random() * height,
      vx: Math.cos(a) * 60,
      vy: Math.sin(a) * 60,
      d: 0,
      next: null,
    });
  }
  cols = Math.max(1, Math.ceil(width / CELL));
  rows = Math.max(1, Math.ceil(height / CELL));
  grid = new Array(cols * rows);
}

function rebuildGrid(width, height) {
  cols = Math.max(1, Math.ceil(width / CELL));
  rows = Math.max(1, Math.ceil(height / CELL));
  if (!grid || grid.length !== cols * rows) grid = new Array(cols * rows);
  for (let i = 0; i < grid.length; i++) grid[i] = null;
  for (let i = 0; i < boids.length; i++) {
    const b = boids[i];
    const cx = Math.min(cols - 1, Math.max(0, Math.floor(b.x / CELL)));
    const cy = Math.min(rows - 1, Math.max(0, Math.floor(b.y / CELL)));
    const k = cy * cols + cx;
    b.next = grid[k];
    grid[k] = b;
  }
}

function limit(b, max) {
  const s2 = b.vx * b.vx + b.vy * b.vy;
  if (s2 > max * max) {
    const s = Math.sqrt(s2);
    b.vx = (b.vx / s) * max;
    b.vy = (b.vy / s) * max;
  }
}

function tick({ ctx, dt, width, height, input }) {
  if (dt > 0.05) dt = 0.05;
  rebuildGrid(width, height);

  const predX = input.mouseX, predY = input.mouseY;
  const predOn = input.mouseDown;

  for (let i = 0; i < boids.length; i++) {
    const b = boids[i];
    let sx = 0, sy = 0, ax = 0, ay = 0, cx = 0, cy = 0;
    let nA = 0, nC = 0, nS = 0;

    const gx = Math.min(cols - 1, Math.max(0, Math.floor(b.x / CELL)));
    const gy = Math.min(rows - 1, Math.max(0, Math.floor(b.y / CELL)));

    for (let oy = -1; oy <= 1; oy++) {
      for (let ox = -1; ox <= 1; ox++) {
        const nx = gx + ox, ny = gy + oy;
        if (nx < 0 || ny < 0 || nx >= cols || ny >= rows) continue;
        let o = grid[ny * cols + nx];
        while (o) {
          if (o !== b) {
            const dx = o.x - b.x, dy = o.y - b.y;
            const d2 = dx * dx + dy * dy;
            if (d2 < VIEW2) {
              ax += o.vx; ay += o.vy; nA++;
              cx += o.x; cy += o.y; nC++;
              if (d2 < SEP2 && d2 > 0.0001) {
                sx -= dx / d2; sy -= dy / d2; nS++;
              }
            }
          }
          o = o.next;
        }
      }
    }

    b.d = nA;

    let fx = 0, fy = 0;
    if (nS > 0) { fx += sx * 900; fy += sy * 900; }
    if (nA > 0) {
      ax /= nA; ay /= nA;
      fx += (ax - b.vx) * 1.2;
      fy += (ay - b.vy) * 1.2;
    }
    if (nC > 0) {
      cx = cx / nC - b.x; cy = cy / nC - b.y;
      fx += cx * 0.8; fy += cy * 0.8;
    }

    if (predOn) {
      const dx = b.x - predX, dy = b.y - predY;
      const d2 = dx * dx + dy * dy;
      if (d2 < FLEE2 && d2 > 0.01) {
        const d = Math.sqrt(d2);
        const s = (1 - d / FLEE) * 600;
        fx += (dx / d) * s; fy += (dy / d) * s;
      }
    }

    if (fx * fx + fy * fy > MAXF * MAXF) {
      const fm = Math.sqrt(fx * fx + fy * fy);
      fx = (fx / fm) * MAXF; fy = (fy / fm) * MAXF;
    }

    b.vx += fx * dt; b.vy += fy * dt;
    limit(b, MAXS);
    b.x += b.vx * dt; b.y += b.vy * dt;

    if (b.x < 0) b.x += width; else if (b.x >= width) b.x -= width;
    if (b.y < 0) b.y += height; else if (b.y >= height) b.y -= height;
  }

  ctx.fillStyle = "rgba(8,10,18,0.35)";
  ctx.fillRect(0, 0, width, height);

  for (let i = 0; i < boids.length; i++) {
    const b = boids[i];
    const ang = Math.atan2(b.vy, b.vx);
    const hue = 200 - Math.min(60, b.d * 6);
    ctx.fillStyle = `hsl(${hue},80%,${55 + Math.min(20, b.d)}%)`;
    ctx.beginPath();
    const cs = Math.cos(ang), sn = Math.sin(ang);
    ctx.moveTo(b.x + cs * 7, b.y + sn * 7);
    ctx.lineTo(b.x + (-cs * 4 - sn * 3), b.y + (-sn * 4 + cs * 3));
    ctx.lineTo(b.x + (-cs * 4 + sn * 3), b.y + (-sn * 4 - cs * 3));
    ctx.closePath();
    ctx.fill();
  }

  if (predOn) {
    ctx.strokeStyle = "rgba(255,80,80,0.5)";
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.arc(predX, predY, FLEE, 0, Math.PI * 2);
    ctx.stroke();
  }
}