Upload index.html

index.html

@@ -83,7 +83,7 @@ function genKoiPatches(type) {
   }
   return arr;
 }
-let fishes = [], bubbles = [], seaweeds = [], backSeaweeds = [], motes = [], rays = [], rocks = [], grass = [], fgGrass = [];
+let fishes = [], bubbles = [], seaweeds = [], backSeaweeds = [], farSeaweeds = [], motes = [], rays = [], rocks = [], grass = [], fgGrass = [];
 let playerFish = null; // the fish controlled by gamepad (spawned with F key)
 const GAMEPAD_DEADZONE = 0.15; // ignore small stick movements
 let curNight = 0; // v7: shared night factor (dims the top-light + sheen)
@@ -894,6 +894,7 @@ function buildScene() {
   bubbles = [];
   seaweeds = [];
   backSeaweeds = []; // v4: blurry background seaweed (not fish-touchable)
+  farSeaweeds = []; // v5: ultra-far pre-rendered blurry sprites (deepest layer)
   motes = [];
   rays = [];
   rocks = [];
@@ -1008,9 +1009,8 @@ function buildScene() {
     const nStalks = 2 + ((Math.random() * 3) | 0); // 2..4 stalks per bundle
     for (let j = 0; j < nStalks; j++) {
       const hue = clusterHue + rand(-15, 15);
-      // v4.2: depth split — ~66% "near" (half blur, slightly thinner) for a layered look,
-      // the rest stay far back with the heavy blur.
-      const near = Math.random() < 0.66;
+      // v4.3: depth split — ~51% "far" (heavy softness), ~49% "near" (sharper) for a layered look
+      const near = Math.random() < 0.49;
       const st = {
         x: cx + rand(-20, 20),
         h: rand(H * 0.35, H * 0.65), // much taller than foreground seaweed
@@ -1019,16 +1019,16 @@ function buildScene() {
         speed: rand(0.7, 1.3), // slower, more gentle sway
         hue,
         near,
-        blur: near ? 4 : 8,   // baked into sprite at build time (no runtime cost)
         width: near ? rand(2.5, 5) : rand(3, 6),
         tipW: near ? rand(1.2, 2.4) : rand(1.5, 3),
         branches: [],
         // organic curve parameters (same as foreground seaweed)
         cA1: rand(8, 15), cF1: rand(0.8, 1.6), cP1: rand(0, Math.PI * 2),
         cA2: rand(3, 8),  cF2: rand(2.0, 3.2), cP2: rand(0, Math.PI * 2),
-        // PERF: pre-rendered sprite with blur baked in (no runtime blur cost)
-        sprite: null,
-        spriteScale: 1
+        // v4.3: multi-wave organic motion parameters
+        waveA1: rand(6, 14), waveF1: rand(0.5, 1.2), wavePh1: rand(0, Math.PI * 2),
+        waveA2: rand(3, 8),  waveF2: rand(1.3, 2.1), wavePh2: rand(0, Math.PI * 2),
+        waveA3: rand(2, 5),  waveF3: rand(2.4, 3.6), wavePh3: rand(0, Math.PI * 2)
       };
       // v4.1: add branches to background seaweed (like foreground)
       const nBr = 1 + ((Math.random() * 3) | 0); // 1..3 branches per stalk
@@ -1046,7 +1046,44 @@ function buildScene() {
       backSeaweeds.push(st);
     }
   }
-  buildBackSeaweedSprites();
+
+  // v5: ultra-far pre-rendered blurry seaweed — deepest layer, heavily blurred sprites
+  const nFarClusters = Math.max(6, Math.floor(W / 180)); // 50% more than previous far count
+  for (let i = 0; i < nFarClusters; i++) {
+    const cx = rand(20, W - 20);
+    const clusterHue = rand(170, 210); // very blue-tinted for depth
+    const nStalks = 2 + ((Math.random() * 3) | 0); // 2..4 stalks per bundle
+    for (let j = 0; j < nStalks; j++) {
+      const hue = clusterHue + rand(-15, 15);
+      const st = {
+        x: cx + rand(-25, 25),
+        h: rand(H * 0.4, H * 0.7), // very tall
+        segs: 8,
+        phase: rand(0, Math.PI * 2),
+        speed: rand(0.5, 1.0), // very slow sway
+        hue,
+        width: rand(4, 8),
+        tipW: rand(2, 4),
+        branches: [],
+        sprite: null, // will be built by buildFarSeaweedSprites()
+        spriteXOffset: 0,
+        spriteYOffset: 0
+      };
+      // Add some branches for visual complexity (will be part of the sprite)
+      const nBr = 1 + ((Math.random() * 2) | 0); // 1..2 branches
+      for (let k = 0; k < nBr; k++) {
+        st.branches.push({
+          f: rand(0.3, 0.8),
+          side: Math.random() < 0.5 ? -1 : 1,
+          len: rand(12, 28),
+          up: rand(10, 24),
+          w: rand(2, 4),
+          ph: rand(0, Math.PI * 2)
+        });
+      }
+      farSeaweeds.push(st);
+    }
+  }
 
   // Short, dense grass-like ground cover along the sand bed.
   // Each tuft is a cluster of thin blades that ripple when fish swim nearby.
@@ -1171,6 +1208,7 @@ function resize() {
   canvas.height = H * dpr;
   ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
   buildScene();
+  buildFarSeaweedSprites(); // v5: pre-render ultra-far blurry seaweed sprites
 }
 
 // --- slow light cycle: bright day -> dusk -> night -> dawn, over CYCLE seconds ---
@@ -1447,26 +1485,114 @@ function stalkCurveX(w, f) {
   return f * (w.cA1 * Math.sin(f * w.cF1 + w.cP1) + w.cA2 * Math.sin(f * w.cF2 + w.cP2));
 }
 
-// v4: pre-rendered blurry sprites for background seaweed (no runtime blur cost)
-function buildBackSeaweedSprites() {
-  const BLUR_MAX = 8; // far-back blur; near stalks use half (see st.blur)
-  const PAD = 30; // extra space around stalk for blur spill
-  
+// v4.3: draw background seaweed procedurally — multi-wave organic motion instead of
+// rigid sprite rotation. Far stalks get a soft low-alpha halo pass to keep their
+// "far away" look without any runtime blur filters (no slowdown).
+function drawBackSeaweeds(t) {
+  ctx.save();
+  ctx.filter = 'blur(2px)'; // v5.1: added softness to nearer background seaweed
   for (const w of backSeaweeds) {
-    // Calculate bounding box
+    const baseY = sandAt(w.x) + 10;
+    const n = w.segs;
+    const coreStyle = `hsla(${w.hue},50%,32%,${w.near ? 0.8 : 0.7})`;
+    const haloStyle = `hsla(${w.hue},45%,36%,0.18)`;
+
+    // stalk sway at fraction f: three overlapping waves, root planted (f^2), tip free (f)
+    const swayAt = (f) =>
+      Math.sin(t * w.waveF1 + w.wavePh1 + f * 2.4) * w.waveA1 * f * f +
+      Math.sin(t * w.waveF2 + w.wavePh2 + f * 3.8) * w.waveA2 * f * f +
+      Math.sin(t * w.waveF3 + w.wavePh3 + f * 5.4) * w.waveA3 * f;
+
+    for (let pass = 0; pass < (w.near ? 1 : 2); pass++) {
+      const isHalo = !w.near && pass === 0;
+      ctx.strokeStyle = isHalo ? haloStyle : coreStyle;
+      ctx.lineCap = 'round';
+      ctx.lineJoin = 'round';
+      ctx.lineWidth = (w.width + w.tipW) / 2 * (isHalo ? 1.9 : 1);
+
+      // stalk outline: up one side, round tip, down the other
+      ctx.beginPath();
+      let prevX = 0, prevY = baseY;
+      let lastPx = 0, lastPy = baseY; // track final position for tip cap
+      for (let i = 0; i <= n; i++) {
+        const f = i / n;
+        const px = w.x + stalkCurveX(w, f) + swayAt(f);
+        const py = baseY - w.h * f;
+        const dx = px - prevX, dy = py - prevY;
+        const dl = Math.hypot(dx, dy) || 1;
+        const nx = -dy / dl, ny = dx / dl;
+        const hw = (w.width * (1 - f) + w.tipW * f) / 2;
+        if (i === 0) ctx.moveTo(px + nx * hw, py + ny * hw);
+        else ctx.lineTo(px + nx * hw, py + ny * hw);
+        prevX = px; prevY = py;
+        lastPx = px; lastPy = py;
+      }
+      // round tip cap (follows the stalk's actual direction)
+      const dxT = lastPx - prevX, dyT = lastPy - prevY;
+      const dlT = Math.hypot(dxT, dyT) || 1;
+      const nxT = -dyT / dlT, nyT = dxT / dlT;
+      ctx.quadraticCurveTo(lastPx, lastPy, lastPx + dxT * 0.5 + nxT * (w.tipW / 2), lastPy + dyT * 0.5 + nyT * (w.tipW / 2));
+      // down the other side
+      for (let i = n; i >= 0; i--) {
+        const f = i / n;
+        const px = w.x + stalkCurveX(w, f) + swayAt(f);
+        const py = baseY - w.h * f;
+        // perpendicular from this segment direction
+        let dx, dy;
+        if (i === n) { dx = prevX - px; dy = prevY - py; }
+        else {
+          const f2 = (i + 1) / n;
+          const px2 = w.x + stalkCurveX(w, f2) + swayAt(f2);
+          const py2 = baseY - w.h * f2;
+          dx = px2 - px; dy = py2 - py;
+        }
+        const dl = Math.hypot(dx, dy) || 1;
+        const nx = -dy / dl, ny = dx / dl;
+        const hw = (w.width * (1 - f) + w.tipW * f) / 2;
+        ctx.lineTo(px - nx * hw, py - ny * hw);
+      }
+      ctx.closePath();
+      ctx.stroke();
+
+      // branches flutter with the stalk
+      for (const b of w.branches) {
+        const idx = Math.min(n, Math.max(1, Math.round(b.f * n)));
+        const f = idx / n;
+        const ax = w.x + stalkCurveX(w, f) + swayAt(f);
+        const ay = baseY - w.h * f;
+        const flutter = Math.sin(t * w.waveF2 * 1.4 + b.ph) * (3 + w.waveA2 * 0.4);
+        const bx = ax + b.side * b.len + flutter;
+        const by = ay - b.up;
+        ctx.beginPath();
+        ctx.lineWidth = isHalo ? b.w * 1.9 : b.w;
+        ctx.strokeStyle = isHalo ? haloStyle : `hsla(${w.hue + 8},55%,42%,0.75)`;
+        ctx.moveTo(ax, ay);
+        ctx.bezierCurveTo(
+          ax + b.side * b.len * 0.3, ay - b.up * 0.75,
+          bx - b.side * b.len * 0.35, by + b.up * 0.6,
+          bx, by
+        );
+        ctx.stroke();
+      }
+    }
+  }
+  ctx.restore();
+}
+
+// v5: pre-render ultra-far seaweed sprites with heavy blur baked in at build time
+function buildFarSeaweedSprites() {
+  const BLUR = 7; // v5.1: reduced from 10 (33% less) — slightly closer appearance
+  const PAD = 40; // extra space for blur spill
+  
+  for (const w of farSeaweeds) {
+    // Calculate bounding box by sampling the stalk curve
+    const baseY = sandAt(w.x) + 10;
     let xMin = Infinity, xMax = -Infinity;
     
-    // Sample the stalk curve to find bounds
     for (let i = 0; i <= w.segs; i++) {
       const f = i / w.segs;
-      const px = w.x + stalkCurveX(w, f);
-      if (px < xMin) xMin = px;
-      if (px > xMax) xMax = px;
-    }
-    
-    // Include branch reach in bounding box
-    for (const b of w.branches) {
-      const px = w.x + stalkCurveX(w, b.f) + b.side * b.len;
+      // Use a static curve for the sprite (no animation baked in)
+      const px = w.x + f * 10 * Math.sin(f * 2.5 + w.phase); // gentle curve
       if (px < xMin) xMin = px;
       if (px > xMax) xMax = px;
     }
@@ -1484,125 +1610,83 @@ function buildBackSeaweedSprites() {
     spr.height = bh;
     const sc = spr.getContext("2d");
     
-    // Apply per-stalk blur filter (baked in at build time — zero runtime cost)
-    const BLUR = w.blur || BLUR_MAX;
+    // Apply heavy blur filter (baked in at build time - zero runtime cost)
     sc.filter = `blur(${BLUR}px)`;
     
-    // Draw the stalk as a tapered blade
-    const points = [];
+    // Draw the stalk as a tapered blade with branches
+    const coreStyle = `hsla(${w.hue},45%,28%,0.65)`;
+    sc.strokeStyle = coreStyle;
+    sc.lineCap = 'round';
+    sc.lineJoin = 'round';
+    
+    // Calculate sprite-local coordinates
+    const localBaseX = bw / 2;
+    const localBaseY = bh - PAD;
+    
+    // Draw main stalk outline
+    sc.beginPath();
+    let prevX = localBaseX, prevY = localBaseY;
+    
     for (let i = 0; i <= w.segs; i++) {
       const f = i / w.segs;
-      const px = w.x + stalkCurveX(w, f);
-      // Transform to sprite coordinates — root at BOTTOM of sprite, tip at top
-      points.push({
-        x: px - xMin,
-        y: PAD + w.h * (1 - f)
-      });
+      const curveX = f * 10 * Math.sin(f * 2.5 + w.phase);
+      const px = localBaseX + curveX;
+      const py = localBaseY - w.h * f;
+      
+      if (i === 0) sc.moveTo(px, py);
+      else sc.lineTo(px, py);
+      prevX = px; prevY = py;
     }
     
-    // Draw tapered blade outline
-    sc.fillStyle = `hsla(${w.hue},50%,32%,0.85)`;
-    sc.beginPath();
-    for (let i = 0; i < points.length; i++) {
-      const p = points[i];
-      const a = points[Math.max(0, i - 1)];
-      const b = points[Math.min(points.length - 1, i + 1)];
-      let dx = b.x - a.x, dy = b.y - a.y;
-      const dl = Math.hypot(dx, dy) || 1;
-      const nx = -dy / dl, ny = dx / dl;
-      const f = i / (points.length - 1);
-      const hw = (w.width * (1 - f) + w.tipW * f) / 2;
-      if (i === 0) sc.moveTo(p.x + nx * hw, p.y + ny * hw);
-      else sc.lineTo(p.x + nx * hw, p.y + ny * hw);
-    }
-    // Rounded tip
-    const tp = points[points.length - 1], pp = points[points.length - 2];
-    let dx = tp.x - pp.x, dy = tp.y - pp.y;
-    const dl = Math.hypot(dx, dy) || 1;
-    const nx = -dy / dl, ny = dx / dl;
-    const hwT = w.tipW / 2;
-    sc.quadraticCurveTo(tp.x + dx, tp.y + dy * 0.6, tp.x - nx * hwT, tp.y - ny * hwT);
-    // Down the other side
-    for (let i = points.length - 1; i >= 0; i--) {
-      const p = points[i];
-      const a = points[Math.max(0, i - 1)];
-      const b = points[Math.min(points.length - 1, i + 1)];
-      let dx = b.x - a.x, dy = b.y - a.y;
-      const dl = Math.hypot(dx, dy) || 1;
-      const nx = -dy / dl, ny = dx / dl;
-      const f = i / (points.length - 1);
-      const hw = (w.width * (1 - f) + w.tipW * f) / 2;
-      sc.lineTo(p.x - nx * hw, p.y - ny * hw);
-    }
-    sc.closePath();
-    sc.fill();
+    // Draw with width to create the blade shape
+    sc.lineWidth = (w.width + w.tipW) / 2;
+    sc.stroke();
     
-    // v4.1: draw branches (same style as foreground seaweed)
+    // Draw branches
     for (const b of w.branches) {
       const idx = Math.min(w.segs, Math.max(1, Math.round(b.f * w.segs)));
-      const a = points[idx];
-      
-      // Calculate branch endpoint in sprite coordinates
-      const bx = w.x + stalkCurveX(w, b.f) + b.side * b.len;
-      const by = PAD + w.h * (1 - b.f) - b.up;
+      const f = idx / w.segs;
+      const curveX = f * 10 * Math.sin(f * 2.5 + w.phase);
+      const ax = localBaseX + curveX;
+      const ay = localBaseY - w.h * f;
       
-      // Transform to sprite-local coordinates
-      const btx = bx - xMin;
-      const bty = by;
-      
-      // S-curved frond (same as foreground)
-      const c1x = a.x + b.side * b.len * 0.3;
-      const c1y = a.y - b.up * 0.75;
-      const c2x = btx - b.side * b.len * 0.35;
-      const c2y = bty + b.up * 0.6;
-      
-      sc.strokeStyle = `hsla(${w.hue + 8},55%,42%,0.8)`; // slightly lighter than stalk
-      sc.lineWidth = b.w;
       sc.beginPath();
-      sc.moveTo(a.x, a.y);
-      sc.bezierCurveTo(c1x, c1y, c2x, c2y, btx, bty);
+      sc.lineWidth = b.w;
+      sc.strokeStyle = `hsla(${w.hue + 8},40%,32%,0.5)`;
+      sc.moveTo(ax, ay);
+      const bx = ax + b.side * b.len;
+      const by = ay - b.up;
+      sc.bezierCurveTo(
+        ax + b.side * b.len * 0.3, ay - b.up * 0.75,
+        bx - b.side * b.len * 0.35, by + b.up * 0.6,
+        bx, by
+      );
       sc.stroke();
     }
     
-    // Store sprite and its anchor point
-    // BUG FIX: store RELATIVE offset from stalk base, not absolute screen position
+    // Store sprite and offset for drawing
     w.sprite = spr;
-    w.spriteXOffset = xMin - w.x; // relative offset (was causing all seaweed to render at same x)
-  }
-}
-
-// v4: update background seaweed wave motion (no fish interaction)
-function updateBackSeaweeds(t) {
-  for (const w of backSeaweeds) {
-    // Simple sine-based sway (much simpler than foreground seaweed physics)
-    const baseY = sandAt(w.x) + 10;
-    
-    // Calculate the current sway offset based on time
-    const swayPhase = t * w.speed + w.phase;
-    
-    // Store the current wave state for drawing
-    w.currentSway = Math.sin(swayPhase);
-    w.currentSway2 = Math.sin(swayPhase * 1.3 + 0.5); // secondary wave for organic motion
+    w.spriteXOffset = xMin; // left edge of bounding box in world coords
+    w.spriteYOffset = baseY - bh + PAD; // top edge in world coords (baseY is bottom)
   }
 }
 
-// v4: draw background seaweed (blurred sprites, behind everything else)
-function drawBackSeaweeds() {
-  for (const w of backSeaweeds) {
+// v5: draw ultra-far seaweed sprites with simple sway animation
+function drawFarSeaweeds(t) {
+  for (const w of farSeaweeds) {
     if (!w.sprite) continue;
-
+    
     const baseY = sandAt(w.x) + 10;
-
-    // Gentle sway: small rotation about the planted base + a tiny root shift,
-    // so it reads as bending in the current instead of sliding sideways.
-    const swayA = w.currentSway * 0.035 + w.currentSway2 * 0.018;
-    const swayX = w.currentSway * 3;
-
+    // Simple rotational sway - root stays planted, sprite rotates slightly
+    const swayAngle = Math.sin(t * w.speed + w.phase) * 0.04; // very subtle rotation
+    
     ctx.save();
-    ctx.translate(w.x + swayX, baseY);
-    ctx.rotate(swayA);
-    // Sprite root sits at sprite-y (h+30); drawing at -h-30 lands it exactly on baseY
-    ctx.drawImage(w.sprite, -w.spriteXOffset, -w.h - 30);
+    // Translate to the base point (where the stalk meets the sand)
+    ctx.translate(w.x, baseY);
+    // Rotate around the base point for natural sway
+    ctx.rotate(swayAngle);
+    // Draw sprite at its offset position relative to base
+    ctx.drawImage(w.sprite, w.spriteXOffset - w.x, w.spriteYOffset - baseY);
     ctx.restore();
   }
 }
@@ -2004,9 +2088,11 @@ function frame(now) {
   drawRays(t, light);
   updateMotes(dt, t);
 
+  // v5: ultra-far pre-rendered blurry seaweed — deepest layer, behind everything else
+  drawFarSeaweeds(t);
+
   // v4: background seaweed — drawn behind sand/rocks for depth
-  updateBackSeaweeds(t);
-  drawBackSeaweeds();
+  drawBackSeaweeds(t); // v4.3: procedural multi-wave motion (no separate update pass)
 
   updatePlants(t, dt);
   updateGrass(t, dt);
@@ -2076,7 +2162,7 @@ function frame(now) {
 function doResize() {
   resize();
   buildRaySprites(); // v23: rebuild the pre-blurred beam sprites for the new size
-  buildBackSeaweedSprites(); // v4: rebuild background seaweed sprites for new size
+  buildFarSeaweedSprites(); // v5: rebuild ultra-far seaweed sprites for new size
   buildStaticLayer();
   if (!grainPattern) buildGrainTile(); // v8: grain tile is size-independent, build once
 }