// --------------------------------------------------------------------------- // Palettes — bg, young (just born), mid, old (long-lived), trail (afterimage // of a dead cell), flash (stamp moment). // --------------------------------------------------------------------------- const PALETTES = [ { name: 'sumi', bg: '#0A0A0F', young: '#F4ECD8', mid: '#B0A47A', old: '#3C3A30', trail: '#6B6350', flash: '#FFFFFF' }, { name: 'washi', bg: '#F2EFE6', young: '#1A1F1A', mid: '#5E665C', old: '#C4C0B2', trail: '#9AA093', flash: '#000000' }, { name: 'abyss', bg: '#05060E', young: '#8DFBFF', mid: '#4B5BD8', old: '#1B1F4A', trail: '#37307A', flash: '#C8F4FF' }, { name: 'ember', bg: '#100806', young: '#FFE8B0', mid: '#FF7A3C', old: '#6E1E10', trail: '#8A3A1C', flash: '#FFF3D0' }, { name: 'moss', bg: '#0B100B', young: '#D8F0C8', mid: '#5FA05A', old: '#22381F', trail: '#3A5C36', flash: '#EFFFE0' }, { name: 'sakura', bg: '#140A0F', young: '#FFE3EC', mid: '#E888A8', old: '#5C2B3C', trail: '#8A4A5E', flash: '#FFF0F5' }, { name: 'signal', bg: '#030905', young: '#C8FFD8', mid: '#34D06A', old: '#0E3A1E', trail: '#1E6B38', flash: '#E8FFF0' }, ]; const CONFIG = { grid: { targetShortCells: 120, minCellPx: 4 }, ca: { // Conway B3/S23 on a torus. birth: [0,0,0,1,0,0,0,0,0], survive: [0,0,1,1,0,0,0,0,0], gensPerSec: 9, maxStepsPerFrame: 3, }, seed: { initialDensity: 0.14, // random soup at start / resize // Ambient rain: small random soup blobs dropped periodically so remote // corners of the field never die out completely. rainEveryMs: 1600, rainRadius: 5, rainDensity: 0.42, }, stamp: { intervalSec: 1, // re-stamp the clock every second minScale: 1, maxScale: 8, // The clock may occupy at most this fraction of the canvas per axis. // Keeps breathing room around the digits — noticeable on wide 16:9 // tiles (signage walls) where the clock used to run edge to edge. maxWidthFrac: 0.75, maxHeightFrac: 0.75, clearPadCells: 3, // dead margin carved around fresh digits edgeNoise: 0.1, flashStrength: 0.4, flashDecaySec: 0.7, }, ghost: { opacity: 0.07 }, age: { youngGens: 5, oldGens: 70 }, trail: { start: 220, decayPerGen: 14, maxAlpha: 0.45 }, clockFormat24h: true, }; // --------------------------------------------------------------------------- // 5x7 LED glyphs // --------------------------------------------------------------------------- const GW = 5, GH = 7; const GLYPHS = { '0': [' ### ','# #','# #','# #','# #','# #',' ### '], '1': [' # ',' ## ',' # ',' # ',' # ',' # ',' ### '], '2': [' ### ','# #',' #',' # ',' # ',' # ','#####'], '3': [' ### ','# #',' #',' ## ',' #','# #',' ### '], '4': [' # ',' ## ',' # # ','# # ','#####',' # ',' # '], '5': ['#####','# ','#### ',' #',' #','# #',' ### '], '6': [' ### ','# ','# ','#### ','# #','# #',' ### '], '7': ['#####',' #',' # ',' # ',' # ',' # ',' # '], '8': [' ### ','# #','# #',' ### ','# #','# #',' ### '], '9': [' ### ','# #','# #',' ####',' #',' #',' ### '], ':': [' ',' ',' # ',' ',' # ',' ',' '], }; function measureText(text) { return { w: text.length * GW + (text.length - 1), h: GH }; } function pickScale(text, cols, rows, minScale, maxScale, maxWFrac, maxHFrac) { const m = measureText(text); for (let s = maxScale; s >= minScale; s--) { if (m.w * s <= cols * maxWFrac && m.h * s <= rows * maxHFrac) return s; } return minScale; } function forEachTextCell(text, cx, cy, scale, cb) { const m = measureText(text); const w = m.w * scale, h = m.h * scale; const ox = Math.round(cx - w / 2), oy = Math.round(cy - h / 2); let charX = 0; for (const ch of text) { const glyph = GLYPHS[ch]; if (glyph) { for (let gy = 0; gy < GH; gy++) { const row = glyph[gy]; for (let gx = 0; gx < GW; gx++) { if (row.charCodeAt(gx) !== 35) continue; const bx = ox + (charX + gx) * scale, by = oy + gy * scale; for (let dy = 0; dy < scale; dy++) for (let dx = 0; dx < scale; dx++) cb(bx + dx, by + dy); } } } charX += GW + 1; } return { ox, oy, w, h }; } // --------------------------------------------------------------------------- // Grid — toroidal Game of Life with age + decay-trail buffers. // --------------------------------------------------------------------------- function createGrid(cols, rows) { return { cols, rows, live: new Uint8Array(cols * rows), next: new Uint8Array(cols * rows), age: new Uint16Array(cols * rows), trail: new Uint8Array(cols * rows), generation: 0, }; } function setCell(g, x, y, state) { // Wrap into the torus. const wx = ((x % g.cols) + g.cols) % g.cols; const wy = ((y % g.rows) + g.rows) % g.rows; const i = wy * g.cols + wx; if (state) { g.live[i] = 1; g.age[i] = 0; } else { if (g.live[i]) g.trail[i] = CONFIG.trail.start; g.live[i] = 0; g.age[i] = 0; } } function step(g, birth, survive) { const { cols, rows, live, next, age, trail } = g; const decay = CONFIG.trail.decayPerGen; for (let y = 0; y < rows; y++) { const up = ((y - 1 + rows) % rows) * cols; const dn = ((y + 1) % rows) * cols; const row = y * cols; for (let x = 0; x < cols; x++) { const xl = (x - 1 + cols) % cols; const xr = (x + 1) % cols; const n = live[up + xl] + live[up + x] + live[up + xr] + live[row + xl] + live[row + xr] + live[dn + xl] + live[dn + x] + live[dn + xr]; const i = row + x; next[i] = live[i] ? survive[n] : birth[n]; } } for (let i = 0; i < live.length; i++) { const was = live[i], now = next[i]; live[i] = now; if (now) { age[i] = was ? Math.min(65535, age[i] + 1) : 0; } else { if (was) trail[i] = CONFIG.trail.start; // just died → afterimage else if (trail[i] > 0) trail[i] = trail[i] > decay ? trail[i] - decay : 0; age[i] = 0; } } g.generation++; } function seedSoup(g, cx, cy, radius, density) { for (let dy = -radius; dy <= radius; dy++) for (let dx = -radius; dx <= radius; dx++) if (dx * dx + dy * dy <= radius * radius && Math.random() < density) setCell(g, cx + dx, cy + dy, 1); } // --------------------------------------------------------------------------- // Color helpers // --------------------------------------------------------------------------- function parseHex(hex) { const h = hex.replace('#', ''); return [parseInt(h.slice(0,2),16), parseInt(h.slice(2,4),16), parseInt(h.slice(4,6),16)]; } function mix(a, b, t) { return [ 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 rgba(c, a) { return `rgba(${c[0]},${c[1]},${c[2]},${a})`; } // 64-entry age LUT (young → mid → old) + 16-entry trail alpha LUT. function buildLUTs(p) { const young = parseHex(p.young), mid = parseHex(p.mid), old = parseHex(p.old); const ageLUT = new Array(64); for (let i = 0; i < 64; i++) { const t = i / 63; const c = t < 0.5 ? mix(young, mid, t / 0.5) : mix(mid, old, (t - 0.5) / 0.5); ageLUT[i] = rgba(c, 1); } const trailC = parseHex(p.trail); const trailLUT = new Array(16); for (let i = 0; i < 16; i++) { trailLUT[i] = rgba(trailC, (i / 15) * CONFIG.trail.maxAlpha); } return { ageLUT, trailLUT }; } // --------------------------------------------------------------------------- // Main // --------------------------------------------------------------------------- const canvas = document.getElementById('stage'); const ctx = canvas.getContext('2d'); const labelEl = document.getElementById('label'); const hintEl = document.getElementById('hint'); const url = new URLSearchParams(location.search); let paletteIdx = Math.max(0, PALETTES.findIndex(p => p.name === 'washi')); if (url.has('palette')) { const v = url.get('palette'); const byName = PALETTES.findIndex(p => p.name === v); const byNum = parseInt(v, 10); if (byName >= 0) paletteIdx = byName; else if (Number.isFinite(byNum)) paletteIdx = ((byNum % PALETTES.length) + PALETTES.length) % PALETTES.length; } const targetShortCells = (() => { const n = parseInt(url.get('cells'), 10); return (Number.isFinite(n) && n >= 60 && n <= 300) ? n : CONFIG.grid.targetShortCells; })(); const intervalSec = (() => { const n = parseInt(url.get('intervalSec'), 10); return (Number.isFinite(n) && n >= 1 && n <= 60 && 60 % n === 0) ? n : CONFIG.stamp.intervalSec; })(); let ghostOpacity = (() => { const n = parseFloat(url.get('ghost')); return (Number.isFinite(n) && n >= 0 && n <= 1) ? n : CONFIG.ghost.opacity; })(); let palette = PALETTES[paletteIdx]; let luts = buildLUTs(palette); let labelTimer = 0; function setPalette(i) { paletteIdx = ((i % PALETTES.length) + PALETTES.length) % PALETTES.length; palette = PALETTES[paletteIdx]; luts = buildLUTs(palette); document.body.style.background = palette.bg; labelEl.textContent = `${paletteIdx + 1}/${PALETTES.length} ${palette.name}`; labelEl.style.opacity = '1'; clearTimeout(labelTimer); labelTimer = setTimeout(() => { labelEl.style.opacity = '0'; }, 1600); } let grid = null; let cellPx = 8; let stampScale = 2; let ghostCells = []; let flash = 0; function formatTime() { const d = new Date(); let h = d.getHours(); if (!CONFIG.clockFormat24h) { h = h % 12; if (h === 0) h = 12; } const p = (n) => String(n).padStart(2, '0'); return `${p(h)}:${p(d.getMinutes())}:${p(d.getSeconds())}`; } // Stamp HH:MM into the LIVE field: carve a small dead margin so the digits // are readable for a moment, then let the ecosystem take them back. let lastStampedMinute = ''; function stampNow() { if (!grid) return; const text = formatTime(); const cx = grid.cols >> 1, cy = grid.rows >> 1; const m = measureText(text); const w = m.w * stampScale, h = m.h * stampScale; const ox = Math.round(cx - w / 2), oy = Math.round(cy - h / 2); // Breathing room proportional to digit size, so small stamps aren't // swallowed by the surrounding soup within a couple of generations. const pad = CONFIG.stamp.clearPadCells + stampScale; for (let y = oy - pad; y < oy + h + pad; y++) for (let x = ox - pad; x < ox + w + pad; x++) setCell(grid, x, y, 0); const list = []; forEachTextCell(text, cx, cy, stampScale, (x, y) => { setCell(grid, x, y, 1); list.push(x, y); }); ghostCells = list; // Chaos seeds along the stamp border so the digits start reacting. const tries = Math.floor((w + h) * 2 * CONFIG.stamp.edgeNoise); for (let i = 0; i < tries; i++) { const onTop = Math.random() < 0.5, onLeft = Math.random() < 0.5; const x = onTop ? ox + Math.floor(Math.random() * w) : (onLeft ? ox - 1 : ox + w); const y = onTop ? (onLeft ? oy - 1 : oy + h) : oy + Math.floor(Math.random() * h); setCell(grid, x, y, 1); } // With per-second stamping a full-screen flash every second would strobe — // only flash when the minute rolls over. const minuteText = text.slice(0, 5); if (minuteText !== lastStampedMinute) { if (lastStampedMinute) flash = CONFIG.stamp.flashStrength; lastStampedMinute = minuteText; } } function handleResize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const cssW = window.innerWidth, cssH = window.innerHeight; // Some embeds report a 0-size viewport for the first few frames; retry // until the real size arrives. if (cssW < 2 || cssH < 2) { setTimeout(handleResize, 120); return; } canvas.width = Math.max(1, Math.floor(cssW * dpr)); canvas.height = Math.max(1, Math.floor(cssH * dpr)); canvas.style.width = cssW + 'px'; canvas.style.height = cssH + 'px'; const shortPx = Math.min(canvas.width, canvas.height); cellPx = Math.max(CONFIG.grid.minCellPx * dpr, Math.floor(shortPx / targetShortCells)); // Grid covers the WHOLE canvas (last partial column/row included). const cols = Math.ceil(canvas.width / cellPx); const rows = Math.ceil(canvas.height / cellPx); const old = grid; grid = createGrid(cols, rows); if (old) { // Preserve the overlapping region so resize doesn't wipe the ecosystem, // and sow fresh soup into any newly exposed area. const cw = Math.min(cols, old.cols), rh = Math.min(rows, old.rows); for (let y = 0; y < rows; y++) for (let x = 0; x < cols; x++) { const ni = y * cols + x; if (x < cw && y < rh) { const oi = y * old.cols + x; grid.live[ni] = old.live[oi]; grid.age[ni] = old.age[oi]; grid.trail[ni] = old.trail[oi]; } else { grid.live[ni] = Math.random() < CONFIG.seed.initialDensity ? 1 : 0; } } } else { // First run: random soup everywhere. for (let i = 0; i < grid.live.length; i++) grid.live[i] = Math.random() < CONFIG.seed.initialDensity ? 1 : 0; } stampScale = pickScale('00:00:00', cols, rows, CONFIG.stamp.minScale, CONFIG.stamp.maxScale, CONFIG.stamp.maxWidthFrac, CONFIG.stamp.maxHeightFrac); stampNow(); // Paint immediately — don't wait for the animation loop, which some // embeds suspend (throttled rAF, hidden tabs, preview panels). render(); } // --------------------------------------------------------------------------- // Render // --------------------------------------------------------------------------- function render() { const { cols, rows, live, age, trail } = grid; ctx.fillStyle = palette.bg; ctx.fillRect(0, 0, canvas.width, canvas.height); // Ghost watermark under everything. if (ghostOpacity > 0 && ghostCells.length) { ctx.fillStyle = palette.young; ctx.globalAlpha = ghostOpacity; for (let i = 0; i < ghostCells.length; i += 2) ctx.fillRect(ghostCells[i] * cellPx, ghostCells[i+1] * cellPx, cellPx, cellPx); ctx.globalAlpha = 1; } // Decay trails (dead cells' afterimages), bucketed by alpha. const trailBuckets = new Array(16).fill(null); // Live cells bucketed by age color. const ageBuckets = new Array(64).fill(null); const { youngGens, oldGens } = CONFIG.age; for (let y = 0; y < rows; y++) { const rowOff = y * cols; const py = y * cellPx; for (let x = 0; x < cols; x++) { const i = rowOff + x; if (live[i]) { const a = age[i]; let t; if (a <= youngGens) t = 0; else if (a >= oldGens) t = 1; else t = (a - youngGens) / (oldGens - youngGens); const b = Math.min(63, (t * 63) | 0); (ageBuckets[b] || (ageBuckets[b] = [])).push(x * cellPx, py); } else if (trail[i] > 0) { const b = Math.min(15, ((trail[i] / 255) * 15) | 0); if (b > 0) (trailBuckets[b] || (trailBuckets[b] = [])).push(x * cellPx, py); } } } for (let b = 1; b < 16; b++) { const list = trailBuckets[b]; if (!list) continue; ctx.fillStyle = luts.trailLUT[b]; for (let k = 0; k < list.length; k += 2) ctx.fillRect(list[k], list[k+1], cellPx, cellPx); } for (let b = 0; b < 64; b++) { const list = ageBuckets[b]; if (!list) continue; ctx.fillStyle = luts.ageLUT[b]; for (let k = 0; k < list.length; k += 2) ctx.fillRect(list[k], list[k+1], cellPx, cellPx); } if (flash > 0) { ctx.fillStyle = palette.flash; ctx.globalAlpha = flash * 0.5; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.globalAlpha = 1; } } // --------------------------------------------------------------------------- // Loop // --------------------------------------------------------------------------- const stepInterval = 1000 / CONFIG.ca.gensPerSec; const stampPeriodMs = intervalSec * 1000; let stepAccum = 0; let lastStampBucket = Math.floor(Date.now() / stampPeriodMs); let lastRain = performance.now(); let lastNow = performance.now(); let sizeCheckAccum = 0; function tick(now) { const dt = Math.min(200, now - lastNow); lastNow = now; // Some embeds (iframes) swallow resize events — poll the real size once a // second as a safety net. sizeCheckAccum += dt; if (sizeCheckAccum >= 1000) { sizeCheckAccum = 0; const dpr = Math.min(window.devicePixelRatio || 1, 2); if (canvas.width !== Math.max(1, Math.floor(window.innerWidth * dpr)) || canvas.height !== Math.max(1, Math.floor(window.innerHeight * dpr))) { handleResize(); } } // Grid may still be pending while handleResize waits for a real viewport. if (!grid) return; const bucket = Math.floor(Date.now() / stampPeriodMs); if (bucket !== lastStampBucket) { lastStampBucket = bucket; stampNow(); } // Ambient rain keeps far corners alive. if (now - lastRain >= CONFIG.seed.rainEveryMs) { lastRain = now; seedSoup(grid, (Math.random() * grid.cols) | 0, (Math.random() * grid.rows) | 0, CONFIG.seed.rainRadius, CONFIG.seed.rainDensity); } stepAccum += dt; let steps = 0; while (stepAccum >= stepInterval && steps < CONFIG.ca.maxStepsPerFrame) { step(grid, CONFIG.ca.birth, CONFIG.ca.survive); stepAccum -= stepInterval; steps++; } if (stepAccum > stepInterval * CONFIG.ca.maxStepsPerFrame) stepAccum = 0; if (flash > 0) flash = Math.max(0, flash - dt / (CONFIG.stamp.flashDecaySec * 1000)); render(); } function loop(now) { requestAnimationFrame(loop); tick(now); } // Watchdog: some embeds throttle or suspend requestAnimationFrame entirely. // If no frame has run recently, drive the simulation from a timer instead // (setInterval survives in most of those environments, albeit throttled). setInterval(() => { const now = performance.now(); if (now - lastNow > 600) tick(now); }, 400); // --------------------------------------------------------------------------- // Interaction // --------------------------------------------------------------------------- let pointerDown = false, pointerMoved = false, downX = 0, downY = 0; function seedAtPointer(e) { const rect = canvas.getBoundingClientRect(); const sx = canvas.width / rect.width, sy = canvas.height / rect.height; const gx = ((e.clientX - rect.left) * sx / cellPx) | 0; const gy = ((e.clientY - rect.top) * sy / cellPx) | 0; seedSoup(grid, gx, gy, 3, 0.5); } canvas.addEventListener('pointerdown', (e) => { pointerDown = true; pointerMoved = false; downX = e.clientX; downY = e.clientY; canvas.setPointerCapture(e.pointerId); }); canvas.addEventListener('pointermove', (e) => { if (!pointerDown) return; if (Math.hypot(e.clientX - downX, e.clientY - downY) > 6) pointerMoved = true; if (pointerMoved) seedAtPointer(e); }); canvas.addEventListener('pointerup', (e) => { if (pointerDown && !pointerMoved) setPalette(paletteIdx + 1); pointerDown = false; }); window.addEventListener('keydown', (e) => { if (e.key >= '1' && e.key <= String(PALETTES.length)) { setPalette(parseInt(e.key, 10) - 1); } else if (e.key === ' ') { e.preventDefault(); setPalette(paletteIdx + 1); } else if (e.key === 'g') { ghostOpacity = ghostOpacity > 0 ? 0 : CONFIG.ghost.opacity; } }); window.addEventListener('resize', handleResize); // --------------------------------------------------------------------------- document.body.style.background = palette.bg; handleResize(); requestAnimationFrame(loop); setTimeout(() => { hintEl.style.opacity = '0'; }, 6000); // Debug hooks (harmless in production, handy while tuning). window.__ca = { setPalette, get palette() { return palette.name; }, get grid() { return grid; }, stampNow, step: () => step(grid, CONFIG.ca.birth, CONFIG.ca.survive), render, };

AI GENERATED DEMO: Clock with Cellular Automaton