Penrose Tiling (P3)

// Penrose P3 tiling via Robinson-triangle (half-rhomb) substitution.
// Each rhomb is represented as a pair of mirrored half-triangles sharing the
// short diagonal (fat) or long diagonal (thin). We substitute half-triangles
// and render them colored by their parent rhomb kind.
//
// Half-triangle kinds:
//   0 = "fat half"  (a half of a 72/108 rhomb)  apex angle at A = 36 deg
//   1 = "thin half" (a half of a 36/144 rhomb)  apex angle at A = 108 deg
//
// Standard golden-gnomon substitution (de Bruijn):
//   fat(A,B,C):   P = A + (B-A)/PHI
//                 -> fat(C, P, B), thin(P, C, A)
//   thin(A,B,C):  Q = B + (A-B)/PHI
//                 -> thin(Q, C, A), fat(C, Q, B)
//
// Starting from the "sun": 10 fat half-triangles around the center, with
// alternating chirality so that adjacent pairs share an edge and visually
// form 5 fat rhombs meeting at the central vertex.

let W, H, tris, gen, accum, lastStep;
const PHI = (1 + Math.sqrt(5)) / 2;
const INV = 1 / PHI;
const MAX_GEN = 5;
const STEP = 0.95;       // seconds between inflations
const HOLD = 3.2;        // seconds to hold the final tiling
const COL_FAT  = "#e9a24b";
const COL_FAT_E = "#7a4a14";
const COL_THIN = "#3e7fc8";
const COL_THIN_E = "#163763";
const BG = "#0b0d18";

function v(x, y) { return { x, y }; }
function add(a, b) { return { x: a.x + b.x, y: a.y + b.y }; }
function sub(a, b) { return { x: a.x - b.x, y: a.y - b.y }; }
function mix(a, b, t) { return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t }; }

function sunStart() {
  // 10 fat half-triangles around the center. The apex (angle 36 deg) is at
  // the center; B and C are on a circle of radius R; alternating chirality
  // makes neighboring halves pair into 5 fat rhombs around the center.
  const C0 = v(W * 0.5, H * 0.5);
  const R = Math.min(W, H) * 0.46;
  const out = [];
  for (let i = 0; i < 10; i++) {
    const a0 = (i       * Math.PI * 2) / 10 - Math.PI / 2;
    const a1 = ((i + 1) * Math.PI * 2) / 10 - Math.PI / 2;
    const P0 = add(C0, v(Math.cos(a0) * R, Math.sin(a0) * R));
    const P1 = add(C0, v(Math.cos(a1) * R, Math.sin(a1) * R));
    // Alternate chirality so each adjacent pair fuses into a fat rhomb.
    if (i & 1) out.push({ k: 0, A: C0, B: P0, C: P1 });
    else       out.push({ k: 0, A: C0, B: P1, C: P0 });
  }
  tris = out;
  gen = 0;
}

function inflate() {
  const next = [];
  for (let i = 0; i < tris.length; i++) {
    const t = tris[i];
    const A = t.A, B = t.B, C = t.C;
    if (t.k === 0) {
      // Fat half: P on segment AB at distance |AB|/PHI from A.
      const P = mix(A, B, INV);
      next.push({ k: 0, A: C, B: P, C: B });
      next.push({ k: 1, A: P, B: C, C: A });
    } else {
      // Thin half: Q on segment BA at distance |BA|/PHI from B.
      const Q = mix(B, A, INV);
      next.push({ k: 1, A: Q, B: C, C: A });
      next.push({ k: 0, A: C, B: Q, C: B });
    }
  }
  tris = next;
  gen++;
}

function drawTris(ctx) {
  // Pass 1: fills (fats first so thin edges read clearly atop).
  // We draw the half-triangles directly; siblings sharing an edge fuse
  // visually into a full rhomb because both halves share fill color.
  // Sort by kind so all fats render before any thins.
  let nFat = 0;
  for (let i = 0; i < tris.length; i++) if (tris[i].k === 0) nFat++;
  // Draw fats, then thins.
  for (let pass = 0; pass < 2; pass++) {
    const k = pass; // 0 = fat, 1 = thin
    ctx.fillStyle = k === 0 ? COL_FAT : COL_THIN;
    ctx.beginPath();
    for (let i = 0; i < tris.length; i++) {
      const t = tris[i];
      if (t.k !== k) continue;
      ctx.moveTo(t.A.x, t.A.y);
      ctx.lineTo(t.B.x, t.B.y);
      ctx.lineTo(t.C.x, t.C.y);
      ctx.closePath();
    }
    ctx.fill();
  }
  // Pass 2: draw only the rhomb perimeter (the two "outer" legs A-B and A-C
  // of each half-triangle). Skipping the B-C edge means siblings glue
  // seamlessly and we see only the rhomb outlines, not the diagonals.
  ctx.lineWidth = gen >= 4 ? 0.55 : (gen >= 2 ? 0.85 : 1.3);
  ctx.lineCap = "round";
  for (let pass = 0; pass < 2; pass++) {
    const k = pass;
    ctx.strokeStyle = k === 0 ? COL_FAT_E : COL_THIN_E;
    ctx.beginPath();
    for (let i = 0; i < tris.length; i++) {
      const t = tris[i];
      if (t.k !== k) continue;
      ctx.moveTo(t.B.x, t.B.y);
      ctx.lineTo(t.A.x, t.A.y);
      ctx.lineTo(t.C.x, t.C.y);
    }
    ctx.stroke();
  }
}

function drawHUD(ctx) {
  // Each rhomb is 2 halves of the same kind, so counts/2 give rhomb counts.
  let nFat = 0, nThin = 0;
  for (let i = 0; i < tris.length; i++) {
    if (tris[i].k === 0) nFat++; else nThin++;
  }
  const fatRhombs = nFat >> 1;
  const thinRhombs = nThin >> 1;
  const total = fatRhombs + thinRhombs;
  // The ratio of fat-rhomb count to thin-rhomb count tends to PHI.
  const ratio = thinRhombs > 0 ? (fatRhombs / thinRhombs).toFixed(3) : "—";
  ctx.fillStyle = "rgba(0,0,0,0.62)";
  ctx.fillRect(10, 10, 250, 84);
  ctx.fillStyle = "#fff";
  ctx.font = "13px ui-monospace, monospace";
  ctx.fillText("inflation: " + gen + " / " + MAX_GEN, 18, 30);
  ctx.fillText("rhombs: " + total + "  (fat " + fatRhombs + ", thin " + thinRhombs + ")", 18, 50);
  ctx.fillText("fat/thin → φ ≈ 1.618", 18, 70);
  ctx.fillText("observed: " + ratio, 18, 88);
}

function init({ width, height }) {
  W = width; H = height;
  accum = 0;
  lastStep = 0;
  sunStart();
}

function tick({ ctx, dt, width, height }) {
  if (width !== W || height !== H) {
    W = width; H = height;
    sunStart();
    accum = 0;
    lastStep = 0;
  }
  accum += dt || 0.016;
  if (gen < MAX_GEN && accum - lastStep > STEP) {
    inflate();
    lastStep = accum;
  } else if (gen >= MAX_GEN && accum - lastStep > HOLD) {
    sunStart();
    accum = 0;
    lastStep = 0;
  }
  ctx.fillStyle = BG;
  ctx.fillRect(0, 0, W, H);
  drawTris(ctx);
  drawHUD(ctx);
}