Ising Curie Point

const GRID = 200;
let spins, img, imgData, T, magHist, magIdx;
let W = 0, H = 0;
const BTN = 44;
const BTN_PAD = 12;

function init({ canvas, ctx, width, height }) {
  W = width; H = height;
  spins = new Int8Array(GRID * GRID);
  for (let i = 0; i < spins.length; i++) spins[i] = Math.random() < 0.5 ? 1 : -1;
  imgData = ctx.createImageData(GRID, GRID);
  img = imgData.data;
  for (let i = 0; i < img.length; i += 4) img[i + 3] = 255;
  T = 2.4;
  magHist = new Float32Array(180);
  magIdx = 0;
}

function expTable(T) {
  return {
    e4: Math.exp(-4 / T),
    e8: Math.exp(-8 / T),
  };
}

function step(N, T) {
  const { e4, e8 } = expTable(T);
  const g = GRID;
  for (let n = 0; n < N; n++) {
    const x = (Math.random() * g) | 0;
    const y = (Math.random() * g) | 0;
    const i = y * g + x;
    const s = spins[i];
    const xl = x === 0 ? g - 1 : x - 1;
    const xr = x === g - 1 ? 0 : x + 1;
    const yu = y === 0 ? g - 1 : y - 1;
    const yd = y === g - 1 ? 0 : y + 1;
    const nb = spins[y * g + xl] + spins[y * g + xr] + spins[yu * g + x] + spins[yd * g + x];
    const dE = 2 * s * nb;
    if (dE <= 0) {
      spins[i] = -s;
    } else {
      const p = dE === 4 ? e4 : e8;
      if (Math.random() < p) spins[i] = -s;
    }
  }
}

function render(ctx) {
  const g = GRID;
  let sum = 0;
  for (let i = 0; i < spins.length; i++) {
    const s = spins[i];
    sum += s;
    const o = i << 2;
    if (s > 0) {
      img[o] = 255; img[o + 1] = 120; img[o + 2] = 40;
    } else {
      img[o] = 30; img[o + 1] = 80; img[o + 2] = 200;
    }
  }
  if (!render._buf) {
    render._buf = new OffscreenCanvas(g, g);
    render._bctx = render._buf.getContext("2d");
  }
  render._bctx.putImageData(imgData, 0, 0);
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(render._buf, 0, 0, W, H);
  return sum / spins.length;
}

function pointInRect(x, y, rx, ry, rw, rh) {
  return x >= rx && x <= rx + rw && y >= ry && y <= ry + rh;
}

function buttonRects() {
  const plusX = W - BTN_PAD - BTN;
  const minusX = plusX - BTN - 8;
  const y = H - BTN_PAD - BTN;
  return { minusX, plusX, y };
}

function drawButton(ctx, x, y, size, label, hot) {
  ctx.fillStyle = hot ? "rgba(255,160,60,0.85)" : "rgba(0,0,0,0.65)";
  ctx.fillRect(x, y, size, size);
  ctx.strokeStyle = "rgba(255,255,255,0.45)";
  ctx.lineWidth = 1;
  ctx.strokeRect(x + 0.5, y + 0.5, size - 1, size - 1);
  ctx.fillStyle = "#fff";
  ctx.font = "bold 26px ui-sans-serif, system-ui";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(label, x + size / 2, y + size / 2);
}

function drawHUD(ctx, m, hotMinus, hotPlus) {
  const pad = 12;
  ctx.fillStyle = "rgba(0,0,0,0.55)";
  ctx.fillRect(pad, pad, 240, 86);
  ctx.fillStyle = "#fff";
  ctx.font = "14px monospace";
  ctx.textAlign = "left";
  ctx.textBaseline = "alphabetic";
  ctx.fillText(`T   = ${T.toFixed(3)}`, pad + 10, pad + 22);
  ctx.fillText(`T_c = 2.269`, pad + 10, pad + 40);
  ctx.fillText(`|M| = ${Math.abs(m).toFixed(3)}`, pad + 10, pad + 58);
  ctx.fillText(T < 2.269 ? "ordered phase" : "disordered", pad + 10, pad + 76);

  const sw = 240, sh = 50;
  const sx = pad, sy = H - sh - pad;
  ctx.fillStyle = "rgba(0,0,0,0.55)";
  ctx.fillRect(sx, sy, sw, sh);
  ctx.strokeStyle = "rgba(255,255,255,0.25)";
  ctx.beginPath();
  ctx.moveTo(sx, sy + sh / 2);
  ctx.lineTo(sx + sw, sy + sh / 2);
  ctx.stroke();
  ctx.strokeStyle = "#ffd17a";
  ctx.beginPath();
  for (let i = 0; i < magHist.length; i++) {
    const idx = (magIdx + i) % magHist.length;
    const v = magHist[idx];
    const px = sx + (i / (magHist.length - 1)) * sw;
    const py = sy + sh / 2 - v * (sh / 2 - 2);
    if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
  }
  ctx.stroke();

  const bx = W - 220 - pad, by = pad, bw = 220, bh = 18;
  ctx.fillStyle = "rgba(0,0,0,0.55)";
  ctx.fillRect(bx, by, bw, bh + 22);
  const tMin = 0.5, tMax = 5.0;
  const frac = (T - tMin) / (tMax - tMin);
  ctx.fillStyle = "#3a4a8a";
  ctx.fillRect(bx + 6, by + 6, bw - 12, bh - 12);
  ctx.fillStyle = "#ff9a3c";
  ctx.fillRect(bx + 6, by + 6, (bw - 12) * Math.max(0, Math.min(1, frac)), bh - 12);
  const cfrac = (2.269 - tMin) / (tMax - tMin);
  ctx.strokeStyle = "#fff";
  ctx.beginPath();
  ctx.moveTo(bx + 6 + (bw - 12) * cfrac, by + 2);
  ctx.lineTo(bx + 6 + (bw - 12) * cfrac, by + bh + 2);
  ctx.stroke();
  ctx.fillStyle = "#fff";
  ctx.font = "11px monospace";
  ctx.fillText("click +/− to change temperature", bx + 6, by + bh + 16);

  const { minusX, plusX, y } = buttonRects();
  drawButton(ctx, minusX, y, BTN, "−", hotMinus);
  drawButton(ctx, plusX, y, BTN, "+", hotPlus);
}

function tick({ ctx, dt, width, height, input }) {
  if (width !== W || height !== H) { W = width; H = height; }

  const { minusX, plusX, y: btnY } = buttonRects();
  const hotMinus =
    input.mouseDown && pointInRect(input.mouseX, input.mouseY, minusX, btnY, BTN, BTN);
  const hotPlus =
    input.mouseDown && pointInRect(input.mouseX, input.mouseY, plusX, btnY, BTN, BTN);

  for (const c of input.consumeClicks()) {
    if (pointInRect(c.x, c.y, minusX, btnY, BTN, BTN)) T -= 0.1;
    if (pointInRect(c.x, c.y, plusX, btnY, BTN, BTN)) T += 0.1;
  }
  // Hold-down accelerates the change at 0.6/s, plus the discrete step on click.
  if (hotMinus) T -= 0.6 * dt;
  if (hotPlus) T += 0.6 * dt;

  if (T < 0.2) T = 0.2;
  if (T > 6.0) T = 6.0;

  const flips = Math.min(80000, Math.max(8000, (spins.length * Math.min(dt, 0.033) * 30) | 0));
  step(flips, T);

  const m = render(ctx);
  magHist[magIdx] = m;
  magIdx = (magIdx + 1) % magHist.length;

  drawHUD(ctx, m, hotMinus, hotPlus);
}