4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2ntfcxrkfxczh.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1d5f,import { glyphGrid, render } from "./cpu"; import { FIELD_IDS, fieldParams } from "./fields"; import { clearGlyphAtlases, DEFAULT_FONT, GLYPH_ASPECT, glyphAtlas, rampGlyphs } from "./glyphs"; import { resolvePalette, type RGB } from "./palettes"; import { thresholdMap } from "./patterns"; import { ASCII, clearPrograms, DITHER, getProgram } from "./programs"; import { getScheduler } from "./scheduler"; import type { Frame } from "./types"; const SHARED = ["uSize", "uTime", "uField", "uParams", "uValues", "uCursor", "uContrast", "uThreshold", "uPalette", "uLevels"]; const DITHER_UNIFORMS = [...SHARED, "uPattern"]; const ASCII_UNIFORMS = [...SHARED, "uCell", "uAspect", "uGlyphs", "uAtlas"]; let gl: WebGL2RenderingContext | null | undefined; let glCanvas: HTMLCanvasElement; let textures = new WeakMap(); const LIVE = {}; // One WebGL2 context per page, shared by every view (browsers cap live contexts at ~16). function getGL(): WebGL2RenderingContext | null { if (gl === undefined) { glCanvas = document.createElement("canvas"); // Dev-only escape hatch to see the Canvas2D path: `?cpu=1`. const forceCPU = process.env.NODE_ENV !== "production" && new URLSearchParams(location.search).has("cpu"); gl = forceCPU ? null : glCanvas.getContext("webgl2", { antialias: false, depth: false, stencil: false, premultipliedAlpha: false }); // While lost, views draw on the CPU; on restore, rebuild programs and textures lazily and redraw everything. glCanvas.addEventListener("webglcontextlost", (e) => { e.preventDefault(); getScheduler().invalidateAll(); }); glCanvas.addEventListener("webglcontextrestored", () => { if (gl) clearPrograms(gl); textures = new WeakMap(); getScheduler().invalidateAll(); }); // Atlases drawn with a fallback font are stale once a web font arrives. document.fonts?.addEventListener("loadingdone", () => { clearGlyphAtlases(); getScheduler().invalidateAll(); }); } return gl; } /** Upload a texture once per source object (threshold map or glyph atlas). */ function texture(gl: WebGL2RenderingContext, key: object, upload: () => void): WebGLTexture { let tex = textures.get(key); if (!tex) { tex = gl.createTexture()!; gl.bindTexture(gl.TEXTURE_2D, tex); upload(); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); textures.set(key, tex); } return tex; } /** * Render a frame into the view's own 2D canvas. Dither renders one pixel per mark (CSS upscales it); * ASCII renders each cell at device resolution so glyphs stay sharp. */ export function draw(canvas: HTMLCanvasElement, frame: Frame): void { const { width: cols, height: rows, source, tokens } = frame; const ascii = tokens.mode === "ascii"; const cellH = ascii ? Math.max(1, Math.round(tokens.cell * (frame.dpr ?? 1))) : 1; const cellW = ascii ? Math.max(1, Math.round(cellH * GLYPH_ASPECT)) : 1; const w = cols * cellW, h = rows * cellH; if (canvas.width !== w) canvas.width = w; if (canvas.height !== h) canvas.height = h; const ctx = canvas.getContext("2d"); if (!ctx) return; const g = getGL(); if (source.kind !== "field" && !frame.values) return; // Diffused frames are already quantized on the CPU, so they skip the GPU. if (!g || g.isContextLost() || frame.indices) { if (ascii) drawGlyphs(ctx, frame, cellW, cellH); else ctx.putImageData(new ImageData(render(frame), cols, rows), 0, 0); return; } if (glCanvas.width < w) glCanvas.width = w; if (glCanvas.height < h) glCanvas.height = h; const { program, uniforms: u } = getProgram(g, ascii ? ASCII : DITHER, ascii ? ASCII_UNIFORMS : DITHER_UNIFORMS); const palette = resolvePalette(tokens.palette); g.useProgram(program); g.viewport(0, 0, w, h); g.uniform2f(u.uSize, cols, rows); g.uniform1f(u.uTime, frame.time); if (source.kind === "field") { g.uniform1i(u.uField, FIELD_IDS[source.field]); g.uniform4fv(u.uParams, fieldParams(source.field, source.params)); } else { const values = frame.values!; const upload = () => g.texImage2D(g.TEXTURE_2D, 0, g.R32F, cols, rows, 0, g.RED, g.FLOAT, values); g.uniform1i(u.uField, -1); g.activeTexture(g.TEXTURE1); // Image and text values are cached per size; video frames, scrambles and reveals change every draw, so they share one texture re-uploaded each time. const live = source.kind === "video" || (source.kind === "text" && !!(source.scramble || source.reveal)); g.bindTexture(g.TEXTURE_2D, texture(g, live ? LIVE : values, upload)); if (live) upload(); } g.uniform1i(u.uValues, 1); g.uniform4fv(u.uCursor, frame.cursor ?? [0, 0, 0, 0]); g.uniform1f(u.uContrast, tokens.contrast); g.uniform1f(u.uThreshold, tokens.threshold); g.uniform3fv(u.uPalette, [0, 1, 2, 3].flatMap((i) => palette[Math.min(i, palette.length - 1)])); g.uniform1i(u.uLevels, palette.length); g.activeTexture(g.TEXTURE0); if (ascii) { const glyphs = rampGlyphs(tokens.glyphs); const atlas = glyphAtlas(glyphs, cellW, cellH, frame.font ?? DEFAULT_FONT); g.bindTexture(g.TEXTURE_2D, texture(g, atlas, () => g.texImage2D(g.TEXTURE_2D, 0, g.RGBA, g.RGBA, g.UNSIGNED_BYTE, atlas))); g.uniform2f(u.uCell, cellW, cellH); g.uniform1f(u.uAspect, (cols * GLYPH_ASPECT) / rows); g.uniform1i(u.uGlyphs, glyphs.length); g.uniform1i(u.uAtlas, 0); } else { const map = thresholdMap(tokens.pattern); g.bindTexture(g.TEXTURE_2D, texture(g, map, () => g.texImage2D(g.TEXTURE_2D, 0, g.R32F, map.size, map.size, 0, g.RED, g.FLOAT, map.data))); g.uniform1i(u.uPattern, 0); } g.drawArrays(g.TRIANGLES, 0, 3); // The viewport sits at the bottom-left of the shared canvas. ctx.drawImage(glCanvas, 0, glCanvas.height - h, w, h, 0, 0, w, h); } const tints = new WeakMap>(); /** The atlas recoloured to one palette colour (cached), so the CPU path blits glyphs like the shader. */ function tinted(atlas: HTMLCanvasElement, [r, g, b]: RGB): HTMLCanvasElement { let byColor = tints.get(atlas); if (!byColor) tints.set(atlas, (byColor = new Map())); const fill = `rgb(${r},${g},${b})`; let tint = byColor.get(fill); if (!tint) { tint = document.createElement("canvas"); tint.width = atlas.width; tint.height = atlas.height; const t = tint.getContext("2d")!; t.drawImage(atlas, 0, 0); t.globalCompositeOperation = "source-in"; t.fillStyle = fill; t.fillRect(0, 0, tint.width, tint.height); byColor.set(fill, tint); } return tint; } /** Canvas2D twin of the ASCII shader: background fill, then one tinted glyph per cell. */ export function drawGlyphs(ctx: CanvasRenderingContext2D, frame: Frame, cellW: number, cellH: number): void { const { width: cols, height: rows, tokens } = frame; const palette = resolvePalette(tokens.palette); const atlas = glyphAtlas(rampGlyphs(tokens.glyphs), cellW, cellH, frame.font ?? DEFAULT_FONT); const tints = palette.map((c) => tinted(atlas, c)); const { glyphs, bands } = glyphGrid(frame); const [r, g, b] = palette[0]; ctx.fillStyle = `rgb(${r},${g},${b})`; ctx.fillRect(0, 0, cols * cellW, rows * cellH); for (let i = 0; i < glyphs.length; i++) { const x = (i % cols) * cellW, y = Math.floor(i / cols) * cellH; ctx.drawImage(tints[bands[i]], glyphs[i] * cellW, 0, cellW, cellH, x, y, cellW, cellH); } } 51:T9da,import { cursorBump, field, fieldParams } from "./fields"; import { GLYPH_ASPECT, glyphCell, rampGlyphs } from "./glyphs"; import { resolvePalette } from "./palettes"; import { level, thresholdMap } from "./patterns"; import type { Frame } from "./types"; /** Calls back with the source value (0–1 plus cursor) at every mark's centre. */ function eachValue(frame: Frame, aspect: number, callback: (x: number, y: number, v: number) => void): void { const { source, width, height, time, cursor = [0, 0, 0, 0], values } = frame; if (source.kind !== "field" && !values) throw new Error(`dotgrain: ${source.kind} frames need \`values\``); const params = source.kind === "field" ? fieldParams(source.field, source.params) : []; for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { const u = (x + 0.5) / width, w = (y + 0.5) / height; const v = source.kind === "field" ? field(source.field, u, w, aspect, time, params, [width, height]) : values![y * width + x]; callback(x, y, v + cursorBump(u, w, aspect, cursor)); } } } /** Deterministic CPU dither render of a frame: RGBA bytes, width × height marks. */ export function render(frame: Frame): Uint8ClampedArray { const { tokens, width, height, indices } = frame; const palette = resolvePalette(tokens.palette); const out = new Uint8ClampedArray(width * height * 4); if (indices) { indices.forEach((i, p) => out.set([...palette[i], 255], p * 4)); return out; } const { size, data: thresholds } = thresholdMap(tokens.pattern); eachValue(frame, width / height, (x, y, v) => { const t = thresholds[(y % size) * size + (x % size)]; const [r, g, b] = palette[level(v, tokens.contrast, tokens.threshold, t, palette.length)]; out.set([r, g, b, 255], (y * width + x) * 4); }); return out; } /** Deterministic CPU ASCII render: glyph index per cell and palette band for its colour. */ export function glyphGrid(frame: Frame): { glyphs: Uint16Array; bands: Uint8Array } { const { tokens, width, height } = frame; const ramp = rampGlyphs(tokens.glyphs).length; const colors = resolvePalette(tokens.palette).length; const glyphs = new Uint16Array(width * height); const bands = new Uint8Array(width * height); eachValue(frame, (width * GLYPH_ASPECT) / height, (x, y, v) => { const cell = glyphCell(v, tokens.contrast, tokens.threshold, ramp, colors); glyphs[y * width + x] = cell.glyph; bands[y * width + x] = cell.band; }); return { glyphs, bands }; } 52:Tfe4,import type { Pattern } from "./types"; export type DiffusionPattern = "atkinson" | "floyd"; export const isDiffusion = (pattern: Pattern): pattern is DiffusionPattern => pattern === "atkinson" || pattern === "floyd"; /** * Error-diffuse luminance into palette indices (n levels), row by row, left to right. * Self-contained (no imports or closures): its source is stringified into the Worker. */ export function diffuse( values: Float32Array, width: number, height: number, pattern: DiffusionPattern, contrast: number, threshold: number, n: number, ): Uint8Array { // [dx, dy, weight]: Floyd–Steinberg spreads all of the error; Atkinson spreads 6/8 for crisper highlights. const kernel = pattern === "floyd" ? [1, 0, 7 / 16, -1, 1, 3 / 16, 0, 1, 5 / 16, 1, 1, 1 / 16] : [1, 0, 1 / 8, 2, 0, 1 / 8, -1, 1, 1 / 8, 0, 1, 1 / 8, 1, 1, 1 / 8, 0, 2, 1 / 8]; const s = new Float32Array(values.length); // Same tone mapping as ordered dither, so contrast and threshold behave identically. for (let i = 0; i < s.length; i++) s[i] = Math.min(1, Math.max(0, (values[i] - 0.5) * contrast + 1 - threshold)) * (n - 1); const out = new Uint8Array(values.length); for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { const i = y * width + x; const q = Math.min(n - 1, Math.max(0, Math.round(s[i]))); out[i] = q; const err = s[i] - q; for (let k = 0; k < kernel.length; k += 3) { const nx = x + kernel[k], ny = y + kernel[k + 1]; if (nx >= 0 && nx < width && ny < height) s[ny * width + nx] += err * kernel[k + 2]; } } } return out; } const WORKER_PIXELS = 512 * 512; let worker: Worker | null | undefined; let nextId = 0; type Args = Parameters; const pending = new Map void }>(); // Built from diffuse's own source at runtime, so installs need no bundler config for a worker file. function getWorker(): Worker | null { if (worker === undefined) { try { const source = `const diffuse = (${diffuse.toString()}); onmessage = (e) => { const out = diffuse(...e.data.args); postMessage({ id: e.data.id, out }, [out.buffer]); };`; worker = new Worker(URL.createObjectURL(new Blob([source], { type: "text/javascript" }))); worker.onmessage = (e: MessageEvent<{ id: number; out: Uint8Array }>) => { pending.get(e.data.id)?.done(e.data.out); pending.delete(e.data.id); }; // e.g. a CSP that blocks blob: workers: finish queued work here and stay on the main thread. worker.onerror = () => { worker = null; pending.forEach(({ args, done }) => done(diffuse(...args))); pending.clear(); }; } catch { worker = null; } } return worker; } const results = new WeakMap>(); /** * Diffused indices for an image's values, cached per tone settings. Images over 512×512 diffuse in a * Worker when one is available: undefined is returned until then, and `onReady` fires once it lands. */ export function diffused( values: Float32Array, width: number, height: number, pattern: DiffusionPattern, contrast: number, threshold: number, n: number, onReady: () => void, ): Uint8Array | undefined { let byKey = results.get(values); if (!byKey) results.set(values, (byKey = new Map())); const key = `${pattern}|${contrast}|${threshold}|${n}`; const hit = byKey.get(key); if (hit) return hit === "pending" ? undefined : hit; const args: Args = [values, width, height, pattern, contrast, threshold, n]; const w = width * height > WORKER_PIXELS && typeof Worker !== "undefined" ? getWorker() : null; if (!w) { const indices = diffuse(...args); byKey.set(key, indices); return indices; } const id = nextId++; byKey.set(key, "pending"); pending.set(id, { args, done: (indices) => { byKey.set(key, indices); onReady(); }, }); w.postMessage({ id, args }); return undefined; } 53:T559,export interface Easer { /** True while any eased value is still short of its target. */ settling(target: Record): boolean; /** Advance toward the target; snaps on the first frame and when `snap` (reduced motion). */ step(target: Record, seconds: number, snap: boolean): Record; } /** Frame-rate independent exponential ease for numeric params, e.g. a progress value. */ export function createEaser(rate = 10): Easer { let current: Record | undefined; let last: number | undefined; const far = (target: Record) => !!current && Object.keys(target).some((k) => Math.abs((current![k] ?? target[k]) - target[k]) > 1e-3); return { settling: far, step(target, seconds, snap) { if (!current || snap || !far(target)) { current = { ...target }; last = undefined; return current; } // After idle, the gap since the last eased frame is meaningless: take one nominal 60 Hz step. const dt = last === undefined ? 1 / 60 : Math.min(Math.max(seconds - last, 0), 0.1); const k = 1 - Math.exp(-dt * rate); const from = current; current = Object.fromEntries(Object.entries(target).map(([key, v]) => [key, (from[key] ?? v) + (v - (from[key] ?? v)) * k])); last = seconds; return current; }, }; } 54:T1cd7,import type { FieldName } from "./types"; // Each field exists twice: GLSL for the GPU and an identical JS twin for the CPU path and tests. // The integer hash keeps both sides bit-compatible (sin-based hashes drift between GPU and CPU). // Param order is the vec4 slot order the shader reads. const FIELD_PARAMS: Record> = { noise: { scale: 3 }, radial: { x: 0.5, y: 0.5, radius: 0.5 }, linear: { angle: 0 }, progress: { value: 0.5, softness: 0.05 }, // Share of columns raining; tail length as a share of the height; columns across the width, more than any // glyph grid has so each glyph column falls on its own. The speed token scales time, so fall speed needs no param. rain: { density: 0.7, length: 0.4, columns: 1024 }, // Ring radius and thickness in heights; turns once per second at speed 1. spin: { radius: 0.32, thickness: 0.16 }, // Resting level; band half-width as a share of the width. One sweep every ~1.7 s at speed 1. shimmer: { base: 0.3, width: 0.25 }, // Border width in marks (whole cells in ASCII), fading inward; the level inside it. frame: { border: 2, fill: 0 }, }; /** Index the shader switches on. */ export const FIELD_IDS: Record = { noise: 0, radial: 1, linear: 2, progress: 3, rain: 4, spin: 5, shimmer: 6, frame: 7 }; /** Field params packed into the vec4 the shader reads, defaults filled in. */ export function fieldParams(field: FieldName, params: Record = {}): number[] { const out = Object.entries(FIELD_PARAMS[field]).map(([k, d]) => params[k] ?? d); while (out.length < 4) out.push(0); return out; } export const FIELD_GLSL = ` float hash3(ivec3 c) { uint h = (uint(c.x) * 0x27d4eb2du) ^ (uint(c.y) * 0x165667b1u) ^ (uint(c.z) * 0x9e3779b1u); h = (h ^ (h >> 15u)) * 0x85ebca6bu; h ^= h >> 13u; return float(h) / 4294967295.0; } float vnoise(vec3 p) { vec3 i = floor(p); vec3 f = p - i; vec3 u = f * f * (3.0 - 2.0 * f); ivec3 c = ivec3(i); float a = mix(hash3(c), hash3(c + ivec3(1, 0, 0)), u.x); float b = mix(hash3(c + ivec3(0, 1, 0)), hash3(c + ivec3(1, 1, 0)), u.x); float d = mix(hash3(c + ivec3(0, 0, 1)), hash3(c + ivec3(1, 0, 1)), u.x); float e = mix(hash3(c + ivec3(0, 1, 1)), hash3(c + ivec3(1, 1, 1)), u.x); return mix(mix(a, b, u.y), mix(d, e, u.y), u.z); } float field(int kind, vec2 uv, float aspect, float t, vec4 params) { if (kind == 1) return clamp(1.0 - length((uv - params.xy) * vec2(aspect, 1.0)) / params.z, 0.0, 1.0); if (kind == 2) { float a = radians(params.x); return clamp(dot(uv - 0.5, vec2(cos(a), sin(a))) + 0.5, 0.0, 1.0); } if (kind == 3) return clamp((params.x - uv.x) / max(params.y, 1e-4) * 0.5 + 0.5, 0.0, 1.0); if (kind == 4) { // Each column: hashed on/off, phase and speed; a head falls and its tail fades behind it, wrapping. int c = int(floor(uv.x * params.z)); if (hash3(ivec3(c, 2, 0)) > params.x) return 0.0; float head = fract(hash3(ivec3(c, 1, 0)) + t * (0.3 + 0.7 * hash3(ivec3(c, 0, 0)))); float d = fract(head - uv.y); return d < params.y ? 1.0 - d / params.y : 0.0; } if (kind == 5) { // A ring whose brightness sweeps round it: brightest at the head, fading over one turn behind it. vec2 p = (uv - 0.5) * vec2(aspect, 1.0); if (abs(length(p) - params.x) > params.y * 0.5) return 0.0; return fract(atan(p.y, p.x) / 6.2831853 + 0.5 - t); } if (kind == 6) { // A slightly slanted bright band sweeping left to right over a flat base, off-screen between sweeps. float d = abs(uv.x + uv.y * 0.15 - (fract(t * 0.6) * 1.8 - 0.4)); return params.x + (1.0 - params.x) * clamp(1.0 - d / max(params.y, 1e-4), 0.0, 1.0); } if (kind == 7) { // uSize is the mark grid of whichever program includes this, so the border is counted in marks. // The border fades inward from full so dither shows in it. vec2 m = uv * uSize; float d = min(min(m.x, uSize.x - m.x), min(m.y, uSize.y - m.y)); return d < params.x ? 1.0 - 0.6 * d / params.x : params.y; } vec2 p = vec2(uv.x * aspect, uv.y) * params.x; float z = t * 0.25; return 0.65 * vnoise(vec3(p, z)) + 0.35 * vnoise(vec3(p * 2.0 + 17.0, z * 2.0)); } // Soft radial bump at the pointer, added to the field value. float cursorBump(vec2 uv, float aspect, vec4 cursor) { vec2 d = (uv - cursor.xy) * vec2(aspect, 1.0); return cursor.z * 0.6 * exp(-dot(d, d) / max(cursor.w * cursor.w, 1e-6)); } `; function hash3(x: number, y: number, z: number): number { let h = Math.imul(x, 0x27d4eb2d) ^ Math.imul(y, 0x165667b1) ^ Math.imul(z, 0x9e3779b1); h = Math.imul(h ^ (h >>> 15), 0x85ebca6b); h ^= h >>> 13; return (h >>> 0) / 4294967295; } const mix = (a: number, b: number, t: number) => a + (b - a) * t; function vnoise(x: number, y: number, z: number): number { const xi = Math.floor(x), yi = Math.floor(y), zi = Math.floor(z); const fx = x - xi, fy = y - yi, fz = z - zi; const ux = fx * fx * (3 - 2 * fx), uy = fy * fy * (3 - 2 * fy), uz = fz * fz * (3 - 2 * fz); const a = mix(hash3(xi, yi, zi), hash3(xi + 1, yi, zi), ux); const b = mix(hash3(xi, yi + 1, zi), hash3(xi + 1, yi + 1, zi), ux); const d = mix(hash3(xi, yi, zi + 1), hash3(xi + 1, yi, zi + 1), ux); const e = mix(hash3(xi, yi + 1, zi + 1), hash3(xi + 1, yi + 1, zi + 1), ux); return mix(mix(a, b, uy), mix(d, e, uy), uz); } const clamp01 = (x: number) => Math.min(1, Math.max(0, x)); const fract = (x: number) => x - Math.floor(x); /** JS twin of the GLSL `field`: value 0–1 at uv for the given time. */ export function field(name: FieldName, u: number, v: number, aspect: number, t: number, params: number[], size: [number, number] = [1, 1]): number { if (name === "radial") return clamp01(1 - Math.hypot((u - params[0]) * aspect, v - params[1]) / params[2]); if (name === "linear") { const a = (params[0] * Math.PI) / 180; return clamp01((u - 0.5) * Math.cos(a) + (v - 0.5) * Math.sin(a) + 0.5); } if (name === "progress") return clamp01(((params[0] - u) / Math.max(params[1], 1e-4)) * 0.5 + 0.5); if (name === "rain") { const c = Math.floor(u * params[2]); if (hash3(c, 2, 0) > params[0]) return 0; const head = fract(hash3(c, 1, 0) + t * (0.3 + 0.7 * hash3(c, 0, 0))); const d = fract(head - v); return d < params[1] ? 1 - d / params[1] : 0; } if (name === "spin") { const px = (u - 0.5) * aspect, py = v - 0.5; if (Math.abs(Math.hypot(px, py) - params[0]) > params[1] * 0.5) return 0; return fract(Math.atan2(py, px) / 6.2831853 + 0.5 - t); } if (name === "shimmer") { const d = Math.abs(u + v * 0.15 - (fract(t * 0.6) * 1.8 - 0.4)); return params[0] + (1 - params[0]) * clamp01(1 - d / Math.max(params[1], 1e-4)); } if (name === "frame") { const [w, h] = size, x = u * w, y = v * h; const d = Math.min(x, w - x, y, h - y); return d < params[0] ? 1 - (0.6 * d) / params[0] : params[1]; } const px = u * aspect * params[0], py = v * params[0], z = t * 0.25; return 0.65 * vnoise(px, py, z) + 0.35 * vnoise(px * 2 + 17, py * 2 + 17, z * 2); } /** JS twin of the GLSL `cursorBump`. */ export function cursorBump(u: number, v: number, aspect: number, [x, y, strength, radius]: number[]): number { const dx = (u - x) * aspect, dy = v - y; return strength * 0.6 * Math.exp(-(dx * dx + dy * dy) / Math.max(radius * radius, 1e-6)); } 55:T9e5,import type { GlyphRampName } from "./types"; export const DEFAULT_FONT = '"JetBrains Mono", ui-monospace, monospace'; /** ASCII cell width ÷ height: the advance of a monospace glyph, so `█` tiles solid. `cell` is the height. */ export const GLYPH_ASPECT = 0.6; // Ordered background → foreground (sparse → dense), like palettes. // shortcut: katakana is the half-width block U+FF66–U+FF85 in code-point order, not sorted by ink coverage; // sort by measured coverage if it reads too noisy. export const RAMPS: Record = { standard: " .:-=+*#%@", blocks: " ░▒▓█", binary: "01", katakana: Array.from({ length: 32 }, (_, i) => String.fromCharCode(0xff66 + i)).join(""), }; /** Ramp characters, splitting by code point so surrogate pairs stay whole. */ export function rampGlyphs(glyphs: GlyphRampName | string): string[] { return [...(glyphs in RAMPS ? RAMPS[glyphs as GlyphRampName] : glyphs)]; } const clamp01 = (x: number) => Math.min(1, Math.max(0, x)); /** * One ASCII cell: glyph index into the ramp and palette band (1…n-1) for the foreground. * JS twin of the ASCII shader's cell logic. */ export function glyphCell(v: number, contrast: number, threshold: number, glyphs: number, colors: number) { const s = clamp01((v - 0.5) * contrast + 1 - threshold); return { glyph: Math.min(glyphs - 1, Math.floor(s * glyphs)), band: Math.min(colors - 1, 1 + Math.floor(s * (colors - 1))), }; } const atlases = new Map(); /** White-on-transparent strip of glyphs, one cellW × cellH box each; cached by font, cell size and ramp. */ export function glyphAtlas(glyphs: string[], cellW: number, cellH: number, font: string): HTMLCanvasElement { const key = `${font}|${cellW}x${cellH}|${glyphs.join("")}`; let atlas = atlases.get(key); if (!atlas) { atlas = document.createElement("canvas"); atlas.width = glyphs.length * cellW; atlas.height = cellH; const ctx = atlas.getContext("2d")!; ctx.font = `${cellH}px ${font}`; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillStyle = "#fff"; glyphs.forEach((g, i) => { ctx.save(); ctx.beginPath(); ctx.rect(i * cellW, 0, cellW, cellH); ctx.clip(); ctx.fillText(g, (i + 0.5) * cellW, cellH / 2); ctx.restore(); }); atlases.set(key, atlas); } return atlas; } /** Drop cached atlases (e.g. once a web font finishes loading). */ export function clearGlyphAtlases(): void { atlases.clear(); } 56:Tf4d,export type ImageStatus = "loading" | "ready" | "error"; interface Entry { image: HTMLImageElement; status: ImageStatus; listeners: Set<() => void>; values: Map; } const images = new Map(); /** Rec. 709 luma of RGBA bytes, 0–1 per pixel. */ export function luminance(rgba: Uint8ClampedArray): Float32Array { const out = new Float32Array(rgba.length / 4); for (let i = 0; i < out.length; i++) { out[i] = (0.2126 * rgba[i * 4] + 0.7152 * rgba[i * 4 + 1] + 0.0722 * rgba[i * 4 + 2]) / 255; } return out; } function entry(src: string, crossOrigin?: "anonymous"): Entry { const key = `${crossOrigin ?? ""}|${src}`; let e = images.get(key); if (!e) { const image = new Image(); const created: Entry = { image, status: "loading", listeners: new Set(), values: new Map() }; const settle = (status: ImageStatus) => { created.status = status; created.listeners.forEach((cb) => cb()); }; image.onload = () => settle("ready"); image.onerror = () => settle("error"); if (crossOrigin) image.crossOrigin = crossOrigin; image.src = src; images.set(key, (e = created)); } return e; } /** Load (once per src) and call back when its status changes; returns an unsubscribe. */ export function watchImage(src: string, crossOrigin: "anonymous" | undefined, onChange: () => void): () => void { const e = entry(src, crossOrigin); e.listeners.add(onChange); return () => e.listeners.delete(onChange); } /** * Luminance of the image cover-fitted to cols × rows marks, or the image's status while it can't be read. * Cached per size, so token changes never reload or re-sample it. */ export function imageValues(src: string, crossOrigin: "anonymous" | undefined, cols: number, rows: number, aspect: number): Float32Array | ImageStatus { const e = entry(src, crossOrigin); if (e.status !== "ready") return e.status; const key = `${cols}x${rows}x${aspect.toFixed(4)}`; let values = e.values.get(key); if (!values) { try { values = sample(e.image, e.image.naturalWidth, e.image.naturalHeight, cols, rows, aspect, false); } catch { // Tainted canvas (cross-origin image without CORS headers) or no 2D context: pixels can't be read. e.status = "error"; e.listeners.forEach((cb) => cb()); return "error"; } e.values.set(key, values); } return values; } /** Luminance of the video's current frame cover-fitted to cols × rows marks, or its status while it has no frame. */ export function videoValues(video: HTMLVideoElement, cols: number, rows: number, aspect: number): Float32Array | ImageStatus { if (video.error) return "error"; if (video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) return "loading"; try { return sample(video, video.videoWidth, video.videoHeight, cols, rows, aspect, true); } catch { return "error"; } } // Video reads back every frame, so it gets a CPU-backed canvas; images keep the default (GPU) resampling. const scratches = new Map(); /** Cover-fit a drawable into cols × rows: crop its longer side to the element's aspect. Throws if pixels can't be read. */ export function sample(source: CanvasImageSource, iw: number, ih: number, cols: number, rows: number, aspect: number, frequent: boolean): Float32Array { if (!scratches.has(frequent)) scratches.set(frequent, document.createElement("canvas").getContext("2d", { willReadFrequently: frequent })); const scratch = scratches.get(frequent); if (!scratch) throw new Error("no 2D context"); scratch.canvas.width = cols; scratch.canvas.height = rows; const sw = Math.min(iw, ih * aspect), sh = sw / aspect; scratch.imageSmoothingQuality = "high"; scratch.drawImage(source, (iw - sw) / 2, (ih - sh) / 2, sw, sh, 0, 0, cols, rows); return luminance(scratch.getImageData(0, 0, cols, rows).data); } 57:Ta79,import type { PaletteName } from "./types"; export type RGB = [number, number, number]; export type Scheme = "light" | "dark"; const PAPER = "#f2f0e9"; const INK = "#0a0a0a"; // Ordered background → foreground. `ink` flips with the colour scheme. export const INK_PALETTES: Record = { light: [PAPER, INK], dark: [INK, PAPER] }; export const PALETTES: Record = { ink: INK_PALETTES.dark, gameboy: ["#0f380f", "#306230", "#8bac0f", "#9bbc0f"], amber: ["#140b00", "#ffb000"], phosphor: ["#001408", "#33ff66"], cga: ["#000000", "#55ffff", "#ff55ff", "#ffffff"], riso: ["#f2efe6", "#ff48b0", "#0078bf", "#1a1a1a"], }; let probe: CanvasRenderingContext2D | null | undefined; // shortcut: hex and rgb() parse anywhere; other CSS colours go through canvas normalization, // which only works in a browser and only when it yields hex/rgb (not oklch); extend if users hit it. function parseColor(color: string): RGB | null { const c = color.trim().toLowerCase(); const hex = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/.exec(c)?.[1]; if (hex) { const full = hex.length <= 4 ? hex.replace(/./g, "$&$&") : hex; return [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2), 16)) as RGB; } const rgb = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/.exec(c); if (rgb) return [1, 2, 3].map((i) => Math.round(Math.min(255, Number(rgb[i])))) as RGB; if (probe === undefined) probe = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d"); if (!probe) return null; probe.fillStyle = "#010203"; probe.fillStyle = c; const normalized = probe.fillStyle; return normalized === "#010203" && c !== "#010203" ? null : /^(#|rgb)/.test(normalized) ? parseColor(normalized) : null; } /** Palette as CSS colours for a scheme; throws a clear error for invalid custom palettes. */ export function paletteColors(palette: PaletteName | string[], scheme: Scheme = "dark"): string[] { if (palette === "ink") return INK_PALETTES[scheme]; if (typeof palette === "string") { if (!(palette in PALETTES)) throw new Error(`dotgrain: unknown palette "${palette}"`); return PALETTES[palette]; } if (palette.length < 2 || palette.length > 4) { throw new Error(`dotgrain: palettes need 2–4 colours, got ${palette.length}`); } const bad = palette.find((c) => !parseColor(c)); if (bad !== undefined) throw new Error(`dotgrain: can't parse palette colour "${bad}"; use hex or rgb()`); return palette; } export function resolvePalette(palette: PaletteName | string[], scheme: Scheme = "dark"): RGB[] { return paletteColors(palette, scheme).map((c) => parseColor(c)!); } 58:T116f,import type { Pattern } from "./types"; /** n×n Bayer matrix (n a power of 2), row-major thresholds in (0, 1). */ export function bayer(n: number): Float32Array { let m = [0]; for (let s = 1; s < n; s *= 2) { const next: number[] = new Array(4 * s * s); for (let y = 0; y < s; y++) { for (let x = 0; x < s; x++) { const v = 4 * m[y * s + x]; next[y * 2 * s + x] = v; next[y * 2 * s + x + s] = v + 2; next[(y + s) * 2 * s + x] = v + 3; next[(y + s) * 2 * s + x + s] = v + 1; } } m = next; } return Float32Array.from(m, (v) => (v + 0.5) / (n * n)); } /** * size×size blue-noise threshold map via void-and-cluster (Ulichney 1993), deterministic. * Energy is a toroidal Gaussian; each pixel change updates every energy in O(n), so 64×64 is ~20M ops. */ export function blueNoise(size = 64, sigma = 1.5): Float32Array { const n = size * size; const kernel = new Float32Array(n); for (let y = 0; y < size; y++) { for (let x = 0; x < size; x++) { const dx = Math.min(x, size - x), dy = Math.min(y, size - y); kernel[y * size + x] = Math.exp(-(dx * dx + dy * dy) / (2 * sigma * sigma)); } } const on = new Uint8Array(n); const energy = new Float32Array(n); const toggle = (i: number, sign: number) => { on[i] = sign > 0 ? 1 : 0; const ix = i % size, iy = (i / size) | 0; for (let y = 0; y < size; y++) { const row = ((y - iy + size) % size) * size; for (let x = 0; x < size; x++) energy[y * size + x] += sign * kernel[row + ((x - ix + size) % size)]; } }; // Tightest cluster = highest-energy "on" pixel; largest void = lowest-energy "off" pixel. const extreme = (state: number, pickMax: boolean) => { let best = -1; for (let i = 0; i < n; i++) { if (on[i] === state && (best < 0 || (pickMax ? energy[i] > energy[best] : energy[i] < energy[best]))) best = i; } return best; }; let seed = 0x9e3779b9; const random = () => { seed = (seed + 0x6d2b79f5) | 0; let t = Math.imul(seed ^ (seed >>> 15), 1 | seed); t ^= t + Math.imul(t ^ (t >>> 7), 61 | t); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; const initial = Math.round(n * 0.1); for (let placed = 0; placed < initial; ) { const i = Math.floor(random() * n); if (!on[i]) (toggle(i, 1), placed++); } // Phase 0: move cluster pixels into voids until the prototype pattern is stable. for (;;) { const cluster = extreme(1, true); toggle(cluster, -1); const void_ = extreme(0, false); toggle(void_, 1); if (void_ === cluster) break; } const prototype = on.slice(), prototypeEnergy = energy.slice(); const rank = new Float32Array(n); // Phase 1: rank prototype pixels by removing tightest clusters. for (let r = initial - 1; r >= 0; r--) { const cluster = extreme(1, true); toggle(cluster, -1); rank[cluster] = r; } on.set(prototype); energy.set(prototypeEnergy); // Phase 2: fill the remaining pixels into the largest voids. for (let r = initial; r < n; r++) { const void_ = extreme(0, false); toggle(void_, 1); rank[void_] = r; } return rank.map((r) => (r + 0.5) / n); } export interface ThresholdMap { size: number; data: Float32Array; } const cache = new Map(); let warnedDiffusion = false; /** Threshold map for an ordered pattern, built on first use; diffusion patterns fall back to bayer4 here. */ export function thresholdMap(pattern: Pattern): ThresholdMap { if ((pattern === "atkinson" || pattern === "floyd") && !warnedDiffusion && process.env.NODE_ENV !== "production") { warnedDiffusion = true; console.warn(`dotgrain: pattern "${pattern}" only applies to still images; using "bayer4" instead.`); } const key = pattern === "bayer2" || pattern === "bayer8" || pattern === "blueNoise" ? pattern : "bayer4"; let map = cache.get(key); if (!map) { const size = key === "blueNoise" ? 64 : Number(key.slice(5)); cache.set(key, (map = { size, data: key === "blueNoise" ? blueNoise(size) : bayer(size) })); } return map; } /** Quantize a 0–1 value to a palette index of n levels against threshold t. */ export function level(v: number, contrast: number, threshold: number, t: number, n: number): number { const s = Math.min(1, Math.max(0, (v - 0.5) * contrast + 1 - threshold)) * (n - 1); const b = Math.floor(s); return Math.min(n - 1, b + (s - b > t ? 1 : 0)); } 59:T6a9,export type PlotType = "line" | "bar"; const cache = new WeakMap(); /** * Per-mark levels (row-major, top row first) for a series drawn into cols × rows marks. * Bars fill up to each value with a fractional top mark, so a ramp draws partial heights; lines join the points. */ export function plotValues(series: readonly number[], type: PlotType, cols: number, rows: number): Float32Array { const key = `${type}|${cols}x${rows}|${series.join()}`; const hit = cache.get(series); if (hit?.key === key) return hit.values; const values = new Float32Array(cols * rows); const n = series.length; const lo = Math.min(0, ...series), span = Math.max(...series) - lo || 1; // Height in marks at fractional index i, interpolated between points. const at = (i: number) => { const a = Math.min(n - 1, Math.floor(i)), b = Math.min(n - 1, a + 1); return ((series[a] + (series[b] - series[a]) * (i - a) - lo) / span) * rows; }; for (let x = 0; n && x < cols; x++) { const bar = type === "bar" ? at(Math.floor(((x + 0.5) / cols) * n)) : 0; // The line's extent across this column: both edges plus any data point (peak or trough) inside it. const i0 = (x / cols) * (n - 1), i1 = ((x + 1) / cols) * (n - 1); const ys = [at(i0), at(i1)]; for (let k = Math.ceil(i0); k <= i1; k++) ys.push(at(k)); const y0 = Math.min(...ys) - 0.5, y1 = Math.max(...ys) + 0.5; for (let b = 0; b < rows; b++) { const c = b + 0.5; values[(rows - 1 - b) * cols + x] = type === "bar" ? Math.min(1, Math.max(0, bar - b)) : c >= y0 && c <= y1 ? 1 : 0; } } cache.set(series, { key, values }); return values; } 5a:T6f1,export interface PointerTracker { /** Still easing toward the pointer, so the view needs more frames. */ settling(): boolean; /** Advance the easing; returns uv position and strength 0–1. */ step(seconds: number): [number, number, number]; dispose(): void; } /** Tracks the pointer (mouse, pen or touch) relative to an element and eases a soft spot toward it. */ export function trackPointer(element: Element, onChange: () => void): PointerTracker { let x = 0.5, y = 0.5, tx = 0.5, ty = 0.5, strength = 0, target = 0, last = 0; // Listen on window so content layered above the canvas doesn't swallow the events. const move = (e: PointerEvent) => { const r = element.getBoundingClientRect(); tx = (e.clientX - r.left) / r.width; ty = (e.clientY - r.top) / r.height; const inside = tx >= 0 && tx <= 1 && ty >= 0 && ty <= 1; if (!target && inside) [x, y] = [tx, ty]; target = inside ? 1 : 0; onChange(); }; const leave = () => { target = 0; onChange(); }; window.addEventListener("pointermove", move, { passive: true }); document.documentElement.addEventListener("pointerleave", leave); return { settling: () => Math.abs(strength - target) > 0.005 || Math.abs(x - tx) + Math.abs(y - ty) > 0.002, step(seconds) { // Frame-rate independent exponential ease; large gaps (tab switch) snap instead of lurching. const k = 1 - Math.exp(-Math.min(Math.max(seconds - last, 0), 0.1) * 10); last = seconds; x += (tx - x) * k; y += (ty - y) * k; strength += (target - strength) * k; return [x, y, strength]; }, dispose() { window.removeEventListener("pointermove", move); document.documentElement.removeEventListener("pointerleave", leave); }, }; } 5b:T109a,import { FIELD_GLSL } from "./fields"; // Full-screen triangle from gl_VertexID; no vertex buffers needed. export const VERTEX = `#version 300 es void main() { vec2 p = vec2((gl_VertexID << 1) & 2, gl_VertexID & 2); gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0); }`; // Mirrors cpu.ts: px is the top-left-origin mark coordinate, so the CPU and GPU // index the threshold map identically. uField < 0 reads per-mark image luminance from uValues. export const DITHER = `#version 300 es precision highp float; precision highp int; uniform vec2 uSize; uniform float uTime; uniform int uField; uniform vec4 uParams; uniform highp sampler2D uValues; uniform vec4 uCursor; uniform float uContrast; uniform float uThreshold; uniform vec3 uPalette[4]; uniform int uLevels; uniform highp sampler2D uPattern; out vec4 outColor; ${FIELD_GLSL} void main() { vec2 px = vec2(gl_FragCoord.x, uSize.y - gl_FragCoord.y); vec2 uv = px / uSize; float aspect = uSize.x / uSize.y; float v = (uField < 0 ? texelFetch(uValues, ivec2(px), 0).r : field(uField, uv, aspect, uTime, uParams)) + cursorBump(uv, aspect, uCursor); float t = texelFetch(uPattern, ivec2(px) % textureSize(uPattern, 0), 0).r; float s = clamp((v - 0.5) * uContrast + 1.0 - uThreshold, 0.0, 1.0) * float(uLevels - 1); float b = floor(s); int i = min(uLevels - 1, int(b) + (s - b > t ? 1 : 0)); outColor = vec4(uPalette[i] / 255.0, 1.0); }`; // One cell per mark: sample the source at the cell centre, pick a glyph by value and // mask the background → band colour with the glyph atlas. Mirrors glyphCell() in glyphs.ts. export const ASCII = `#version 300 es precision highp float; precision highp int; uniform vec2 uSize; uniform vec2 uCell; uniform float uAspect; uniform float uTime; uniform int uField; uniform vec4 uParams; uniform highp sampler2D uValues; uniform vec4 uCursor; uniform float uContrast; uniform float uThreshold; uniform vec3 uPalette[4]; uniform int uLevels; uniform int uGlyphs; uniform sampler2D uAtlas; out vec4 outColor; ${FIELD_GLSL} void main() { vec2 px = vec2(gl_FragCoord.x, uSize.y * uCell.y - gl_FragCoord.y); vec2 cell = floor(px / uCell); vec2 uv = (cell + 0.5) / uSize; float v = (uField < 0 ? texelFetch(uValues, ivec2(cell), 0).r : field(uField, uv, uAspect, uTime, uParams)) + cursorBump(uv, uAspect, uCursor); float s = clamp((v - 0.5) * uContrast + 1.0 - uThreshold, 0.0, 1.0); int glyph = min(uGlyphs - 1, int(floor(s * float(uGlyphs)))); int band = min(uLevels - 1, 1 + int(floor(s * float(uLevels - 1)))); vec2 local = (px - cell * uCell) / uCell; float mask = texture(uAtlas, vec2((float(glyph) + local.x) / float(uGlyphs), local.y)).a; outColor = vec4(mix(uPalette[0], uPalette[band], mask) / 255.0, 1.0); }`; export interface Program { program: WebGLProgram; uniforms: Record; } const cache = new WeakMap>(); function compile(gl: WebGL2RenderingContext, type: number, source: string): WebGLShader { const shader = gl.createShader(type)!; gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(`dotgrain: ${gl.getShaderInfoLog(shader)}`); return shader; } /** Compile (once per context) and return a program with its uniform locations. */ /** Forget compiled programs, e.g. after the context was lost and restored. */ export function clearPrograms(gl: WebGL2RenderingContext): void { cache.delete(gl); } export function getProgram(gl: WebGL2RenderingContext, fragment: string, uniforms: string[]): Program { let programs = cache.get(gl); if (!programs) cache.set(gl, (programs = new Map())); let p = programs.get(fragment); if (!p) { const program = gl.createProgram()!; gl.attachShader(program, compile(gl, gl.VERTEX_SHADER, VERTEX)); gl.attachShader(program, compile(gl, gl.FRAGMENT_SHADER, fragment)); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error(`dotgrain: ${gl.getProgramInfoLog(program)}`); p = { program, uniforms: Object.fromEntries(uniforms.map((u) => [u, gl.getUniformLocation(program, u)])) }; programs.set(fragment, p); } return p; } 5c:Te9e,"use client"; import { createContext, useContext, useSyncExternalStore, type ReactNode } from "react"; import type { Scheme } from "./palettes"; import type { DitherTokens } from "./types"; export type ColorScheme = Scheme | "system"; export const DEFAULT_TOKENS: DitherTokens = { mode: "dither", pattern: "bayer4", cell: 3, palette: "ink", glyphs: "standard", speed: 1, contrast: 1, threshold: 0.5, }; interface ProviderValue { tokens: Partial; colorScheme: ColorScheme; font?: string; } const DitherContext = createContext({ tokens: {}, colorScheme: "system" }); const defined = (o: T): Partial => Object.fromEntries(Object.entries(o).filter(([, v]) => v !== undefined)) as Partial; export type DitherProviderProps = Partial & { /** Scheme `ink` follows; `system` reads `` / `data-theme`, then the OS setting. */ colorScheme?: ColorScheme; /** Font family for ASCII glyphs. */ font?: string; children?: ReactNode; }; /** Sets tokens for a subtree; nested providers inherit and override. */ export function DitherProvider({ colorScheme, font, children, ...tokens }: DitherProviderProps) { const parent = useContext(DitherContext); const value: ProviderValue = { tokens: { ...parent.tokens, ...defined(tokens) }, colorScheme: colorScheme ?? parent.colorScheme, font: font ?? parent.font, }; return {children}; } /** Merge defaults, then provider tokens, then props; undefined props fall through. */ export function useDitherTokens(overrides: Partial): DitherTokens { const { tokens: provided } = useContext(DitherContext); const tokens = { ...DEFAULT_TOKENS, ...provided, ...defined(overrides) }; if (provided.cell === undefined && overrides.cell === undefined && tokens.mode === "ascii") tokens.cell = 10; return tokens; } /** Font family for ASCII glyphs set by the nearest provider, if any. */ export function useDitherFont(): string | undefined { return useContext(DitherContext).font; } function systemScheme(): Scheme { const html = document.documentElement; const theme = html.dataset.theme ?? (html.classList.contains("dark") ? "dark" : html.classList.contains("light") ? "light" : ""); if (theme === "dark" || theme === "light") return theme; return matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; } function subscribeScheme(onChange: () => void): () => void { const media = matchMedia("(prefers-color-scheme: dark)"); const observer = new MutationObserver(onChange); media.addEventListener("change", onChange); observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme"] }); return () => { media.removeEventListener("change", onChange); observer.disconnect(); }; } /** The provider's colour-scheme preference and the scheme it resolves to right now. */ export function useColorScheme(): { preference: ColorScheme; scheme: Scheme } { const { colorScheme } = useContext(DitherContext); const system = useSyncExternalStore(subscribeScheme, systemScheme, () => "light" as Scheme); return { preference: colorScheme, scheme: colorScheme === "system" ? system : colorScheme }; } const motion = () => matchMedia("(prefers-reduced-motion: reduce)"); const subscribeMotion = (cb: () => void) => { motion().addEventListener("change", cb); return () => motion().removeEventListener("change", cb); }; /** Live `prefers-reduced-motion: reduce`; false during SSR. */ export function useReducedMotion(): boolean { return useSyncExternalStore(subscribeMotion, () => motion().matches, () => false); } 5d:T1e01,"use client"; import { useEffect, useImperativeHandle, useRef, type CSSProperties, type Ref } from "react"; import { draw } from "./context"; import { diffused, isDiffusion } from "./diffusion"; import { createEaser, type Easer } from "./ease"; import { INK_PALETTES, paletteColors } from "./palettes"; import { GLYPH_ASPECT } from "./glyphs"; import { imageValues, videoValues, watchImage } from "./images"; import { plotValues } from "./plot"; import { revealAmount, revealed, scrambled, textValues } from "./text"; import { trackPointer, type PointerTracker } from "./pointer"; import { useColorScheme, useDitherFont, useDitherTokens } from "./provider"; import { getScheduler, type ViewHandle } from "./scheduler"; import type { DitherTokens, Source } from "./types"; export type QuantizeProps = Partial & { source: Source; /** Announces the canvas as one image; without it the canvas is decorative. */ label?: string; /** Brighten a soft spot under the pointer. Off under reduced motion. */ interactive?: boolean; /** Radius of the pointer spot in CSS pixels. */ cursorRadius?: number; /** Ease changes to the field's numeric params (e.g. a progress value) instead of jumping; snaps under reduced motion. */ ease?: boolean; /** Called when an image or video source can't be loaded or read (e.g. cross-origin media without CORS). */ onError?: () => void; className?: string; style?: CSSProperties; ref?: Ref; }; export function Quantize({ source, label, interactive = false, cursorRadius = 120, ease = false, onError, className, style, ref, ...overrides }: QuantizeProps) { const canvas = useRef(null); const merged = useDitherTokens(overrides); const { preference, scheme } = useColorScheme(); const colors = paletteColors(merged.palette, scheme); const tokens = { ...merged, palette: colors }; const font = useDitherFont(); // Painted before the first frame (and during SSR) so there is no flash; `ink` + system // follows the page's color-scheme via light-dark() because the server can't know it. const background = merged.palette === "ink" && preference === "system" ? `light-dark(${INK_PALETTES.light[0]}, ${INK_PALETTES.dark[0]})` : colors[0]; const latest = useRef({ source, tokens, cursorRadius, font, onError, ease }); const easer = useRef(null); const view = useRef(null); const pointer = useRef(null); useImperativeHandle(ref, () => canvas.current!, []); useEffect(() => { latest.current = { source, tokens, cursorRadius, font, onError, ease }; view.current?.invalidate(); }); const image = source.kind === "image" ? source : undefined; useEffect(() => { if (image) return watchImage(image.src, image.crossOrigin, () => view.current?.invalidate()); }, [image?.src, image?.crossOrigin]); // eslint-disable-line react-hooks/exhaustive-deps const video = source.kind === "video" ? source.element : undefined; useEffect(() => { if (!video) return; // Paused videos draw on demand: a new frame, seek, play (restarts the loop) or pause. const events = ["loadeddata", "seeked", "play", "pause", "error"]; const wake = () => view.current?.invalidate(); events.forEach((e) => video.addEventListener(e, wake)); return () => events.forEach((e) => video.removeEventListener(e, wake)); }, [video]); const text = source.kind === "text" ? source.element : undefined; useEffect(() => { if (!text) return; const observer = new MutationObserver(() => view.current?.invalidate()); observer.observe(text, { characterData: true, childList: true, subtree: true }); return () => observer.disconnect(); }, [text]); useEffect(() => { if (!interactive) return; const tracker = (pointer.current = trackPointer(canvas.current!, () => view.current?.invalidate())); return () => { tracker.dispose(); pointer.current = null; }; }, [interactive]); useEffect(() => { const element = canvas.current!; const handle = getScheduler().add({ element, animated: () => { const { source, tokens, ease } = latest.current; if (source.kind === "video" && !source.element.paused && !source.element.ended) return true; if (source.kind === "text" && source.scramble && tokens.speed > 0) return true; if (source.kind === "text" && source.reveal && performance.now() < source.reveal.start + source.reveal.duration) return true; if (source.kind !== "field") return !!pointer.current?.settling(); // radial, linear, progress and frame ignore time: they redraw only on change, pointer movement or easing. return ( (tokens.speed > 0 && !["radial", "linear", "progress", "frame"].includes(source.field)) || !!pointer.current?.settling() || (ease && !!source.params && !!easer.current?.settling(source.params)) ); }, render({ seconds, width, height, dpr, still }) { const { tokens, cursorRadius, font, onError, ease } = latest.current; let { source } = latest.current; if (ease && source.kind === "field" && source.params) { source = { ...source, params: (easer.current ??= createEaser()).step(source.params, seconds, still) }; } const w = Math.round(width / (tokens.mode === "ascii" ? tokens.cell * GLYPH_ASPECT : tokens.cell)); const h = Math.round(height / tokens.cell); const spot = pointer.current && !still ? pointer.current.step(seconds) : undefined; const cursor = spot && ([...spot, cursorRadius / height] as [number, number, number, number]); if (w <= 0 || h <= 0) return; let values: Float32Array | undefined; let indices: Uint8Array | undefined; if (source.kind !== "field") { const result = source.kind === "image" ? imageValues(source.src, source.crossOrigin, w, h, width / height) : source.kind === "video" ? videoValues(source.element, w, h, width / height) : source.kind === "plot" ? plotValues(source.series, source.type, w, h) : textValues(source.element, w, h); if (result === "error") onError?.(); if (typeof result === "string") return; // ~12 new scrambles a second at speed 1. values = source.kind === "text" && source.scramble ? scrambled(result, source.scramble, Math.floor(seconds * tokens.speed * 12)) : result; if (source.kind === "text" && source.reveal) values = revealed(values, revealAmount(source.reveal, seconds * 1000, still)); // Error diffusion is for still images; video falls back to an ordered pattern. if (source.kind === "image" && tokens.mode === "dither" && isDiffusion(tokens.pattern)) { const { pattern, contrast, threshold, palette } = tokens; indices = diffused(values, w, h, pattern, contrast, threshold, palette.length, () => view.current?.invalidate()); if (!indices) return; } } draw(element, { source, tokens, width: w, height: h, time: seconds * tokens.speed, cursor, dpr, font, values, indices }); }, }); view.current = handle; return handle.remove; }, []); return (