// --------------------------------------------------------------------------- // Turning Truchet — sample code. // // The field is a grid of classic quarter-circle Truchet tiles. Each tile has // an angle that is always a multiple of 90 degrees; a tile "turns" by // animating +90 degrees, which swaps its two possible arc patterns. A few // tiles are always mid-turn, so the pipe maze keeps rerouting itself. // --------------------------------------------------------------------------- const PALETTES = [ { name: 'sumi', bg: '#0A0A0F', ink: '#F4ECD8' }, { name: 'washi', bg: '#F2EFE6', ink: '#1A1F1A' }, { name: 'abyss', bg: '#05060E', ink: '#8DFBFF' }, { name: 'ember', bg: '#100806', ink: '#FF9A5C' }, { name: 'moss', bg: '#0B100B', ink: '#A9D9A0' }, { name: 'sakura', bg: '#140A0F', ink: '#F5B8CC' }, { name: 'signal', bg: '#030905', ink: '#5CE88A' }, ]; const CONFIG = { grid: { targetShortTiles: 18, // tiles across the short axis minTilePx: 24, }, stroke: { outer: 0.36, // arc stroke width (fraction of tile size) inner: 0.13, // engraved center line, drawn in bg color }, flip: { perTilePerSec: 0.05, // average turn frequency of a single tile durationSec: 0.7, // how long one 90-degree turn takes maxConcurrent: 0.12, // cap: fraction of tiles turning at once }, }; // Ease for the turn animation (smooth in/out with a little overshoot-free snap). function ease(t) { return t * t * (3 - 2 * t); } // --------------------------------------------------------------------------- // Setup // --------------------------------------------------------------------------- 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 = 0; 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 targetShortTiles = (() => { const n = parseInt(url.get('cells'), 10); return (Number.isFinite(n) && n >= 8 && n <= 64) ? n : CONFIG.grid.targetShortTiles; })(); const speed = (() => { const n = parseFloat(url.get('speed')); return (Number.isFinite(n) && n >= 0.2 && n <= 5) ? n : 1; })(); let palette = PALETTES[paletteIdx]; let labelTimer = 0; function setPalette(i) { paletteIdx = ((i % PALETTES.length) + PALETTES.length) % PALETTES.length; palette = PALETTES[paletteIdx]; 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); } // --------------------------------------------------------------------------- // Grid // angle : resting angle in quarter-turns (0..3) // turnT : -1 when resting, otherwise 0..1 animation progress // --------------------------------------------------------------------------- let cols = 0, rows = 0, tilePx = 0; let offX = 0, offY = 0; // center the grid; edge tiles overflow evenly let angle = null, turnT = null; function rebuildGrid() { const shortPx = Math.min(canvas.width, canvas.height); tilePx = Math.max(CONFIG.grid.minTilePx, Math.floor(shortPx / targetShortTiles)); cols = Math.ceil(canvas.width / tilePx) + 1; rows = Math.ceil(canvas.height / tilePx) + 1; offX = Math.floor((canvas.width - cols * tilePx) / 2); offY = Math.floor((canvas.height - rows * tilePx) / 2); angle = new Uint8Array(cols * rows); turnT = new Float32Array(cols * rows).fill(-1); for (let i = 0; i < angle.length; i++) angle[i] = (Math.random() * 4) | 0; } function shuffle() { for (let i = 0; i < angle.length; i++) { angle[i] = (Math.random() * 4) | 0; turnT[i] = -1; } } // --------------------------------------------------------------------------- // Render // --------------------------------------------------------------------------- // One tile: two quarter-circle arcs joining edge midpoints, corner (0,0) and // corner (1,1), drawn in local coords with the tile center at the origin. function drawTileArcs(r, width, color) { ctx.strokeStyle = color; ctx.lineWidth = width; ctx.beginPath(); ctx.arc(-r, -r, r, 0, Math.PI / 2); // top-left corner arc ctx.moveTo(0, r); // jump to the next arc's start ctx.arc(r, r, r, Math.PI, Math.PI * 1.5); // bottom-right corner arc ctx.stroke(); } function render() { ctx.fillStyle = palette.bg; ctx.fillRect(0, 0, canvas.width, canvas.height); const r = tilePx / 2; const outerW = tilePx * CONFIG.stroke.outer; const innerW = tilePx * CONFIG.stroke.inner; ctx.lineCap = 'butt'; for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { const i = y * cols + x; const t = turnT[i]; const a = (angle[i] + (t >= 0 ? ease(t) : 0)) * (Math.PI / 2); ctx.save(); ctx.translate(offX + x * tilePx + r, offY + y * tilePx + r); ctx.rotate(a); // Pipe look: a wide ink stroke with a thin engraved bg line inside. drawTileArcs(r, outerW, palette.ink); drawTileArcs(r, innerW, palette.bg); ctx.restore(); } } } // --------------------------------------------------------------------------- // Loop (immediate first paint + size poll + watchdog, same pattern as the // other pieces so it survives embeds that suspend requestAnimationFrame) // --------------------------------------------------------------------------- function handleResize() { const dpr = Math.min(window.devicePixelRatio || 1, 2); const cssW = window.innerWidth, cssH = window.innerHeight; 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'; rebuildGrid(); render(); } let lastNow = performance.now(); let sizeCheckAccum = 0; function tick(now) { const dt = Math.min(0.2, (now - lastNow) / 1000); lastNow = now; sizeCheckAccum += dt; if (sizeCheckAccum >= 1) { 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(); } } // Advance running turns. let turning = 0; const step = dt / CONFIG.flip.durationSec; for (let i = 0; i < turnT.length; i++) { if (turnT[i] < 0) continue; turnT[i] += step; if (turnT[i] >= 1) { angle[i] = (angle[i] + 1) & 3; turnT[i] = -1; } else { turning++; } } // Start new turns: Poisson-ish spawning, capped so the field never churns. const maxTurning = Math.max(1, (turnT.length * CONFIG.flip.maxConcurrent) | 0); const expected = turnT.length * CONFIG.flip.perTilePerSec * speed * dt; let n = Math.floor(expected) + (Math.random() < expected % 1 ? 1 : 0); n = Math.min(n, Math.max(0, maxTurning - turning)); for (let k = 0, guard = 0; k < n && guard < 60; guard++) { const i = (Math.random() * turnT.length) | 0; if (turnT[i] < 0) { turnT[i] = 0; k++; } } render(); } function loop(now) { requestAnimationFrame(loop); tick(now); } setInterval(() => { const now = performance.now(); if (now - lastNow > 600) tick(now); }, 400); // --------------------------------------------------------------------------- // Interaction // --------------------------------------------------------------------------- canvas.addEventListener('pointerup', () => setPalette(paletteIdx + 1)); 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 === 'r') { shuffle(); } }); window.addEventListener('resize', handleResize); // --------------------------------------------------------------------------- document.body.style.background = palette.bg; handleResize(); requestAnimationFrame(loop); setTimeout(() => { hintEl.style.opacity = '0'; }, 6000); // Debug hooks. window.__truchet = { setPalette, shuffle, get palette() { return palette.name; }, get grid() { return { cols, rows, tilePx }; }, render, tick: (ms) => tick(performance.now()), };

AI GENERATED DEMO: Truchet Tiles