Sketch perf pass: DPR caps, integer hash, single-sample caustics

- LobbySketch: cap DPR at 1.5, clamp dt on tab-refocus, hoist
  strokeStyle/lineWidth out of the ring loop (globalAlpha for per-ring
  opacity) to kill per-frame rgba() string allocations
- SmokeSketch: grid 26k→18k cells, swap sin-based hash for integer
  xorshift-style (Math.imul) — ~576k sin/frame gone
- ClinamenSketch: cap DPR at 1.5 (fragment shader is the bottleneck)
- clinamen.frag.glsl: collapse 3 position-shifted laplacians into one
  5-tap stencil with per-channel scale — 19 surfaceHeight() calls/pixel
  down to 5, dispersion was invisible at final caustic blend anyway
- Small copy fixes: trailing period on Clinamen summary, date 04-19→04-20

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: RuitingMa

src/components/ClinamenSketch.astro

@@ -346,7 +346,9 @@
     // --- Resize ---
     let aspect = 1.0;
     function resize() {
-      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      // Capped at 1.5 (not the usual 2) — fragment shader is the bottleneck
+      // and water ripple at native 2× buys ~no visual fidelity over 1.5×.
+      const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
       const rect = canvas!.getBoundingClientRect();
       const w = Math.max(1, Math.floor(rect.width * dpr));
       const h = Math.max(1, Math.floor(rect.height * dpr));

src/components/LobbySketch.astro

@@ -21,7 +21,10 @@
     if (!canvas) return;
 
     const ctx = canvas.getContext('2d')!;
-    const dpr = window.devicePixelRatio || 1;
+    // Cap at 1.5: this sketch is pure 2D canvas (cheap), but on 4K displays
+    // at DPR=2 the fillRect per frame + arc strokes at 4× pixel area add up
+    // to enough GC/raster churn to cause visible hitches on integrated GPUs.
+    const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
     let w = 0, h = 0;
 
     function resize() {
@@ -103,20 +106,21 @@
         { cx: w * 0.68, cy: h * 0.66, age: 0.62 },
         { cx: w * 0.52, cy: h * 0.22, age: 0.18 },
       ];
+      ctx.strokeStyle = '#E6E2D6';
+      ctx.lineWidth = 0.7;
       for (const r of frozen) {
         for (let k = 0; k < RING_COUNT; k++) {
           const ringAge = r.age - k * RING_STAGGER;
           if (ringAge <= 0 || ringAge >= 1) continue;
           const eased = easeOut(ringAge);
           const radius = eased * maxR;
-          const alpha = Math.sin(ringAge * Math.PI) * 0.34 * (1 - k * 0.18);
-          ctx.strokeStyle = `rgba(230, 226, 214, ${alpha})`;
-          ctx.lineWidth = 0.7;
+          ctx.globalAlpha = Math.sin(ringAge * Math.PI) * 0.34 * (1 - k * 0.18);
           ctx.beginPath();
           ctx.arc(r.cx, r.cy, radius, 0, Math.PI * 2);
           ctx.stroke();
         }
       }
+      ctx.globalAlpha = 1;
       currentCleanup = () => {
         aborted = true;
         window.removeEventListener('stage:heat', onHeat);
@@ -133,7 +137,12 @@
       rafId = requestAnimationFrame(frame);
 
       const now = performance.now();
-      const dt = now - lastNow;
+      // Cap dt at 100ms so returning from a backgrounded tab doesn't dump
+      // `t` forward by seconds — which would (a) burst-spawn a pile of
+      // ripples in one frame via the while-loop below, and (b) age every
+      // active ripple past its lifetime instantly.
+      let dt = now - lastNow;
+      if (dt > 100) dt = 100;
       lastNow = now;
       if (!paused) t += dt;
 
@@ -148,6 +157,12 @@
         nextSpawnAt = t + gap;
       }
 
+      // Stroke color is constant; per-ring alpha goes through globalAlpha
+      // so we aren't allocating a fresh `rgba(...)` string each ring each
+      // frame (~1000/s on a busy frame) — those were the main GC hitches.
+      ctx.strokeStyle = '#E6E2D6';
+      ctx.lineWidth = 0.7;
+
       for (let i = ripples.length - 1; i >= 0; i--) {
         const r = ripples[i];
         const baseAge = (t - r.born) / LIFETIME;
@@ -164,13 +179,13 @@
           const radius = eased * maxR * r.strength;
           const alpha = Math.sin(ringAge * Math.PI) * 0.34 * (1 - k * 0.18) * r.strength;
 
-          ctx.strokeStyle = `rgba(230, 226, 214, ${alpha})`;
-          ctx.lineWidth = 0.7;
+          ctx.globalAlpha = alpha;
           ctx.beginPath();
           ctx.arc(r.cx, r.cy, radius, 0, Math.PI * 2);
           ctx.stroke();
         }
       }
+      ctx.globalAlpha = 1;
     }
     frame();
 

src/components/SmokeSketch.astro

@@ -33,8 +33,10 @@
     let w = 0, h = 0;
 
     // Grid resolution, preserving canvas aspect ratio. Recomputed on
-    // resize. The offscreen buffer is reallocated to match.
-    const TARGET_CELLS = 26000;
+    // resize. The offscreen buffer is reallocated to match. 18k cells
+    // (was 26k) — the upscale blit hides the coarser grid, and both
+    // passes (velocity + advection) scale linearly in cell count.
+    const TARGET_CELLS = 18000;
     let GW = 0, GH = 0;
     let cellW = 0, cellH = 0;
 
