Schelling Segregation

// Schelling segregation — agents prefer ≥k of 8 neighbors share their color.
// Mouse X scrubs tolerance k from 1..8. Mild preferences still cause sharp
// spatial segregation, the classic emergent-from-local-rules result.

const GW = 80, GH = 60;
const FILL = 0.92;   // fraction of cells occupied
const EMPTY = 0, RED = 1, BLUE = 2;

let grid;            // Uint8Array(GW*GH)
let empties;         // Int32Array of empty cell indices
let nEmpty = 0;
let off, octx, img, data;
let k = 4;
let unhappyRatio = 0;

function init({ width, height }) {
  grid = new Uint8Array(GW * GH);
  empties = new Int32Array(GW * GH);
  nEmpty = 0;
  for (let i = 0; i < grid.length; i++) {
    if (Math.random() < FILL) {
      grid[i] = Math.random() < 0.5 ? RED : BLUE;
    } else {
      grid[i] = EMPTY;
      empties[nEmpty++] = i;
    }
  }
  off = new OffscreenCanvas(GW, GH);
  octx = off.getContext("2d");
  img = octx.createImageData(GW, GH);
  data = img.data;
  k = 4;
  unhappyRatio = 0;
}

function neighborsSame(idx, color) {
  const x = idx % GW, y = (idx / GW) | 0;
  let n = 0;
  for (let dy = -1; dy <= 1; dy++) {
    const yy = y + dy;
    if (yy < 0 || yy >= GH) continue;
    const row = yy * GW;
    for (let dx = -1; dx <= 1; dx++) {
      if (dx === 0 && dy === 0) continue;
      const xx = x + dx;
      if (xx < 0 || xx >= GW) continue;
      if (grid[row + xx] === color) n++;
    }
  }
  return n;
}

function step() {
  // Single sweep: for each occupied cell, if unhappy, swap with a random empty.
  // Movers update `empties` in place so subsequent agents see fresh openings.
  let unhappy = 0, occupied = 0;
  // Visit cells in a random-ish order so the top-left bias doesn't dominate.
  // A fixed stride coprime with length gives a cheap permutation.
  const N = grid.length;
  const stride = 7919; // prime, coprime with 4800
  let i = (Math.random() * N) | 0;
  for (let s = 0; s < N; s++) {
    const c = grid[i];
    if (c !== EMPTY) {
      occupied++;
      if (neighborsSame(i, c) < k) {
        unhappy++;
        if (nEmpty > 0) {
          const slot = (Math.random() * nEmpty) | 0;
          const j = empties[slot];
          grid[j] = c;
          grid[i] = EMPTY;
          empties[slot] = i;     // the cell we just vacated is now empty
        }
      }
    }
    i = (i + stride) % N;
  }
  unhappyRatio = occupied > 0 ? unhappy / occupied : 0;
}

function render(ctx, width, height) {
  for (let i = 0, j = 0; i < grid.length; i++, j += 4) {
    const s = grid[i];
    if (s === RED) {
      data[j] = 230; data[j+1] = 70;  data[j+2] = 80;  data[j+3] = 255;
    } else if (s === BLUE) {
      data[j] = 70;  data[j+1] = 140; data[j+2] = 230; data[j+3] = 255;
    } else {
      data[j] = 14;  data[j+1] = 16;  data[j+2] = 22;  data[j+3] = 255;
    }
  }
  octx.putImageData(img, 0, 0);
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(off, 0, 0, width, height);
}

function drawHUD(ctx, width, height) {
  const pad = 10;
  const w = 168, h = 56;
  ctx.fillStyle = "rgba(0,0,0,0.62)";
  ctx.fillRect(pad, pad, w, h);
  ctx.fillStyle = "#fff";
  ctx.font = "12px monospace";
  ctx.textAlign = "left";
  ctx.textBaseline = "alphabetic";
  ctx.fillText(`tolerance k = ${k} / 8`, pad + 8, pad + 20);
  ctx.fillText(`unhappy   ${(unhappyRatio * 100).toFixed(1)}%`, pad + 8, pad + 38);

  // k slider bar
  const bx = pad + 8, by = pad + 44, bw = w - 16, bh = 6;
  ctx.fillStyle = "rgba(255,255,255,0.18)";
  ctx.fillRect(bx, by, bw, bh);
  ctx.fillStyle = "#ffd17a";
  ctx.fillRect(bx, by, bw * (k / 8), bh);

  // hint along the bottom
  ctx.fillStyle = "rgba(255,255,255,0.78)";
  ctx.textAlign = "center";
  ctx.fillText("move cursor left/right to scrub tolerance k",
    width / 2, height - 10);
}

function tick({ ctx, width, height, input }) {
  // Map mouseX in [0, width) to k in [1, 8]. Default sticks at 4 until move.
  const mx = input.mouseX;
  if (mx >= 0 && mx <= width) {
    const t = Math.max(0, Math.min(0.9999, mx / Math.max(1, width)));
    k = 1 + ((t * 8) | 0); // 1..8
  }

  step();
  render(ctx, width, height);
  drawHUD(ctx, width, height);
}