(() => { 'use strict'; // ---- clock layout --------------------------------------------------------- // 8 slots: H H : M M : S S const SLOTS = 8; const COLON_SLOTS = new Set([2, 5]); const ADV_DIGIT = 0.68; // advance widths in em const ADV_COLON = 0.36; const TOTAL_ADV = 6 * ADV_DIGIT + 2 * ADV_COLON; function timeChars() { const d = new Date(); const p = (n) => String(n).padStart(2, '0'); const s = p(d.getHours()) + ':' + p(d.getMinutes()) + ':' + p(d.getSeconds()); return s.split(''); } function computeLayout(w, h) { const fontSize = Math.min(h * 0.72, (w * 0.92) / TOTAL_ADV); // on very wide screens (AxCROSS full: 8.29:1) spread the digits out to // use the width, with a cap so the string still reads as one clock const leftover = w * 0.92 - TOTAL_ADV * fontSize; const gap = Math.min(Math.max(leftover, 0) / (SLOTS - 1), fontSize * 0.55); const total = TOTAL_ADV * fontSize + gap * (SLOTS - 1); let x = (w - total) / 2; const cells = []; for (let s = 0; s < SLOTS; s++) { const adv = COLON_SLOTS.has(s) ? ADV_COLON : ADV_DIGIT; cells.push({ x: x + (adv * fontSize) / 2, y: h / 2 }); x += adv * fontSize + gap; } return { fontSize, cells }; } // ---- glyph sampling ------------------------------------------------------- // Rasterize each glyph once to an offscreen 2D canvas and keep its opaque // pixels as em-relative points (glyph center = origin, 1.0 = font size). const GLYPH_SIZE = 256; const GLYPH_FONT = 168; const glyphCache = new Map(); function glyphPoints(ch) { let pts = glyphCache.get(ch); if (pts) return pts; const c = document.createElement('canvas'); c.width = c.height = GLYPH_SIZE; const g = c.getContext('2d', { willReadFrequently: true }); g.fillStyle = '#fff'; g.font = '800 ' + GLYPH_FONT + 'px "Helvetica Neue", "Arial", system-ui, sans-serif'; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillText(ch, GLYPH_SIZE / 2, GLYPH_SIZE / 2); const img = g.getImageData(0, 0, GLYPH_SIZE, GLYPH_SIZE).data; pts = []; for (let y = 0; y < GLYPH_SIZE; y += 2) { for (let x = 0; x < GLYPH_SIZE; x += 2) { if (img[(y * GLYPH_SIZE + x) * 4 + 3] > 128) { pts.push((x - GLYPH_SIZE / 2) / GLYPH_FONT, (y - GLYPH_SIZE / 2) / GLYPH_FONT); } } } if (pts.length === 0) pts.push(0, 0); glyphCache.set(ch, pts); return pts; } // `count` random points on glyph `ch`, placed at `cell`, into `out`. function fillSlotTargets(out, ch, cell, fontSize, count) { const pts = glyphPoints(ch); const n = pts.length / 2; for (let k = 0; k < count; k++) { const j = (Math.random() * n) | 0; out[k * 2] = cell.x + (pts[j * 2] + (Math.random() - 0.5) * 0.014) * fontSize; out[k * 2 + 1] = cell.y + (pts[j * 2 + 1] + (Math.random() - 0.5) * 0.014) * fontSize; } } // ---- time-of-day palette ---------------------------------------------------- // OKLCH lightness/chroma, hue bias, and sky colors keyed to the hour: // deep-night neon -> pastel dawn -> vivid day -> amber dusk -> night again const PAL_STOPS = [ [0.0, 0.68, 0.205, 0.0, [0.005, 0.006, 0.014], [0.018, 0.02, 0.042]], [5.0, 0.68, 0.205, 0.3, [0.005, 0.006, 0.014], [0.018, 0.02, 0.042]], [6.5, 0.82, 0.085, 0.9, [0.045, 0.04, 0.065], [0.1, 0.065, 0.075]], [9.0, 0.78, 0.14, 0.2, [0.02, 0.028, 0.055], [0.045, 0.055, 0.085]], [12.0, 0.76, 0.165, 0.0, [0.012, 0.016, 0.036], [0.03, 0.038, 0.068]], [16.0, 0.74, 0.17, -0.4, [0.02, 0.014, 0.038], [0.06, 0.03, 0.05]], [18.0, 0.72, 0.185, -0.9, [0.03, 0.012, 0.04], [0.09, 0.035, 0.048]], [20.5, 0.7, 0.2, -0.3, [0.008, 0.008, 0.02], [0.03, 0.024, 0.05]], [24.0, 0.68, 0.205, 0.0, [0.005, 0.006, 0.014], [0.018, 0.02, 0.042]], ]; function dayPalette(hourF) { let a = PAL_STOPS[0]; let b = PAL_STOPS[PAL_STOPS.length - 1]; for (let i = 0; i < PAL_STOPS.length - 1; i++) { if (hourF >= PAL_STOPS[i][0] && hourF <= PAL_STOPS[i + 1][0]) { a = PAL_STOPS[i]; b = PAL_STOPS[i + 1]; break; } } const f = b[0] === a[0] ? 0 : (hourF - a[0]) / (b[0] - a[0]); const lerp = (x, y) => x + (y - x) * f; return { L: lerp(a[1], b[1]), C: lerp(a[2], b[2]), bias: lerp(a[3], b[3]), bgTop: [0, 1, 2].map((i) => lerp(a[4][i], b[4][i])), bgBot: [0, 1, 2].map((i) => lerp(a[5][i], b[5][i])), }; } // ---- keys ------------------------------------------------------------------- // Space: simulation <-> artwork, M: full <-> tile (AxCROSS simulator). // 1 / 2 / 3: preview the 10s / minute / hour event without waiting for it. // Inside the simulator's viewport iframe NeortAxCross is undefined. let axMode = 'full'; window.addEventListener('keydown', (e) => { if (e.key >= '1' && e.key <= '3' && window.__clockBurst) { window.__clockBurst(+e.key); return; } const ax = window.NeortAxCross; if (!ax) return; if (e.code === 'Space') { e.preventDefault(); ax.toggle(); } else if (e.key === 'm' || e.key === 'M') { axMode = axMode === 'full' ? 'tile' : 'full'; ax.setMode(axMode); } }); // ============================================================================ // WebGPU version // ============================================================================ const PPS = 8192; // particles per slot const NUM = SLOTS * PPS; // 65,536 const WGSL = /* wgsl */ ` struct U { res: vec2f, time: f32, dt: f32, hueBase: f32, fontSize: f32, pulse: f32, fade: f32, // per-frame trail fade alpha burst0: vec4f, burst1: vec4f, amp0: vec4f, amp1: vec4f, palL: f32, // time-of-day palette: OKLCH lightness / chroma palC: f32, riverT: f32, // river of time: minute progress 0..1 glowScale: f32, // 1.0 on the main pass, lower on the trail pass bgTop: vec4f, bgBot: vec4f, }; struct P { pos: vec2f, vel: vec2f, seed: vec2f, }; @group(0) @binding(0) var u: U; // read_write view for the compute pass; read-only view for the vertex stage // (same buffer, different bind groups — never used by the same entry point) @group(0) @binding(1) var parts: array

; @group(0) @binding(1) var partsR: array

; @group(0) @binding(2) var targets: array; @group(0) @binding(3) var trailT: texture_2d; const PPS = ${PPS}u; const TAU = 6.28318530718; fn burstAt(slot: u32) -> f32 { if (slot < 4u) { return u.burst0[slot]; } return u.burst1[slot - 4u]; } // event size: 0 = ordinary second tick, 1 = 10s full swap, // 2 = minute change, 3 = hour change fn ampAt(slot: u32) -> f32 { if (slot < 4u) { return u.amp0[slot]; } return u.amp1[slot - 4u]; } // ---- value noise + curl ---- fn hash21(p: vec2f) -> f32 { var q = fract(p * vec2f(123.34, 345.45)); q += dot(q, q + 34.345); return fract(q.x * q.y); } fn vnoise(p: vec2f) -> f32 { let i = floor(p); let f = fract(p); let w = f * f * (3.0 - 2.0 * f); let a = hash21(i); let b = hash21(i + vec2f(1.0, 0.0)); let c = hash21(i + vec2f(0.0, 1.0)); let d = hash21(i + vec2f(1.0, 1.0)); return mix(mix(a, b, w.x), mix(c, d, w.x), w.y); } fn fbm(p: vec2f) -> f32 { return vnoise(p) * 0.667 + vnoise(p * 2.03 + vec2f(17.1, 9.7)) * 0.333; } fn curl(p: vec2f) -> vec2f { let e = 0.2; let dx = fbm(p + vec2f(e, 0.0)) - fbm(p - vec2f(e, 0.0)); let dy = fbm(p + vec2f(0.0, e)) - fbm(p - vec2f(0.0, e)); return vec2f(dy, -dx) * (0.5 / e); } // ---- OKLCH -> sRGB ---- fn oklchToSrgb(L: f32, C: f32, H: f32) -> vec3f { let a = C * cos(H); let b = C * sin(H); let l_ = L + 0.3963377774 * a + 0.2158037573 * b; let m_ = L - 0.1055613458 * a - 0.0638541728 * b; let s_ = L - 0.0894841775 * a - 1.2914855480 * b; let l = l_ * l_ * l_; let m = m_ * m_ * m_; let s = s_ * s_ * s_; var rgb = vec3f( 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s, -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s, -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s ); rgb = clamp(rgb, vec3f(0.0), vec3f(1.0)); // linear -> sRGB gamma let lo = rgb * 12.92; let hi = 1.055 * pow(rgb, vec3f(1.0 / 2.4)) - 0.055; return select(hi, lo, rgb <= vec3f(0.0031308)); } // ---- simulation ---- @compute @workgroup_size(64) fn cs(@builtin(global_invocation_id) gid: vec3u) { let i = gid.x; if (i >= arrayLength(&parts)) { return; } var p = parts[i]; let slot = i / PPS; let t = targets[i]; let age = max(u.time - burstAt(slot), 0.0); let pw = ampAt(slot); // ordinary ticks re-form almost instantly; big events take their time // (10s: ~1.7s, minute: ~3.2s, hour: ~5.0s — rotation slots are ~15s) let dur = 0.5 + pw * (1.05 + 0.15 * pw); // hold the chaos before the springs start winning let forming = smoothstep(dur * 0.2, dur, age); // city wind: curl-noise flow everyone rides on let flowP = p.pos * (3.2 / max(u.res.x, 1.0)) + vec2f(u.time * 0.07, p.seed.x * 7.0); let n = curl(flowP); // burst kick, scaled by event size, chaos lasting longer for bigger events let kick = n * u.fontSize * 20.0 * pw * exp(-age * 6.0 / dur); if (p.seed.x < 0.035) { // the river of time: a thin band along the floor filling left-to-right // over each minute — the second hand, spatialized across the 18m screen let f = fract(p.seed.y * 37.13); let goal = vec2f(f * u.res.x * u.riverT, u.res.y * 0.94 + n.y * u.fontSize * 0.06); let acc = (goal - p.pos) * 6.0 + n * u.fontSize * 0.8 + kick; p.vel = (p.vel + acc * u.dt) * exp(-3.0 * u.dt); p.pos += p.vel * u.dt; } else if (p.seed.x < 0.10) { // ambient city dust: no digit duty, just drift across and wrap around let acc = n * u.fontSize * 2.2 + vec2f(u.fontSize * 0.35, 0.0) + kick; p.vel = (p.vel + acc * u.dt) * exp(-1.3 * u.dt); p.pos += p.vel * u.dt; p.pos = fract(p.pos / u.res) * u.res; } else { let d = t - p.pos; // quiet ticks (pw=0) keep the spring strong so digits glide, not dissolve; // real events start loose and wild, then tighten let loose = min(pw, 1.0); let spring = mix(mix(14.0, 4.0, loose), 22.0, forming); var acc = d * spring; acc += n * u.fontSize * mix(1.5 + 7.5 * pw, 1.1, forming); acc += kick; // minute/hour events: a sweeping swirl around the screen center let swirl = max(pw - 1.0, 0.0); if (swirl > 0.0) { let rv = p.pos - u.res * 0.5; let tang = normalize(vec2f(-rv.y, rv.x) + vec2f(1e-3, 0.0)); acc += tang * u.fontSize * swirl * 34.0 * exp(-age * 2.2 / dur); if (pw >= 2.5) { // hour: outward shockwave, then the swirl winds it into a galaxy // that the springs slowly pull back into digits let rdir = normalize(rv + vec2f(1e-3, 0.0)); acc += rdir * u.fontSize * 55.0 * exp(-age * 2.0); } } let damp = mix(mix(4.5, 2.2, loose), 6.0, forming); p.vel = (p.vel + acc * u.dt) * exp(-damp * u.dt); p.pos += p.vel * u.dt; } parts[i] = p; } // ---- background ---- struct BgOut { @builtin(position) pos: vec4f, }; @vertex fn bgVs(@builtin(vertex_index) v: u32) -> BgOut { var out: BgOut; var xy = array(vec2f(-1.0, -1.0), vec2f(3.0, -1.0), vec2f(-1.0, 3.0)); out.pos = vec4f(xy[v], 0.0, 1.0); return out; } @fragment fn bgFs(@builtin(position) fc: vec4f) -> @location(0) vec4f { let uv = fc.xy / u.res; // sky gradient follows the time of day var col = mix(u.bgTop.rgb, u.bgBot.rgb, uv.y); // faint band of light behind the digits (the "screen" itself) let bandY = (fc.y - u.res.y * 0.5) / (u.fontSize * 0.95); let band = exp(-bandY * bandY); col += oklchToSrgb(0.35, 0.06, u.hueBase + 3.6) * band * 0.10; // scanlines + pixel grid: the surface of a giant LED screen let scan = 0.94 + 0.06 * sin(fc.y * TAU / 6.0); let grid = 1.0 - 0.05 * step(fract(fc.x / 28.0), 0.04); col *= scan * grid; // vignette let v = uv - 0.5; col *= 1.0 - dot(v, v) * 0.55; return vec4f(col, 1.0); } // ---- trail: fade the accumulation buffer, then composite it ---- @fragment fn fadeFs() -> @location(0) vec4f { // blended with (zero, one-minus-src-alpha): old trail *= 1 - fade return vec4f(0.0, 0.0, 0.0, u.fade); } @fragment fn compositeFs(@builtin(position) fc: vec4f) -> @location(0) vec4f { let c = textureLoad(trailT, vec2i(fc.xy), 0).rgb; // soft knee so accumulated light can glow but never white out return vec4f(c / (1.0 + 0.6 * c), 1.0); } // ---- particles ---- struct VOut { @builtin(position) pos: vec4f, @location(0) uv: vec2f, @location(1) col: vec3f, }; @vertex fn vs(@builtin(vertex_index) v: u32, @builtin(instance_index) inst: u32) -> VOut { var out: VOut; var quad = array( vec2f(-1.0, -1.0), vec2f(1.0, -1.0), vec2f(-1.0, 1.0), vec2f(-1.0, 1.0), vec2f(1.0, -1.0), vec2f(1.0, 1.0) ); let p = partsR[inst]; let slot = inst / PPS; let corner = quad[v]; // size: mostly fine grains with the occasional big soft light // (cubing the uniform seed skews the distribution toward small) let sz = p.seed.y * p.seed.y * p.seed.y; var half_ = u.fontSize * (0.006 + 0.028 * sz); var glow = 1.0 - 0.4 * sz; // big grains glow softer, not brighter if (p.seed.x > 0.985) { // a few big soft city-light bokeh half_ *= 2.6; glow *= 0.45; } if (p.seed.x < 0.035) { // river of time: small steady lights half_ *= 0.75; glow *= 0.55; } else if (p.seed.x < 0.10) { // ambient city dust: smaller, dimmer half_ *= 0.8; glow *= 0.35; } let world = p.pos + corner * half_; let clip = (world / u.res * 2.0 - 1.0) * vec2f(1.0, -1.0); out.pos = vec4f(clip, 0.0, 1.0); out.uv = corner; let age = max(u.time - burstAt(slot), 0.0); let pw = ampAt(slot); let dur = 0.5 + pw * (1.05 + 0.15 * pw); let chaos = exp(-age * 3.0 / dur); // 1 during the burst -> 0 once formed // hue drifts with time, offset per slot, jittered per particle; // the hour event turns into a rainbow storm: hue spread blows wide open // and the whole spectrum spins until the digits pull back together let storm = step(2.5, pw) * chaos; var hue = u.hueBase + f32(slot) * 0.52 + (p.seed.y - 0.5) * 0.55 * (1.0 + storm * 5.0) + storm * u.time * 1.5; if (p.seed.x < 0.035) { // the river runs through the whole spectrum along its length hue = u.hueBase + (p.pos.x / u.res.x) * 1.8; } let L = u.palL + 0.06 * sin(p.seed.x * 43.0 + u.time * 0.8); let C = u.palC + 0.045 * sin(p.seed.y * 91.0); var col = oklchToSrgb(L, C, hue); // brighter while re-forming: bigger events shine harder and longer glow *= 1.0 + (0.4 + 0.6 * pw) * exp(-age * 4.0 / dur); glow *= u.glowScale; if (u.glowScale < 0.99) { // trail pass: only moving light paints trails — settled digits stay // crisp while flying particles streak glow *= smoothstep(0.4, 2.5, length(p.vel) / u.fontSize); } // colons breathe with the seconds if (slot == 2u || slot == 5u) { glow *= u.pulse; } // fast particles leave hotter streaks glow *= 1.0 + min(length(p.vel) / (u.fontSize * 10.0), 0.8); out.col = col * glow; return out; } @fragment fn fs(@location(0) uv: vec2f, @location(1) col: vec3f) -> @location(0) vec4f { let d2 = dot(uv, uv); let core = exp(-14.0 * d2); let halo = exp(-3.5 * d2) * 0.30; return vec4f(col * (core + halo), 1.0); } `; async function startWebGPU(canvas) { if (!navigator.gpu) return false; const adapter = await navigator.gpu.requestAdapter(); if (!adapter) return false; const device = await adapter.requestDevice(); const ctx = canvas.getContext('webgpu'); if (!ctx) return false; const format = navigator.gpu.getPreferredCanvasFormat(); ctx.configure({ device, format, alphaMode: 'opaque' }); const dpr = Math.min(window.devicePixelRatio || 1, 2); const module = device.createShaderModule({ code: WGSL }); // buffers const uniformBuf = device.createBuffer({ size: 36 * 4, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST, }); // same contents but a lower glowScale, for drawing into the trail buffer const uniformBufT = device.createBuffer({ size: 36 * 4, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST, }); const partBuf = device.createBuffer({ size: NUM * 6 * 4, usage: GPUBufferUsage.STORAGE, mappedAtCreation: true, }); { const a = new Float32Array(partBuf.getMappedRange()); const w = innerWidth * dpr; const h = innerHeight * dpr; for (let i = 0; i < NUM; i++) { a[i * 6] = Math.random() * w; a[i * 6 + 1] = Math.random() * h; a[i * 6 + 2] = 0; a[i * 6 + 3] = 0; a[i * 6 + 4] = Math.random(); a[i * 6 + 5] = Math.random(); } partBuf.unmap(); } const targetBuf = device.createBuffer({ size: NUM * 2 * 4, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST, }); // pipelines — the particle buffer is read_write in compute but must be // bound read-only in the vertex stage, hence two layouts / bind groups const computeBGL = device.createBindGroupLayout({ entries: [ { binding: 0, visibility: GPUShaderStage.COMPUTE, buffer: { type: 'uniform' } }, { binding: 1, visibility: GPUShaderStage.COMPUTE, buffer: { type: 'storage' } }, { binding: 2, visibility: GPUShaderStage.COMPUTE, buffer: { type: 'read-only-storage' } }, ], }); const renderBGL = device.createBindGroupLayout({ entries: [ { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: 'uniform' }, }, { binding: 1, visibility: GPUShaderStage.VERTEX, buffer: { type: 'read-only-storage' } }, ], }); const computeBG = device.createBindGroup({ layout: computeBGL, entries: [ { binding: 0, resource: { buffer: uniformBuf } }, { binding: 1, resource: { buffer: partBuf } }, { binding: 2, resource: { buffer: targetBuf } }, ], }); const renderBG = device.createBindGroup({ layout: renderBGL, entries: [ { binding: 0, resource: { buffer: uniformBuf } }, { binding: 1, resource: { buffer: partBuf } }, ], }); const renderBGT = device.createBindGroup({ layout: renderBGL, entries: [ { binding: 0, resource: { buffer: uniformBufT } }, { binding: 1, resource: { buffer: partBuf } }, ], }); const texBGL = device.createBindGroupLayout({ entries: [{ binding: 3, visibility: GPUShaderStage.FRAGMENT, texture: {} }], }); const computePipe = device.createComputePipeline({ layout: device.createPipelineLayout({ bindGroupLayouts: [computeBGL] }), compute: { module, entryPoint: 'cs' }, }); const renderPL = device.createPipelineLayout({ bindGroupLayouts: [renderBGL] }); const bgPipe = device.createRenderPipeline({ layout: renderPL, vertex: { module, entryPoint: 'bgVs' }, fragment: { module, entryPoint: 'bgFs', targets: [{ format }] }, primitive: { topology: 'triangle-list' }, }); const addBlend = { color: { srcFactor: 'one', dstFactor: 'one' }, alpha: { srcFactor: 'one', dstFactor: 'one' }, }; const partPipe = device.createRenderPipeline({ layout: renderPL, vertex: { module, entryPoint: 'vs' }, fragment: { module, entryPoint: 'fs', targets: [{ format, blend: addBlend }] }, primitive: { topology: 'triangle-list' }, }); // trail accumulation: fade the buffer a little, add this frame's particles const fadePipe = device.createRenderPipeline({ layout: renderPL, vertex: { module, entryPoint: 'bgVs' }, fragment: { module, entryPoint: 'fadeFs', targets: [ { format, blend: { color: { srcFactor: 'zero', dstFactor: 'one-minus-src-alpha' }, alpha: { srcFactor: 'zero', dstFactor: 'one-minus-src-alpha' }, }, }, ], }, primitive: { topology: 'triangle-list' }, }); const compositePipe = device.createRenderPipeline({ layout: device.createPipelineLayout({ bindGroupLayouts: [texBGL] }), vertex: { module, entryPoint: 'bgVs' }, fragment: { module, entryPoint: 'compositeFs', targets: [{ format, blend: addBlend }] }, primitive: { topology: 'triangle-list' }, }); let trailTex = null; let trailView = null; let compositeBG = null; function makeTrail() { if (trailTex) trailTex.destroy(); trailTex = device.createTexture({ size: [canvas.width, canvas.height], format, usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING, }); trailView = trailTex.createView(); compositeBG = device.createBindGroup({ layout: texBGL, entries: [{ binding: 3, resource: trailView }], }); } // clock state const t0 = performance.now(); const now = () => (performance.now() - t0) / 1000; let layoutInfo = null; const shown = new Array(SLOTS).fill(''); const burst = new Float32Array(SLOTS).fill(-100); const amp = new Float32Array(SLOTS); const slotData = new Float32Array(PPS * 2); const uni = new Float32Array(36); const uniT = new Float32Array(36); function writeSlot(slot, ch) { fillSlotTargets(slotData, ch, layoutInfo.cells[slot], layoutInfo.fontSize, PPS); device.queue.writeBuffer(targetBuf, slot * PPS * 8, slotData); shown[slot] = ch; } function resize(withBurst) { const w = Math.max(1, Math.round(innerWidth * dpr)); const h = Math.max(1, Math.round(innerHeight * dpr)); canvas.width = w; canvas.height = h; makeTrail(); layoutInfo = computeLayout(w, h); const chars = timeChars(); const t = now(); for (let s = 0; s < SLOTS; s++) { writeSlot(s, chars[s]); if (withBurst) { burst[s] = t; amp[s] = 2; } } } resize(true); // opening: particles converge from the whole screen window.addEventListener('resize', () => resize(false)); // preview hook for the 1/2/3 keys window.__clockBurst = (power) => { const chars = timeChars(); const t = now(); for (let s = 0; s < SLOTS; s++) { writeSlot(s, chars[s]); burst[s] = t; amp[s] = power; } }; let last = now(); function frame() { requestAnimationFrame(frame); const t = now(); const dt = Math.min(t - last, 0.05); last = t; // event sizes: hour > minute > 10s full swap > quiet per-second tick const chars = timeChars(); let power = 0; if (chars[0] !== shown[0] || chars[1] !== shown[1]) power = 3; else if (chars[3] !== shown[3] || chars[4] !== shown[4]) power = 2; else if (chars[6] !== shown[6]) power = 1; if (power > 0) { // full swap: every slot re-samples (even unchanged digits) and bursts for (let s = 0; s < SLOTS; s++) { writeSlot(s, chars[s]); burst[s] = t; amp[s] = power; } } else { // ordinary tick: changed digits glide to their new shape, no burst. // If the slot is still mid-spectacle, only swap its targets — resetting // burst/amp would snap it out of the storm. for (let s = 0; s < SLOTS; s++) { if (chars[s] !== shown[s]) { writeSlot(s, chars[s]); const prevDur = 0.5 + amp[s] * (1.05 + 0.15 * amp[s]); if (t - burst[s] > prevDur) { burst[s] = t; amp[s] = 0; } } } } // hue makes a full turn per minute, plus a slow day-scale drift const d = new Date(); const secOfMin = d.getSeconds() + d.getMilliseconds() / 1000; const pal = dayPalette(d.getHours() + d.getMinutes() / 60 + d.getSeconds() / 3600); const hueBase = (secOfMin / 60) * Math.PI * 2 + d.getMinutes() * 0.35 + t * 0.02 + pal.bias; const pulse = 0.45 + 0.75 * Math.pow(0.5 + 0.5 * Math.cos(Math.PI * 2 * (d.getMilliseconds() / 1000)), 1.4); // long light trails while a spectacle is playing, short ones otherwise let maxAmp = 0; for (let s = 0; s < SLOTS; s++) { if (amp[s] >= 1 && t - burst[s] < 0.5 + amp[s] * (1.05 + 0.15 * amp[s])) { maxAmp = Math.max(maxAmp, amp[s]); } } const fadeAlpha = 1 - Math.exp(-dt * (maxAmp > 0 ? 2.4 : 3.4)); // keep the trail buffer's steady-state light level constant: emit in // proportion to the fade rate, and cancel the event glow boost const baseAlpha = 1 - Math.exp(-dt * 3.4); const trailGlow = (0.3 * (fadeAlpha / baseAlpha)) / (1 + 0.4 + 0.6 * maxAmp); uni[0] = canvas.width; uni[1] = canvas.height; uni[2] = t; uni[3] = dt; uni[4] = hueBase; uni[5] = layoutInfo.fontSize; uni[6] = pulse; uni[7] = fadeAlpha; uni.set(burst, 8); uni.set(amp, 16); uni[24] = pal.L; uni[25] = pal.C; uni[26] = secOfMin / 60; // river of time progress uni[27] = 1.0; // glowScale: full strength on the main pass uni.set(pal.bgTop, 28); uni.set(pal.bgBot, 32); device.queue.writeBuffer(uniformBuf, 0, uni); uniT.set(uni); uniT[27] = trailGlow; // dimmer copy accumulated into the trail buffer device.queue.writeBuffer(uniformBufT, 0, uniT); const enc = device.createCommandEncoder(); const cp = enc.beginComputePass(); cp.setPipeline(computePipe); cp.setBindGroup(0, computeBG); cp.dispatchWorkgroups(Math.ceil(NUM / 64)); cp.end(); // pass A: accumulate into the trail buffer (fade old light, add new) const tp = enc.beginRenderPass({ colorAttachments: [{ view: trailView, loadOp: 'load', storeOp: 'store' }], }); tp.setPipeline(fadePipe); tp.setBindGroup(0, renderBGT); tp.draw(3); tp.setPipeline(partPipe); tp.draw(6, NUM); tp.end(); // pass B: background, trails, then this frame's particles on top const rp = enc.beginRenderPass({ colorAttachments: [ { view: ctx.getCurrentTexture().createView(), loadOp: 'clear', clearValue: { r: 0, g: 0, b: 0, a: 1 }, storeOp: 'store', }, ], }); rp.setPipeline(bgPipe); rp.setBindGroup(0, renderBG); rp.draw(3); rp.setPipeline(compositePipe); rp.setBindGroup(0, compositeBG); rp.draw(3); rp.setPipeline(partPipe); rp.setBindGroup(0, renderBG); rp.draw(6, NUM); rp.end(); device.queue.submit([enc.finish()]); } requestAnimationFrame(frame); return true; } // ============================================================================ // Canvas 2D fallback — same concept, CPU physics, fewer particles // ============================================================================ function start2D(canvas) { const ctx = canvas.getContext('2d'); const PPS2 = 420; const N2 = SLOTS * PPS2; const dpr = Math.min(window.devicePixelRatio || 1, 1.5); const oklchOK = window.CSS && CSS.supports && CSS.supports('color', 'oklch(70% 0.15 120deg)'); const px = new Float32Array(N2); const py = new Float32Array(N2); const vx = new Float32Array(N2); const vy = new Float32Array(N2); const tx = new Float32Array(N2); const ty = new Float32Array(N2); const seed = new Float32Array(N2); const t0 = performance.now(); const now = () => (performance.now() - t0) / 1000; let layoutInfo = null; const shown = new Array(SLOTS).fill(''); const burst = new Float32Array(SLOTS).fill(-100); const amp = new Float32Array(SLOTS); const slotData = new Float32Array(PPS2 * 2); function writeSlot(slot, ch) { fillSlotTargets(slotData, ch, layoutInfo.cells[slot], layoutInfo.fontSize, PPS2); for (let k = 0; k < PPS2; k++) { tx[slot * PPS2 + k] = slotData[k * 2]; ty[slot * PPS2 + k] = slotData[k * 2 + 1]; } shown[slot] = ch; } function resize(withBurst) { canvas.width = Math.max(1, Math.round(innerWidth * dpr)); canvas.height = Math.max(1, Math.round(innerHeight * dpr)); layoutInfo = computeLayout(canvas.width, canvas.height); const chars = timeChars(); const t = now(); for (let s = 0; s < SLOTS; s++) { writeSlot(s, chars[s]); if (withBurst) { burst[s] = t; amp[s] = 2; } } } for (let i = 0; i < N2; i++) { px[i] = Math.random() * innerWidth * dpr; py[i] = Math.random() * innerHeight * dpr; seed[i] = Math.random(); } resize(true); window.addEventListener('resize', () => resize(false)); window.__clockBurst = (power) => { const chars = timeChars(); const t = now(); for (let s = 0; s < SLOTS; s++) { writeSlot(s, chars[s]); burst[s] = t; amp[s] = power; } }; function slotColor(slot, hueBase, alpha, pal) { const hue = hueBase + slot * 0.52; if (oklchOK) { const deg = ((hue * 180) / Math.PI) % 360; return ( 'oklch(' + (pal.L * 100).toFixed(0) + '% ' + pal.C.toFixed(3) + ' ' + deg.toFixed(1) + 'deg / ' + alpha + ')' ); } const deg = (((hue * 180) / Math.PI) % 360 + 360) % 360; return 'hsl(' + deg.toFixed(1) + ' 90% 65% / ' + alpha + ')'; } let firstFrame = true; let last = now(); function frame() { requestAnimationFrame(frame); const t = now(); const dt = Math.min(t - last, 0.05); last = t; const W = canvas.width; const H = canvas.height; const F = layoutInfo.fontSize; const chars = timeChars(); let power = 0; if (chars[0] !== shown[0] || chars[1] !== shown[1]) power = 3; else if (chars[3] !== shown[3] || chars[4] !== shown[4]) power = 2; else if (chars[6] !== shown[6]) power = 1; if (power > 0) { for (let s = 0; s < SLOTS; s++) { writeSlot(s, chars[s]); burst[s] = t; amp[s] = power; } } else { for (let s = 0; s < SLOTS; s++) { if (chars[s] !== shown[s]) { writeSlot(s, chars[s]); const prevDur = 0.5 + amp[s] * (1.05 + 0.15 * amp[s]); if (t - burst[s] > prevDur) { burst[s] = t; amp[s] = 0; } } } } const d = new Date(); const secOfMin = d.getSeconds() + d.getMilliseconds() / 1000; const pal = dayPalette(d.getHours() + d.getMinutes() / 60 + d.getSeconds() / 3600); const hueBase = (secOfMin / 60) * Math.PI * 2 + d.getMinutes() * 0.35 + t * 0.02 + pal.bias; const pulse = 0.45 + 0.75 * Math.pow(0.5 + 0.5 * Math.cos(Math.PI * 2 * (d.getMilliseconds() / 1000)), 1.4); const riverT = secOfMin / 60; let active = false; for (let s = 0; s < SLOTS; s++) { if (amp[s] >= 1 && t - burst[s] < 0.5 + amp[s] * (1.05 + 0.15 * amp[s])) active = true; } const fadeAlpha = firstFrame ? 1 : 1 - Math.exp(-dt * (active ? 2.4 : 3.4)); firstFrame = false; // physics for (let s = 0; s < SLOTS; s++) { const age = Math.max(t - burst[s], 0); const pw = amp[s]; const dur = 0.5 + pw * (1.05 + 0.15 * pw); const forming = Math.min(Math.max((age - dur * 0.2) / (dur * 0.8), 0), 1); const loose = Math.min(pw, 1); const spring0 = 14 - 10 * loose; const spring = spring0 + (22 - spring0) * forming; const damp0 = 4.5 - 2.3 * loose; const damp = Math.exp(-(damp0 + (6 - damp0) * forming) * dt); const nAmp = F * ((1.5 + 7.5 * pw) * (1 - forming) + 1.1 + 20 * pw * Math.exp((-age * 6) / dur)); const freeDamp = Math.exp(-1.3 * dt); const swirl = Math.max(pw - 1, 0) * F * 34 * Math.exp((-age * 2.2) / dur); const shock = pw >= 2.5 ? F * 55 * Math.exp(-age * 2) : 0; for (let k = 0; k < PPS2; k++) { const i = s * PPS2 + k; const nx = Math.sin(py[i] * 0.013 + t * 0.9 + seed[i] * 6.28); const ny = Math.cos(px[i] * 0.011 - t * 0.7 + seed[i] * 6.28); if (seed[i] < 0.035) { // river of time: fills the bottom band left-to-right each minute const f = (seed[i] * 999.7) % 1; const gx = f * W * riverT; const gy = H * 0.94 + ny * F * 0.06; const rd = Math.exp(-3 * dt); vx[i] = (vx[i] + ((gx - px[i]) * 6 + nx * F * 0.8) * dt) * rd; vy[i] = (vy[i] + (gy - py[i]) * 6 * dt) * rd; px[i] += vx[i] * dt; py[i] += vy[i] * dt; continue; } if (seed[i] < 0.1) { // ambient city dust: drift and wrap, never joins a digit vx[i] = (vx[i] + (nx * F * 2.2 + F * 0.35) * dt) * freeDamp; vy[i] = (vy[i] + ny * F * 2.2 * dt) * freeDamp; px[i] = (((px[i] + vx[i] * dt) % W) + W) % W; py[i] = (((py[i] + vy[i] * dt) % H) + H) % H; continue; } let ax = (tx[i] - px[i]) * spring + nx * nAmp; let ay = (ty[i] - py[i]) * spring + ny * nAmp; if (swirl > 0) { const rvx = px[i] - W / 2; const rvy = py[i] - H / 2; const rl = Math.hypot(rvx, rvy) || 1; ax += (-rvy / rl) * swirl + (rvx / rl) * shock; ay += (rvx / rl) * swirl + (rvy / rl) * shock; } vx[i] = (vx[i] + ax * dt) * damp; vy[i] = (vy[i] + ay * dt) * damp; px[i] += vx[i] * dt; py[i] += vy[i] * dt; } } // draw: repaint the sky at low alpha so moving light leaves trails ctx.globalCompositeOperation = 'source-over'; ctx.globalAlpha = fadeAlpha; const c255 = (v) => Math.round(v * 255); const grad = ctx.createLinearGradient(0, 0, 0, H); grad.addColorStop(0, `rgb(${c255(pal.bgTop[0])} ${c255(pal.bgTop[1])} ${c255(pal.bgTop[2])})`); grad.addColorStop(1, `rgb(${c255(pal.bgBot[0])} ${c255(pal.bgBot[1])} ${c255(pal.bgBot[2])})`); ctx.fillStyle = grad; ctx.fillRect(0, 0, W, H); ctx.globalAlpha = 1; ctx.globalCompositeOperation = 'lighter'; const r = Math.max(F * 0.012, 1); for (let s = 0; s < SLOTS; s++) { const age = t - burst[s]; let a = 0.55 + 0.45 * Math.exp(-age * 2.2); if (COLON_SLOTS.has(s)) a *= pulse; ctx.fillStyle = slotColor(s, hueBase, Math.min(a, 1).toFixed(3), pal); ctx.beginPath(); for (let k = 0; k < PPS2; k++) { const i = s * PPS2 + k; const sz = seed[i] * seed[i] * seed[i]; ctx.moveTo(px[i] + r, py[i]); ctx.arc(px[i], py[i], r * (0.4 + 2.2 * sz), 0, Math.PI * 2); } ctx.fill(); } } requestAnimationFrame(frame); } // ---- boot ----------------------------------------------------------------- const canvas = document.getElementById('art'); startWebGPU(canvas) .then((ok) => { if (!ok) start2D(canvas); }) .catch((err) => { console.warn('WebGPU unavailable, falling back to Canvas 2D:', err); start2D(canvas); }); })();

Particle Clock