CGL background works!

build.el

@@ -24,7 +24,7 @@
          :publishing-function org-html-publish-to-html
          :html-head-include-default-style nil
          :html-head-include-scripts nil
-         :html-head "<link rel=\"stylesheet\" href=\"/style.css\">"
+         :html-head "<link rel=\"stylesheet\" href=\"/style.css\"><script src=\"/animation.js\" defer></script>"
          :html-preamble ,site-nav
          :html-postamble nil
          :with-author nil

static/animation.js

@@ -0,0 +1,205 @@
+// Conway's Game of Life background animation
+// 100×100 toroidal grid, 1cm cells with 0.1cm gaps, tiled to fill the viewport.
+// State persists in a cookie until midnight; cells fade in/out on state change.
+
+const COOKIE_STATE = 'cgol_state';
+const ROWS = 100;
+const COLS = 100;
+const CELL_CM    = 1.0;   // cell size in cm
+const PAD_CM     = 0.1;   // gap between cells in cm
+const FADE_SPEED = 4.0;   // opacity units/sec → full transition in 0.25s
+const STEP_MS    = 1000;  // game step interval in ms
+const CELL_ALPHA = 0.03;  // max cell opacity (keeps it a subtle background)
+
+let canvas, ctx;
+let cmPx      = 38;        // pixels per cm, measured at setup
+let cellColor = '#2f4f4f';
+let board     = null;      // Uint8Array ROWS*COLS — 0=dead, 1=alive
+let opacity   = null;      // Float32Array ROWS*COLS — current fade value [0,1]
+let animFrame    = null;
+let lastStepTime  = 0;
+let lastFrameTime = 0;
+
+// ── Board helpers ──────────────────────────────────────────────────────────
+
+function idx(r, c) { return r * COLS + c; }
+
+function randomBoard() {
+    const b = new Uint8Array(ROWS * COLS);
+    for (let i = 0; i < b.length; i++) b[i] = Math.random() < 0.3 ? 1 : 0;
+    return b;
+}
+
+function stepConway(b) {
+    const next = new Uint8Array(ROWS * COLS);
+    for (let r = 0; r < ROWS; r++) {
+        for (let c = 0; c < COLS; c++) {
+            let n = 0;
+            for (let dr = -1; dr <= 1; dr++) {
+                for (let dc = -1; dc <= 1; dc++) {
+                    if (dr === 0 && dc === 0) continue;
+                    n += b[idx((r + dr + ROWS) % ROWS, (c + dc + COLS) % COLS)];
+                }
+            }
+            const alive = b[idx(r, c)];
+            next[idx(r, c)] = alive
+                ? (n === 2 || n === 3 ? 1 : 0)
+                : (n === 3 ? 1 : 0);
+        }
+    }
+    return next;
+}
+
+// ── Serialisation (bit-packed → base64url, ~1667 chars for 100×100) ────────
+
+function serializeBoard(b) {
+    const bytes = new Uint8Array(Math.ceil(ROWS * COLS / 8));
+    for (let i = 0; i < ROWS * COLS; i++) {
+        if (b[i]) bytes[i >> 3] |= 1 << (i & 7);
+    }
+    let s = '';
+    for (const byte of bytes) s += String.fromCharCode(byte);
+    return btoa(s).replace(/\+/g, '-').replace(/\//g, '_');
+}
+
+function deserializeBoard(b64) {
+    const s = atob(b64.replace(/-/g, '+').replace(/_/g, '/'));
+    const b = new Uint8Array(ROWS * COLS);
+    for (let i = 0; i < ROWS * COLS; i++) {
+        b[i] = (s.charCodeAt(i >> 3) >> (i & 7)) & 1;
+    }
+    return b;
+}
+
+// ── Cookie (expires at midnight tonight) ──────────────────────────────────
+
+function saveToCookie() {
+    if (!board) return;
+    const midnight = new Date();
+    midnight.setHours(24, 0, 0, 0);
+    const data = encodeURIComponent(serializeBoard(board));
+    document.cookie =
+        `${COOKIE_STATE}=${data};expires=${midnight.toUTCString()};path=/;SameSite=Lax`;
+}
+
+function loadFromCookie() {
+    const match = document.cookie.match(
+        new RegExp('(?:^|; )' + COOKIE_STATE + '=([^;]*)')
+    );
+    if (!match) return null;
+    try   { return deserializeBoard(decodeURIComponent(match[1])); }
+    catch { return null; }
+}
+
+// ── Setup ──────────────────────────────────────────────────────────────────
+
+function measureCmPx() {
+    const el = document.createElement('div');
+    el.style.cssText = 'position:absolute;width:1cm;height:0;visibility:hidden';
+    document.body.appendChild(el);
+    const px = el.offsetWidth || 38;
+    document.body.removeChild(el);
+    return px;
+}
+
+function setup() {
+    cmPx      = measureCmPx();
+    cellColor = getComputedStyle(document.documentElement)
+                    .getPropertyValue('--fg').trim() || '#2f4f4f';
+
+    canvas = document.createElement('canvas');
+    canvas.id = 'bg-animation';
+    document.body.prepend(canvas);
+    ctx = canvas.getContext('2d');
+
+    resize();
+    window.addEventListener('resize', resize);
+
+    board   = loadFromCookie() || randomBoard();
+    opacity = new Float32Array(ROWS * COLS);
+    // Initialise opacity to match loaded state (no fade-in on first load)
+    for (let i = 0; i < ROWS * COLS; i++) opacity[i] = board[i];
+
+    lastStepTime  = performance.now();
+    lastFrameTime = performance.now();
+    animFrame = requestAnimationFrame(frame);
+}
+
+function resize() {
+    canvas.width  = window.innerWidth;
+    canvas.height = window.innerHeight;
+}
+
+// ── Animation loop ─────────────────────────────────────────────────────────
+
+function frame(ts) {
+    const dt = Math.min((ts - lastFrameTime) / 1000, 0.1); // cap delta at 100ms
+    lastFrameTime = ts;
+
+    if (ts - lastStepTime >= STEP_MS) {
+        board = stepConway(board);
+        lastStepTime = ts;
+    }
+
+    // Nudge each cell's opacity toward its target (0 or 1)
+    const fade = FADE_SPEED * dt;
+    for (let i = 0; i < ROWS * COLS; i++) {
+        if (board[i]) {
+            if (opacity[i] < 1) opacity[i] = Math.min(1, opacity[i] + fade);
+        } else {
+            if (opacity[i] > 0) opacity[i] = Math.max(0, opacity[i] - fade);
+        }
+    }
+
+    draw();
+    animFrame = requestAnimationFrame(frame);
+}
+
+// ── Draw ───────────────────────────────────────────────────────────────────
+
+function draw() {
+    const w = canvas.width;
+    const h = canvas.height;
+    ctx.clearRect(0, 0, w, h);
+
+    const cellPx = cmPx * CELL_CM;
+    const stepPx = cmPx * (CELL_CM + PAD_CM);
+    const gridW  = COLS * stepPx;
+    const gridH  = ROWS * stepPx;
+
+    ctx.fillStyle = cellColor;
+
+    // Tile grid to fill canvas; start one full grid before origin to cover edges.
+    for (let tileY = -gridH; tileY < h; tileY += gridH) {
+        for (let tileX = -gridW; tileX < w; tileX += gridW) {
+            for (let r = 0; r < ROWS; r++) {
+                const y = tileY + r * stepPx;
+                if (y + cellPx < 0 || y > h) continue;
+                for (let c = 0; c < COLS; c++) {
+                    const op = opacity[idx(r, c)];
+                    if (op < 0.005) continue;
+                    const x = tileX + c * stepPx;
+                    if (x + cellPx < 0 || x > w) continue;
+                    ctx.globalAlpha = op * CELL_ALPHA;
+                    ctx.fillRect(x, y, cellPx, cellPx);
+                }
+            }
+        }
+    }
+    ctx.globalAlpha = 1;
+}
+
+// ── Teardown ───────────────────────────────────────────────────────────────
+
+function teardown() {
+    saveToCookie();
+    cancelAnimationFrame(animFrame);
+    window.removeEventListener('resize', resize);
+    if (canvas) canvas.remove();
+    canvas = ctx = board = opacity = null;
+}
+
+// ── Init ───────────────────────────────────────────────────────────────────
+
+document.addEventListener('DOMContentLoaded', setup);
+window.addEventListener('pagehide', teardown);

static/style.css

@@ -22,6 +22,18 @@
   }
 }
 
+/* ── Background animation canvas ────────────────────── */
+#bg-animation {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  pointer-events: none;
+  will-change: transform;
+}
+
 /* ── Reset ───────────────────────────────────────────── */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 html { font-size: 16px; -webkit-text-size-adjust: 100%; }