Upload index.html

index.html

@@ -85,8 +85,9 @@ function genKoiPatches(type) {
 }
 let fishes = [], bubbles = [], seaweeds = [], motes = [], rays = [], rocks = [], grass = [], fgGrass = [];
 let curNight = 0; // v7: shared night factor (dims the top-light + sheen)
-let plantPoints = []; // collision points along every stalk/branch, rebuilt each frame
+let plantPoints = [], _ppUsed = 0; // collision points — a pooled set, reused in place
 let sandHeights = [];
+let sandParticles = []; // v22: grains of sand kicked up when a fast fish skims the sea floor
 
 class Fish {
   constructor() {
@@ -865,6 +866,8 @@ function buildScene() {
   rays = [];
   rocks = [];
   sandHeights = [];
+  sandParticles = []; // v22: fresh bed, no leftover grains
+  raySpritesBuiltFor = null; // v23: beam sprites are sized to the old canvas — rebuild them
   grass = []; // v10.1: clear on rebuild so resize/F11 doesn't stack a second row
   fgGrass = []; // v12: same reset for the foreground layer (resize/F11 safety)
 
@@ -929,7 +932,9 @@ function buildScene() {
         off: new Float32Array(9),   // lateral bend per segment (fish push leaves aside)
         offV: new Float32Array(9),  // velocity of that bend
         branches: [],
-        points: []
+        // PERF: stalk points preallocated once — updatePlants reuses these objects
+        // in place instead of pushing fresh {x,y} pairs every frame (GC churn)
+        points: Array.from({ length: 9 }, () => ({ x: 0, y: 0 })) // segs+1; can't read st inside its own initializer
       };
       const nBr = 1 + ((Math.random() * 3) | 0); // 1..3 branches per stalk
       for (let k = 0; k < nBr; k++) {
@@ -971,6 +976,7 @@ function buildScene() {
     const baseHue = rand(95, 155);
     const blades = 2 + ((Math.random() * 4) | 0); // 2..5 blades per tuft
     for (let b = 0; b < blades; b++) {
+      const bladeSegs = 3 + ((Math.random() * 2) | 0); // 3-4 segments for tapered outline
       grass.push({
         x: gx + rand(-7, 7),
         y: gy,
@@ -985,11 +991,14 @@ function buildScene() {
         cA1: rand(-5, 5),                  // primary bend amplitude
         cF1: rand(2.2, 4.5),               // frequency along blade length
         cP1: rand(0, Math.PI * 2),         // phase offset
-        segs: 3 + ((Math.random() * 2) | 0), // 3-4 segments for tapered outline
+        segs: bladeSegs,                   // 3-4 segments for tapered outline
         // v17: secondary wobble - finer inner shimmer per blade
         sAmp: rand(1.5, 3.5),
         sFreq: rand(4.5, 8),
-        sPh: rand(0, Math.PI * 2)
+        sPh: rand(0, Math.PI * 2),
+        // PERF: per-blade scratch points — drawGrass reuses them instead of
+        // allocating a fresh pts array + point objects every frame (GC churn)
+        pts: Array.from({ length: bladeSegs + 1 }, () => ({ x: 0, y: 0 }))
       });
     }
   }
@@ -1005,6 +1014,7 @@ function buildScene() {
     const baseHue = rand(46, 76); // v12.1: yellowish-green — pops against the mid-ground green grass
     const nBlades = 3 + ((Math.random() * 4) | 0); // 3..6 blades per clump
     for (let b = 0; b < nBlades; b++) {
+      const fgSegs = 4 + ((Math.random() * 2) | 0); // 4-5 segments for tapered outline
       fgGrass.push({
         x: cx + rand(-7.5, 7.5),       // 50%: tighter clumps (was -15..15)
         y: clusterBaseY + rand(-2, 4), // 50%: finer vertical jitter (was -4..8)
@@ -1018,15 +1028,23 @@ function buildScene() {
         cA1: rand(-8, 8),              // primary bend amplitude (larger for foreground)
         cF1: rand(2, 4),               // frequency along blade length
         cP1: rand(0, Math.PI * 2),     // phase offset
-        segs: 4 + ((Math.random() * 2) | 0), // 4-5 segments for tapered outline
+        segs: fgSegs,                  // 4-5 segments for tapered outline
         // v17: secondary wobble - finer inner shimmer per blade (foreground)
         sAmp: rand(2, 4.5),
         sFreq: rand(3.8, 6.5),
-        sPh: rand(0, Math.PI * 2)
+        sPh: rand(0, Math.PI * 2),
+        // PERF: per-blade scratch points — drawFgGrass reuses them in place
+        pts: Array.from({ length: fgSegs + 1 }, () => ({ x: 0, y: 0 }))
       });
     }
   }
 
+  // PERF: pool the plantPoints collision objects too — updatePlants reuses them
+  // in place instead of allocating one per stalk/branch point every frame.
+  let pcap = 8;
+  for (const w of seaweeds) pcap += (w.segs + 1) + w.branches.length * 2;
+  while (plantPoints.length < pcap) plantPoints.push({ x: 0, y: 0, r: 0, s: null });
+
   const nFish = Math.max(7, Math.floor(W / 130));
   for (let i = 0; i < nFish; i++) fishes.push(new Fish());
 
@@ -1038,9 +1056,9 @@ function buildScene() {
   }
 
   for (let i = 0; i < 5; i++) {
-    // random blur state: ~3px (semi-blurry), ~7px (blurry), or ~14px (very blurry) for visual variety
+    // random blur state: ~3.75px (semi-blurry), ~8.75px (blurry), or ~17.5px (very blurry) for visual variety
     const blurRoll = Math.random();
-    const blur = blurRoll < 0.34 ? 3 : (blurRoll < 0.67 ? 7 : 14);
+    const blur = blurRoll < 0.34 ? 3.75 : (blurRoll < 0.67 ? 8.75 : 17.5);
     rays.push({
       x: rand(0, W), w: rand(80, 210), tilt: rand(-0.35, 0.35),
       speed: rand(0.06, 0.14) * (Math.random() < 0.5 ? 1 : -1), alpha: rand(0.04, 0.09), blur,
@@ -1140,73 +1158,145 @@ function drawBackground(light) {
   ctx.fillRect(0, 0, W, H);
 }
 
-// PERF: shared scratch arrays for drawRays. The beam spines used to allocate fresh
-// point arrays — plus ~72 tiny [x,y] pairs per ray, per frame. Rendering is sequential,
-// so one set of preallocated slots serves every ray with zero per-frame allocation.
-const RAY_SEGS = 18; // vertical resolution of each beam's undulating spine
-const _rayL = [], _rayR = [], _rayLC = [], _rayRC = [];
-for (let i = 0; i <= RAY_SEGS; i++) {
-  _rayL.push([0, 0]); _rayR.push([0, 0]); _rayLC.push([0, 0]); _rayRC.push([0, 0]);
-}
-
-function drawRays(t, light) {
-  const [rr, rg, rb] = light.ray;
-  const segs = RAY_SEGS;
+// ============ Light rays — pre-blurred sprites (v23 fast path) ============
+// The old version applied a canvas blur() filter to every beam on every frame;
+// canvas filters force slow CPU rasterization over large regions, which tanked FPS.
+// Now each beam's shape is rendered ONCE into its own offscreen sprite (blur + the
+// vertical fade baked in at build time), and per frame we just blit that sprite in
+// horizontal slices with the same undulation offsets as before — wobble + soft
+// edges, zero filters at runtime.
+const RAY_SEGS = 18;          // vertical resolution of each beam's spine (at build time)
+const RAY_SLICES = 24;        // horizontal slices per beam used for the wobble (per frame)
+const RAY_SPRITE_SCALE = 0.5; // sprites stored at half resolution → softer + cheaper
+const RAY_PAD = 60;           // room for the blur to spill past the beam edge
+let raySpritesBuiltFor = null;
+let tintCanvas = null, tctx = null;
+
+function buildRaySprites() {
+  const S = RAY_SPRITE_SCALE;
+  const yTop0 = -10, ySpan = H * 0.95 + 10; // beam vertical extent (same as before)
+
+  let maxTw = 0, maxTh = 0;
   for (const r of rays) {
-    // apply per-ray blur state: 0px (as-is), 3px (semi-blurry), or 7px (blurry)
-    ctx.filter = r.blur > 0 ? `blur(${r.blur}px)` : 'none';
-    // slow horizontal drift of the whole beam (kept from v1)
-    const off = Math.sin(t * r.speed * 6 + r.x) * 55;
-    const x0 = r.x + off;
-    const topW = r.w * 0.45, botW = r.w * 1.9;
     const shift = r.tilt * H;
+    const topW = r.w * 0.45, botW = r.w * 1.9;
 
-    // Undulating spine: the beam's centerline bends left/right as it descends,
-    // driven by two traveling sine waves (different wavelength & speed) so it
-    // shimmers like sunlight refracted through moving water, seen from inside.
-    const L = _rayL, R = _rayR;
-    for (let i = 0; i <= segs; i++) {
-      const v = i / segs;                       // 0 at the surface, 1 near the floor
-      const y = -10 + v * (H * 0.95 + 10);
-      const grow = 0.35 + 0.65 * v;             // straighter up top, bends more with depth
-      const wave =
-        Math.sin(v * r.uLen + t * r.uSpd + r.uPh) * r.uAmp +
-        Math.sin(v * r.vLen - t * r.vSpd + r.vPh) * r.vAmp;
-      const cx = x0 + shift * v + wave * grow;  // undulating center x at this depth
-      const halfW = topW + (botW - topW) * v;   // beam widens as it falls
-      L[i][0] = cx - halfW; L[i][1] = y;
-      R[i][0] = cx + halfW; R[i][1] = y;
+    // static spine in local coords (x relative to the beam origin); the per-frame
+    // drift + wobble are added when slicing, so each sprite stays reusable
+    const L = [], Rr = [];
+    for (let i = 0; i <= RAY_SEGS; i++) {
+      const v = i / RAY_SEGS;
+      const y = yTop0 + v * ySpan;
+      const cx = shift * v;                    // centerline x at this depth
+      const halfW = topW + (botW - topW) * v;  // beam widens as it falls
+      L.push([cx - halfW, y]);
+      Rr.push([cx + halfW, y]);
     }
-
-    // Fill a band between two edge polylines with a vertical fade (matches v1 look).
-    const band = (a, b, aTop, midStop, midFactor) => {
-      ctx.beginPath();
-      ctx.moveTo(a[0][0], a[0][1]);
-      for (let i = 1; i < a.length; i++) ctx.lineTo(a[i][0], a[i][1]);
-      for (let i = b.length - 1; i >= 0; i--) ctx.lineTo(b[i][0], b[i][1]);
-      ctx.closePath();
-      const g = ctx.createLinearGradient(0, 0, 0, H);
-      g.addColorStop(0, `rgba(${rr},${rg},${rb},${aTop})`);
-      g.addColorStop(midStop, `rgba(${rr},${rg},${rb},${aTop * midFactor})`);
-      g.addColorStop(1, `rgba(${rr},${rg},${rb},0)`);
-      ctx.fillStyle = g;
-      ctx.fill();
+    let xMinL = Infinity, xMaxL = -Infinity;
+    for (const [px] of L) if (px < xMinL) xMinL = px;
+    for (const [px] of Rr) if (px > xMaxL) xMaxL = px;
+
+    const bw = Math.ceil(xMaxL - xMinL + RAY_PAD * 2);
+    const bh = Math.ceil(ySpan + RAY_PAD * 2);
+
+    // draw the beam into a full-res scratch canvas (identity transform so the blur
+    // radius is unambiguous), then downscale it into the half-res sprite
+    const full = document.createElement("canvas");
+    full.width = bw; full.height = bh;
+    const fc = full.getContext("2d");
+    fc.translate(-xMinL + RAY_PAD, -yTop0 + RAY_PAD); // local beam coords → scratch px
+    if (r.blur > 0) { try { fc.filter = `blur(${r.blur}px)`; } catch (e) {} }
+
+    const poly = (a, b) => {
+      fc.beginPath();
+      fc.moveTo(a[0][0], a[0][1]);
+      for (let i = 1; i < a.length; i++) fc.lineTo(a[i][0], a[i][1]);
+      for (let i = b.length - 1; i >= 0; i--) fc.lineTo(b[i][0], b[i][1]);
+      fc.closePath();
+      fc.fill();
     };
 
-    // soft outer beam (v1 alphas), now following the undulating spine
-    band(L, R, r.alpha, 0.55, 0.45);
-
-    // brighter, narrower inner core riding the same undulation (v1 core profile)
-    const LC = _rayLC, RC = _rayRC;
-    for (let i = 0; i <= segs; i++) {
-      const [lx, ly] = L[i], [rx2, ry2] = R[i];
+    // vertical fade baked into the sprite: bright at the surface, gone by the floor
+    // (same gradient stops as before, mapped into scratch-canvas coordinates)
+    const yS0 = -yTop0 + RAY_PAD;   // scratch y of world y=0
+    const yS1 = H - yTop0 + RAY_PAD; // scratch y of world y=H
+    const gOuter = fc.createLinearGradient(0, yS0, 0, yS1);
+    gOuter.addColorStop(0, `rgba(255,255,255,${r.alpha})`);
+    gOuter.addColorStop(0.55, `rgba(255,255,255,${r.alpha * 0.45})`);
+    gOuter.addColorStop(1, "rgba(255,255,255,0)");
+    fc.fillStyle = gOuter;
+    poly(L, Rr);
+
+    // brighter, narrower inner core riding the same spine (v1 core profile)
+    const LC = [], RC = [];
+    for (let i = 0; i <= RAY_SEGS; i++) {
+      const [lx, ly] = L[i], [rx2, ry2] = Rr[i];
       const cxm = (lx + rx2) / 2;
       const coreHalf = ((rx2 - lx) / 2) * 0.42; // 42% of the local half-width, as in v1
-      LC[i][0] = cxm - coreHalf; LC[i][1] = ly;
-      RC[i][0] = cxm + coreHalf; RC[i][1] = ry2;
+      LC.push([cxm - coreHalf, ly]);
+      RC.push([cxm + coreHalf, ry2]);
+    }
+    const gCore = fc.createLinearGradient(0, yS0, 0, yS1);
+    gCore.addColorStop(0, `rgba(255,255,255,${r.alpha * 1.5})`);
+    gCore.addColorStop(0.65, "rgba(255,255,255,0)");
+    fc.fillStyle = gCore;
+    poly(LC, RC);
+
+    const spr = document.createElement("canvas");
+    spr.width = Math.max(1, Math.ceil(bw * S));
+    spr.height = Math.max(1, Math.ceil(bh * S));
+    const sc = spr.getContext("2d");
+    sc.drawImage(full, 0, 0, bw, bh, 0, 0, spr.width, spr.height);
+
+    r.sprite = spr;
+    r.tw = spr.width; r.th = spr.height; // sprite pixel size
+    r.bw = bw;                           // beam width in CSS px (dest size)
+    r.xMinL = xMinL;                     // leftmost local x of the beam body
+    if (spr.width > maxTw) maxTw = spr.width;
+    if (spr.height > maxTh) maxTh = spr.height;
+  }
+
+  // shared tint canvas: per frame we recolor each white sprite here with the current
+  // light.ray color, so beams still shift hue through day → dusk → night like before
+  tintCanvas = document.createElement("canvas");
+  tintCanvas.width = Math.max(1, maxTw);
+  tintCanvas.height = Math.max(1, maxTh);
+  tctx = tintCanvas.getContext("2d");
+
+  raySpritesBuiltFor = W + "x" + H;
+}
+
+function drawRays(t, light) {
+  if (!tintCanvas || raySpritesBuiltFor !== W + "x" + H) buildRaySprites();
+  const [rr, rg, rb] = light.ray;
+  const tintRGB = `rgb(${rr},${rg},${rb})`;
+  const yTop0 = -10, ySpan = H * 0.95 + 10;
+
+  for (const r of rays) {
+    // 1) recolor the white sprite into the shared temp canvas — one blit + one fill,
+    //    GPU-cheap, and it keeps the beams' day/dusk/night hue shifting like before
+    tctx.clearRect(0, 0, r.tw, r.th);
+    tctx.globalCompositeOperation = "source-over";
+    tctx.drawImage(r.sprite, 0, 0);
+    tctx.globalCompositeOperation = "source-in";
+    tctx.fillStyle = tintRGB;
+    tctx.fillRect(0, 0, r.tw, r.th);
+
+    // 2) blit horizontal slices with the undulation offset at each depth — same wave
+    //    math as before, so the beams shimmer exactly like they always have
+    const off = Math.sin(t * r.speed * 6 + r.x) * 55; // slow drift of the whole beam
+    for (let i = 0; i < RAY_SLICES; i++) {
+      const vT = i / RAY_SLICES, vB = (i + 1) / RAY_SLICES, vM = (vT + vB) / 2;
+      const ya = yTop0 + vT * ySpan, yb = yTop0 + vB * ySpan;
+      const grow = 0.35 + 0.65 * vM; // straighter up top, bends more with depth
+      const wave =
+        Math.sin(vM * r.uLen + t * r.uSpd + r.uPh) * r.uAmp +
+        Math.sin(vM * r.vLen - t * r.vSpd + r.vPh) * r.vAmp;
+      const dx = r.x + off + wave * grow; // undulating center x at this depth
+      ctx.drawImage(tintCanvas,
+        0, (ya + 10 + RAY_PAD) * RAY_SPRITE_SCALE, r.tw, (yb - ya) * RAY_SPRITE_SCALE,
+        dx + r.xMinL - RAY_PAD, ya, r.bw, yb - ya);
     }
-    band(LC, RC, r.alpha * 1.5, 0.65, 0);
-    ctx.filter = 'none'; // reset blur before next ray or other drawing
   }
 }
 
@@ -1605,10 +1695,17 @@ function buildGrainTile() {
   g.putImageData(img, 0, 0);
   grainPattern = ctx.createPattern(tile, "repeat"); // cached once, reused every frame
 }
+let grainOx = 0, grainOy = 0, lastGrainTime = 0;
 function drawGrain() {
   if (!grainPattern) return;
-  const ox = (Math.random() * GRAIN_TILE) | 0; // random offset each frame -> animated grain
-  const oy = (Math.random() * GRAIN_TILE) | 0;
+  // v17: half-speed grain — re-randomize the offset every other frame instead of every frame
+  const now = performance.now();
+  if (now - lastGrainTime >= 33) { // ~30fps grain updates instead of per-frame (~60fps)
+    grainOx = (Math.random() * GRAIN_TILE) | 0;
+    grainOy = (Math.random() * GRAIN_TILE) | 0;
+    lastGrainTime = now;
+  }
+  const ox = grainOx, oy = grainOy;
   ctx.save();
   ctx.globalCompositeOperation = "overlay";
   ctx.globalAlpha = 0.7; // mild: subtle shimmer, not heavy noise
@@ -1621,6 +1718,10 @@ function drawGrain() {
 // Precomputed static layers — the sand and rocks never move, so they are
 // rendered once to an offscreen canvas and blitted each frame (v6) instead of
 // re-drawing their gradients and paths every single frame.
+// PERF: half-resolution offscreen buffer for the light rays (see drawRays) — the
+// per-ray blur() filter is far cheaper rasterizing small areas than full-screen.
+
+
 let staticLayer = null;
 function buildStaticLayer() {
   staticLayer = document.createElement("canvas");
@@ -1711,6 +1812,7 @@ function frame(now) {
 
 function doResize() {
   resize();
+  buildRaySprites(); // v23: rebuild the pre-blurred beam sprites for the new size
   buildStaticLayer();
   if (!grainPattern) buildGrainTile(); // v8: grain tile is size-independent, build once
 }