|
| 1 | +"use client"; |
| 2 | + |
| 3 | +/** |
| 4 | + * Home page ASCII "ridged mountains" background (issue #280) — a port of |
| 5 | + * ComputerK's CodePen (https://codepen.io/ComputerK/pen/jENaeKp) from p5.js |
| 6 | + * to a hand-rolled Canvas2D loop, matching how the rest of the app's |
| 7 | + * continuous animation (`ArkaikLogoBoil`, the wobble system) avoids |
| 8 | + * creative-coding/animation library dependencies. |
| 9 | + * |
| 10 | + * A grid of monospace ASCII characters is shaded by 4-octave ridged Perlin |
| 11 | + * noise (see `lib/background/perlin.ts`), which folds/cubes the noise field |
| 12 | + * into vein-like ridges that read as flowing terrain. The noise field pans |
| 13 | + * a little every rendered frame for a slow, living drift. Color is the |
| 14 | + * app's theme `--foreground` at a low, brightness-modulated alpha, so it |
| 15 | + * reads as a subtle backdrop in both light and dark mode rather than the |
| 16 | + * pen's stark white-on-black terminal look. |
| 17 | + */ |
| 18 | + |
| 19 | +import { useEffect, useRef } from "react"; |
| 20 | + |
| 21 | +import { perlin2 } from "@/lib/background/perlin"; |
| 22 | +import { |
| 23 | + AMP_MULTIPLIER, |
| 24 | + ASCII_CHARS, |
| 25 | + BRIGHTNESS_THRESHOLD, |
| 26 | + CHAR_SIZE, |
| 27 | + EDGE_DISTANCE, |
| 28 | + FRAME_RATE, |
| 29 | + FREQ_MULTIPLIER, |
| 30 | + INTRO_DURATION_MS, |
| 31 | + INTRO_START_FACTOR, |
| 32 | + MAX_OPACITY, |
| 33 | + NOISE_PAN_SPEED, |
| 34 | + NOISE_SCALE, |
| 35 | + OCTAVE_NUM, |
| 36 | +} from "@/lib/background/constants"; |
| 37 | + |
| 38 | +const FREQUENCIES = Array.from({ length: OCTAVE_NUM }, (_, i) => FREQ_MULTIPLIER ** i); |
| 39 | +const AMPLITUDES = Array.from({ length: OCTAVE_NUM }, (_, i) => AMP_MULTIPLIER ** i); |
| 40 | +const MAX_NOISE_VAL = AMPLITUDES.reduce((sum, amp) => sum + amp, 0); |
| 41 | +const FRAME_INTERVAL_MS = 1000 / FRAME_RATE; |
| 42 | + |
| 43 | +function clamp(value: number, lo: number, hi: number): number { |
| 44 | + return Math.min(hi, Math.max(lo, value)); |
| 45 | +} |
| 46 | + |
| 47 | +function mapRange(value: number, inMin: number, inMax: number, outMin: number, outMax: number): number { |
| 48 | + return outMin + ((value - inMin) * (outMax - outMin)) / (inMax - inMin); |
| 49 | +} |
| 50 | + |
| 51 | +/** Slow start, slow finish, quicker through the middle — a natural-feeling reveal. */ |
| 52 | +function smoothstep(t: number): number { |
| 53 | + const c = clamp(t, 0, 1); |
| 54 | + return c * c * (3 - 2 * c); |
| 55 | +} |
| 56 | + |
| 57 | +/** Opacity multiplier for the mount-time intro: soft → full contrast. */ |
| 58 | +function introOpacityScale(elapsedMs: number): number { |
| 59 | + if (elapsedMs >= INTRO_DURATION_MS) return 1; |
| 60 | + const t = smoothstep(elapsedMs / INTRO_DURATION_MS); |
| 61 | + return INTRO_START_FACTOR + (1 - INTRO_START_FACTOR) * t; |
| 62 | +} |
| 63 | + |
| 64 | +/** Ridged noise: folds/cubes a smooth field into vein-like ridges. */ |
| 65 | +function getRidgedNoise(x: number, y: number, offsetX: number, offsetY: number): number { |
| 66 | + let noiseVal = 0; |
| 67 | + for (let i = 0; i < OCTAVE_NUM; i++) { |
| 68 | + const frequency = FREQUENCIES[i]; |
| 69 | + const amplitude = AMPLITUDES[i]; |
| 70 | + const raw = perlin2( |
| 71 | + x * frequency * NOISE_SCALE + offsetX, |
| 72 | + y * frequency * NOISE_SCALE + offsetY, |
| 73 | + ); |
| 74 | + const p01 = clamp((raw + 1) / 2, 0, 1); |
| 75 | + let n = 1 - Math.abs(p01); |
| 76 | + n = 1 - Math.abs(n * 2 - 1); |
| 77 | + n = n * n * n; |
| 78 | + noiseVal += n * amplitude; |
| 79 | + } |
| 80 | + return noiseVal / MAX_NOISE_VAL; |
| 81 | +} |
| 82 | + |
| 83 | +/** Parses this app's `H S% L%` custom-property triples into `[r, g, b]`. */ |
| 84 | +function hslTripleToRgb(triple: string): [number, number, number] { |
| 85 | + const [h, s, l] = triple |
| 86 | + .trim() |
| 87 | + .split(/\s+/) |
| 88 | + .map((part) => parseFloat(part)); |
| 89 | + const sFrac = (s || 0) / 100; |
| 90 | + const lFrac = (l || 0) / 100; |
| 91 | + |
| 92 | + if (sFrac === 0) { |
| 93 | + const gray = Math.round(lFrac * 255); |
| 94 | + return [gray, gray, gray]; |
| 95 | + } |
| 96 | + |
| 97 | + const q = lFrac < 0.5 ? lFrac * (1 + sFrac) : lFrac + sFrac - lFrac * sFrac; |
| 98 | + const p = 2 * lFrac - q; |
| 99 | + const hueToRgb = (t: number) => { |
| 100 | + let tt = t; |
| 101 | + if (tt < 0) tt += 1; |
| 102 | + if (tt > 1) tt -= 1; |
| 103 | + if (tt < 1 / 6) return p + (q - p) * 6 * tt; |
| 104 | + if (tt < 1 / 2) return q; |
| 105 | + if (tt < 2 / 3) return p + (q - p) * (2 / 3 - tt) * 6; |
| 106 | + return p; |
| 107 | + }; |
| 108 | + const hFrac = (h || 0) / 360; |
| 109 | + return [ |
| 110 | + Math.round(hueToRgb(hFrac + 1 / 3) * 255), |
| 111 | + Math.round(hueToRgb(hFrac) * 255), |
| 112 | + Math.round(hueToRgb(hFrac - 1 / 3) * 255), |
| 113 | + ]; |
| 114 | +} |
| 115 | + |
| 116 | +export function AsciiTerrainBackground({ className }: { className?: string }) { |
| 117 | + const canvasRef = useRef<HTMLCanvasElement>(null); |
| 118 | + |
| 119 | + useEffect(() => { |
| 120 | + const canvas = canvasRef.current; |
| 121 | + const ctx = canvas?.getContext("2d"); |
| 122 | + if (!canvas || !ctx) return; |
| 123 | + |
| 124 | + const fontFamily = `${getComputedStyle(document.documentElement).getPropertyValue("--font-geist-mono").trim() || "ui-monospace"}, monospace`; |
| 125 | + |
| 126 | + let cols = 0; |
| 127 | + let rows = 0; |
| 128 | + let noiseCache = new Float32Array(0); |
| 129 | + let fadeCache = new Float32Array(0); |
| 130 | + let offsetX = 0; |
| 131 | + let offsetY = 0; |
| 132 | + let rgb: [number, number, number] = [0, 0, 0]; |
| 133 | + let rafId = 0; |
| 134 | + let lastFrameTime = 0; |
| 135 | + let resizePending = false; |
| 136 | + let reduced = false; |
| 137 | + let lastCssWidth = -1; |
| 138 | + let lastCssHeight = -1; |
| 139 | + |
| 140 | + const readColor = () => { |
| 141 | + rgb = hslTripleToRgb(getComputedStyle(document.documentElement).getPropertyValue("--foreground")); |
| 142 | + }; |
| 143 | + |
| 144 | + const setupContext = () => { |
| 145 | + ctx.font = `${CHAR_SIZE}px ${fontFamily}`; |
| 146 | + ctx.textAlign = "center"; |
| 147 | + ctx.textBaseline = "middle"; |
| 148 | + }; |
| 149 | + |
| 150 | + const updateNoiseCache = () => { |
| 151 | + for (let col = 0; col < cols; col++) { |
| 152 | + for (let row = 0; row < rows; row++) { |
| 153 | + noiseCache[col * rows + row] = getRidgedNoise(col, row, offsetX, offsetY); |
| 154 | + } |
| 155 | + } |
| 156 | + }; |
| 157 | + |
| 158 | + const render = (opacityScale = 1) => { |
| 159 | + const cssWidth = canvas.clientWidth; |
| 160 | + const cssHeight = canvas.clientHeight; |
| 161 | + ctx.clearRect(0, 0, cssWidth, cssHeight); |
| 162 | + |
| 163 | + const half = CHAR_SIZE / 2; |
| 164 | + let currentAlpha = -1; |
| 165 | + const [r, g, b] = rgb; |
| 166 | + |
| 167 | + for (let col = 0; col < cols; col++) { |
| 168 | + const x = col * CHAR_SIZE + half; |
| 169 | + for (let row = 0; row < rows; row++) { |
| 170 | + const index = col * rows + row; |
| 171 | + const fadeFactor = fadeCache[index]; |
| 172 | + if (fadeFactor < BRIGHTNESS_THRESHOLD) continue; |
| 173 | + |
| 174 | + let noiseVal = clamp(mapRange(noiseCache[index], 0, 1, -0.2, 1.2), 0, 1); |
| 175 | + noiseVal = Math.pow(noiseVal, 1.5); |
| 176 | + const alpha = Math.pow(noiseVal, 0.8) * MAX_OPACITY * opacityScale * fadeFactor; |
| 177 | + |
| 178 | + if (Math.abs(alpha - currentAlpha) > 1 / 255) { |
| 179 | + ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${alpha.toFixed(3)})`; |
| 180 | + currentAlpha = alpha; |
| 181 | + } |
| 182 | + |
| 183 | + const charIndex = Math.floor(mapRange(noiseVal, 0, 1, 0, ASCII_CHARS.length - 0.01)); |
| 184 | + const y = row * CHAR_SIZE + half; |
| 185 | + ctx.fillText(ASCII_CHARS[charIndex], x, y); |
| 186 | + } |
| 187 | + } |
| 188 | + }; |
| 189 | + |
| 190 | + const mountTime = performance.now(); |
| 191 | + |
| 192 | + const frame = (time: number) => { |
| 193 | + rafId = requestAnimationFrame(frame); |
| 194 | + if (time - lastFrameTime < FRAME_INTERVAL_MS) return; |
| 195 | + lastFrameTime = time; |
| 196 | + |
| 197 | + updateNoiseCache(); |
| 198 | + render(introOpacityScale(time - mountTime)); |
| 199 | + offsetX += NOISE_PAN_SPEED; |
| 200 | + offsetY += NOISE_PAN_SPEED; |
| 201 | + }; |
| 202 | + |
| 203 | + const start = () => { |
| 204 | + cancelAnimationFrame(rafId); |
| 205 | + if (reduced) { |
| 206 | + updateNoiseCache(); |
| 207 | + render(); |
| 208 | + } else { |
| 209 | + lastFrameTime = 0; |
| 210 | + rafId = requestAnimationFrame(frame); |
| 211 | + } |
| 212 | + }; |
| 213 | + |
| 214 | + // Setting canvas.width/height always clears the bitmap, even to the same |
| 215 | + // value — guard on an actual size change so the animation loop's own |
| 216 | + // repaint (or, under reduced motion, an explicit re-render below) is the |
| 217 | + // only thing that ever touches pixels once sized. |
| 218 | + const resize = () => { |
| 219 | + const dpr = window.devicePixelRatio || 1; |
| 220 | + const cssWidth = Math.max(1, Math.round(canvas.clientWidth)); |
| 221 | + const cssHeight = Math.max(1, Math.round(canvas.clientHeight)); |
| 222 | + if (cssWidth === lastCssWidth && cssHeight === lastCssHeight) return; |
| 223 | + lastCssWidth = cssWidth; |
| 224 | + lastCssHeight = cssHeight; |
| 225 | + |
| 226 | + canvas.width = Math.round(cssWidth * dpr); |
| 227 | + canvas.height = Math.round(cssHeight * dpr); |
| 228 | + ctx.setTransform(dpr, 0, 0, dpr, 0, 0); |
| 229 | + setupContext(); |
| 230 | + |
| 231 | + cols = Math.floor(cssWidth / CHAR_SIZE); |
| 232 | + rows = Math.floor(cssHeight / CHAR_SIZE); |
| 233 | + noiseCache = new Float32Array(cols * rows); |
| 234 | + fadeCache = new Float32Array(cols * rows); |
| 235 | + |
| 236 | + const half = CHAR_SIZE / 2; |
| 237 | + for (let col = 0; col < cols; col++) { |
| 238 | + const x = col * CHAR_SIZE + half; |
| 239 | + const fadeX = clamp(Math.min(x, cssWidth - x) / EDGE_DISTANCE, 0, 1); |
| 240 | + for (let row = 0; row < rows; row++) { |
| 241 | + const y = row * CHAR_SIZE + half; |
| 242 | + const fadeY = clamp(Math.min(y, cssHeight - y) / EDGE_DISTANCE, 0, 1); |
| 243 | + fadeCache[col * rows + row] = fadeX * fadeY; |
| 244 | + } |
| 245 | + } |
| 246 | + |
| 247 | + // The animation loop repaints on its own next tick; under reduced |
| 248 | + // motion nothing else will, so re-render the static frame now. |
| 249 | + if (reduced) { |
| 250 | + updateNoiseCache(); |
| 251 | + render(); |
| 252 | + } |
| 253 | + }; |
| 254 | + |
| 255 | + const scheduleResize = () => { |
| 256 | + if (resizePending) return; |
| 257 | + resizePending = true; |
| 258 | + requestAnimationFrame(() => { |
| 259 | + resizePending = false; |
| 260 | + resize(); |
| 261 | + }); |
| 262 | + }; |
| 263 | + |
| 264 | + readColor(); |
| 265 | + resize(); |
| 266 | + |
| 267 | + const resizeObserver = new ResizeObserver(scheduleResize); |
| 268 | + resizeObserver.observe(canvas); |
| 269 | + |
| 270 | + const themeObserver = new MutationObserver(readColor); |
| 271 | + themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); |
| 272 | + |
| 273 | + const reducedMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)"); |
| 274 | + const applyReducedMotion = () => { |
| 275 | + reduced = reducedMotionQuery.matches; |
| 276 | + start(); |
| 277 | + }; |
| 278 | + applyReducedMotion(); |
| 279 | + reducedMotionQuery.addEventListener("change", applyReducedMotion); |
| 280 | + |
| 281 | + return () => { |
| 282 | + cancelAnimationFrame(rafId); |
| 283 | + resizeObserver.disconnect(); |
| 284 | + themeObserver.disconnect(); |
| 285 | + reducedMotionQuery.removeEventListener("change", applyReducedMotion); |
| 286 | + }; |
| 287 | + }, []); |
| 288 | + |
| 289 | + return ( |
| 290 | + <canvas |
| 291 | + ref={canvasRef} |
| 292 | + aria-hidden="true" |
| 293 | + className={className ?? "pointer-events-none absolute inset-0 h-full w-full"} |
| 294 | + /> |
| 295 | + ); |
| 296 | +} |
0 commit comments