Truchet Rewire

const TS = 36;
let tiles = [];
let cols = 0, rows = 0;
let lastFlipTime = 0;

function rebuild(width, height) {
  const c = Math.ceil(width / TS) + 1;
  const r = Math.ceil(height / TS) + 1;
  if (c === cols && r === rows && tiles.length) return;
  const old = new Map();
  for (const t of tiles) old.set(t.i + "," + t.j, t);
  cols = c; rows = r;
  const next = [];
  for (let j = 0; j < rows; j++) {
    for (let i = 0; i < cols; i++) {
      const key = i + "," + j;
      const ex = old.get(key);
      next.push(ex || { i, j, o: Math.random() < 0.5 ? 0 : 1, t: 0, flipping: false, from: 0, to: 0 });
    }
  }
  tiles = next;
}

function init({ width, height }) {
  rebuild(width, height);
}

const palettes = [
  ["#e8d6a6", "#c7a76b", "#8d6e3a"],
  ["#a6e3d6", "#6bc7b7", "#3a8d7d"],
  ["#e3a6c7", "#c76b9c", "#8d3a6e"],
  ["#a6c7e3", "#6b9cc7", "#3a6e8d"],
];
let pIdx = 0, nextP = 1, palT = 0;

function hexRGB(h) {
  return [parseInt(h.slice(1, 3), 16), parseInt(h.slice(3, 5), 16), parseInt(h.slice(5, 7), 16)];
}
function mixHex(h1, h2, t) {
  const a = hexRGB(h1), b = hexRGB(h2);
  return `rgb(${Math.round(a[0] + (b[0] - a[0]) * t)},${Math.round(a[1] + (b[1] - a[1]) * t)},${Math.round(a[2] + (b[2] - a[2]) * t)})`;
}

function drawArcs(ctx, cx, cy, s, o, alpha) {
  ctx.globalAlpha = alpha;
  ctx.lineCap = "round";
  ctx.lineWidth = Math.max(2, s * 0.18);
  ctx.beginPath();
  if (o === 0) {
    ctx.arc(cx, cy, s / 2, 0, Math.PI / 2);
    ctx.moveTo(cx + s, cy + s);
    ctx.arc(cx + s, cy + s, s / 2, Math.PI, Math.PI * 1.5);
  } else {
    ctx.arc(cx + s, cy, s / 2, Math.PI / 2, Math.PI);
    ctx.moveTo(cx, cy + s);
    ctx.arc(cx, cy + s, s / 2, -Math.PI / 2, 0);
  }
  ctx.stroke();
}

function tick({ ctx, dt, time, width, height, input }) {
  rebuild(width, height);

  palT += dt / 15;
  if (palT >= 1) { palT = 0; pIdx = nextP; nextP = (nextP + 1) % palettes.length; }

  if (time - lastFlipTime > 0.08) {
    lastFlipTime = time;
    const tt = tiles[(Math.random() * tiles.length) | 0];
    if (tt && !tt.flipping) { tt.flipping = true; tt.from = tt.o; tt.to = 1 - tt.o; tt.t = 0; }
  }

  for (const c of input.consumeClicks()) {
    const i = Math.floor((c.x + TS / 2) / TS);
    const j = Math.floor((c.y + TS / 2) / TS);
    const idx = j * cols + i;
    if (idx >= 0 && idx < tiles.length) {
      const tt = tiles[idx];
      if (!tt.flipping) { tt.flipping = true; tt.from = tt.o; tt.to = 1 - tt.o; tt.t = 0; }
    }
  }

  const A = palettes[pIdx], B = palettes[nextP];
  const baseCol = mixHex(A[0], B[0], palT);
  const altCol = mixHex(A[1], B[1], palT);
  const accent = mixHex(A[2], B[2], palT);

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

  for (let k = 0; k < tiles.length; k++) {
    const t = tiles[k];
    const px = t.i * TS - TS / 2, py = t.j * TS - TS / 2;
    if (t.flipping) {
      t.t += dt / 0.22;
      if (t.t >= 1) { t.t = 1; t.o = t.to; t.flipping = false; }
      const a = 1 - t.t, b = t.t;
      ctx.strokeStyle = baseCol;
      drawArcs(ctx, px, py, TS, t.from, a);
      ctx.strokeStyle = altCol;
      drawArcs(ctx, px, py, TS, t.to, b);
    } else {
      ctx.strokeStyle = ((t.i + t.j) & 1) ? baseCol : altCol;
      drawArcs(ctx, px, py, TS, t.o, 1);
    }
  }

  ctx.strokeStyle = accent;
  ctx.lineWidth = 1;
  for (let k = 0; k < tiles.length; k += 17) {
    const t = tiles[k];
    const px = t.i * TS - TS / 2, py = t.j * TS - TS / 2;
    drawArcs(ctx, px, py, TS, t.o, 0.4);
  }
  ctx.globalAlpha = 1;
}