@@ -83,9 +85,16 @@
     }
     resize();
 
+    // Integer hash (xorshift-style) — replaces the previous sin-based hash.
+    // Called ~32×/cell on the velocity pass (fbm → noise → hash), so at
+    // 18k cells that's ~576k Math.sin calls/frame. Integer ops are 5-10×
+    // faster in V8. `| 0` floors into int32; the shifts and multiplies
+    // stay in SMI range until the final normalize.
     const hash = (x: number, y: number) => {
-      const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;
-      return s - Math.floor(s);
+      let h = ((x | 0) * 374761393 + (y | 0) * 668265263) | 0;
+      h = Math.imul(h ^ (h >>> 13), 1274126177);
+      h = h ^ (h >>> 16);
+      return (h >>> 0) / 4294967295;
     };
     const smoothstep = (t: number) => t * t * (3 - 2 * t);
     const noise = (x: number, y: number) => {

src/pages/index.astro

@@ -8,7 +8,7 @@ const sketches = [
     title: 'Clinamen',
     date: '2026-04-20',
     kind: 'AUDIO · GENERATIVE',
-    summary: '河灯散布于水面',
+    summary: '河灯散布于水面。',
   },
   {
     slug: 'smoke',

src/pages/sketches/clinamen.astro

@@ -10,7 +10,7 @@ import ClinamenSketch from '../../components/ClinamenSketch.astro';
     <p class="breadcrumb enter" style="--i: 0;"><a href="/" class="writ">← 眠海</a></p>
 
     <h1 class="enter" style="--i: 1;">Clinamen</h1>
-    <p class="meta enter" style="--i: 2;">2026-04-19 · AUDIO · GENERATIVE</p>
+    <p class="meta enter" style="--i: 2;">2026-04-20 · AUDIO · GENERATIVE</p>
 
     <p class="enter" style="--i: 3;">
       两千年前 Lucretius 替 Epicurus 翻译过一个词——clinamen，“偶微偏”。所以世界啊，你被如此设想：你诞生于一次次平行下落的虚空里原子的不可预测偏斜。没有偏斜，就不会有碰撞；没有碰撞，就不存在世界。

src/shaders/clinamen.frag.glsl

@@ -104,44 +104,29 @@ float surfaceHeight(vec2 p, float t) {
   return h;
 }
 
-vec2 surfaceGradient(vec2 p, float t) {
-  float l = surfaceHeight(p - vec2(EPS, 0.0), t);
-  float r = surfaceHeight(p + vec2(EPS, 0.0), t);
-  float d = surfaceHeight(p - vec2(0.0, EPS), t);
-  float u = surfaceHeight(p + vec2(0.0, EPS), t);
-  return vec2(r - l, u - d) / (2.0 * EPS);
-}
-
-float surfaceLaplacian(vec2 p, float t) {
-  float c = surfaceHeight(p, t);
-  float l = surfaceHeight(p - vec2(EPS, 0.0), t);
-  float r = surfaceHeight(p + vec2(EPS, 0.0), t);
-  float d = surfaceHeight(p - vec2(0.0, EPS), t);
-  float u = surfaceHeight(p + vec2(0.0, EPS), t);
-  return (l + r + d + u - 4.0 * c) / (EPS * EPS);
-}
-
 void main() {
   vec2 aspect = vec2(u_resolution.x / u_resolution.y, 1.0);
   vec2 uv = vec2(v_uv.x, 1.0 - v_uv.y);
   vec2 p = uv * aspect;
   float t = u_time;
 
-  // ---- Caustics with dispersion ----
-  // Caustic strength cut hard — earlier passes had the pool lit up with
-  // bright bands even in rest, which fought the lantern halos and made
-  // the water feel "processed". Now the caustic is a subtle whisper on
-  // the water surface; you read it more as "the water is alive" than
-  // as a distinct optical feature. Per-channel scales roughly halved
-  // from the previous tune.
-  vec2 g = surfaceGradient(p, t);
-  float lapR = surfaceLaplacian(p + g *  0.005, t);
-  float lapG = surfaceLaplacian(p,              t);
-  float lapB = surfaceLaplacian(p - g *  0.005, t);
+  // ---- Caustics (single-sample laplacian, per-channel scale) ----
+  // Previous version sampled 3 position-shifted laplacians for chromatic
+  // dispersion — 19 surfaceHeight() calls per pixel, each looping through
+  // all active ripples. Collapsed to one 5-tap stencil (4x cheaper at
+  // 24-ripple load) and kept chromatic flavor via per-channel multiplier
+  // only. The position-shift dispersion was invisible once caustic blend
+  // dropped to 0.18 anyway.
+  float hC = surfaceHeight(p,                       t);
+  float hL = surfaceHeight(p - vec2(EPS, 0.0),      t);
+  float hR = surfaceHeight(p + vec2(EPS, 0.0),      t);
+  float hD = surfaceHeight(p - vec2(0.0, EPS),      t);
+  float hU = surfaceHeight(p + vec2(0.0, EPS),      t);
+  float lap = (hL + hR + hD + hU - 4.0 * hC) / (EPS * EPS);
   vec3 causticPattern = clamp(vec3(
-    1.0 - lapR * 0.0013,
-    1.0 - lapG * 0.0014,
-    1.0 - lapB * 0.0016
+    1.0 - lap * 0.0013,
+    1.0 - lap * 0.0014,
+    1.0 - lap * 0.0016
   ), 0.0, 2.0);
 
   // ---- Base water ----