Upload index.html

index.html

@@ -83,7 +83,7 @@ function genKoiPatches(type) {
   }
   return arr;
 }
-let fishes = [], bubbles = [], seaweeds = [], backSeaweeds = [], farSeaweeds = [], motes = [], rays = [], rocks = [], grass = [], fgGrass = [];
+let fishes = [], bubbles = [], seaweeds = [], backSeaweeds = [], midSeaweeds = [], 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)
+  midSeaweeds = []; // v6: middle-distance seaweed with halo pass (between back and far)
   farSeaweeds = []; // v5: ultra-far pre-rendered blurry sprites (deepest layer)
   motes = [];
   rays = [];
@@ -1047,6 +1048,50 @@ function buildScene() {
     }
   }
 
+  // v6: middle-distance seaweed using halo stroke pass (median properties between back and far)
+  const nMidClusters = Math.max(5, Math.floor(W / 190));
+  for (let i = 0; i < nMidClusters; i++) {
+    const cx = rand(25, W - 25);
+    // Median hue between backSeaweeds (165-200) and farSeaweeds (170-210)
+    const clusterHue = rand(183, 197); // midpoint of both ranges
+    const nStalks = 2 + ((Math.random() * 3) | 0);
+    for (let j = 0; j < nStalks; j++) {
+      const hue = clusterHue + rand(-12, 12);
+      // Median properties: height between backSeaweeds (0.35-0.65H) and farSeaweeds (0.4-0.7H)
+      const st = {
+        x: cx + rand(-22, 22),
+        h: rand(H * 0.42, H * 0.68), // median height
+        segs: 9,
+        phase: rand(0, Math.PI * 2),
+        speed: rand(0.6, 1.15), // median sway speed between back (0.7-1.3) and far (0.5-1.0)
+        hue,
+        width: rand(3, 6.5), // median width
+        tipW: rand(1.8, 3.2),
+        branches: [],
+        // Organic curve parameters (like backSeaweeds for halo pass technique)
+        cA1: rand(9, 16), cF1: rand(0.7, 1.5), cP1: rand(0, Math.PI * 2),
+        cA2: rand(3.5, 9),  cF2: rand(1.8, 3.0), cP2: rand(0, Math.PI * 2),
+        // Multi-wave organic motion parameters
+        waveA1: rand(7, 15), waveF1: rand(0.45, 1.1), wavePh1: rand(0, Math.PI * 2),
+        waveA2: rand(3.5, 9),  waveF2: rand(1.2, 2.0), wavePh2: rand(0, Math.PI * 2),
+        waveA3: rand(2.5, 6),  waveF3: rand(2.2, 3.4), wavePh3: rand(0, Math.PI * 2)
+      };
+      // Add branches (median count between back and far)
+      const nBr = 1 + ((Math.random() * 3) | 0);
+      for (let k = 0; k < nBr; k++) {
+        st.branches.push({
+          f: rand(0.28, 0.82),
+          side: Math.random() < 0.5 ? -1 : 1,
+          len: rand(11, 26),
+          up: rand(9, 22),
+          w: rand(1.8, 3.5),
+          ph: rand(0, Math.PI * 2)
+        });
+      }
+      midSeaweeds.push(st);
+    }
+  }
+
   // 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++) {
@@ -1488,6 +1533,96 @@ function stalkCurveX(w, f) {
 // 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).
+// v6: middle-distance seaweed using halo stroke pass (median depth between back and far)
+function drawMidSeaweeds(t) {
+  for (const w of midSeaweeds) {
+    const baseY = sandAt(w.x) + 10;
+    const n = w.segs;
+    // Slightly more blue-tinted and softer than backSeaweeds
+    const coreStyle = `hsla(${w.hue},48%,30%,0.65)`;
+    const haloStyle = `hsla(${w.hue},42%,34%,0.16)`;
+
+    // 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;
+
+    // Wider halo pass for more softness (between backSeaweeds and farSeaweeds)
+    for (let pass = 0; pass < 2; pass++) {
+      const isHalo = pass === 0;
+      ctx.strokeStyle = isHalo ? haloStyle : coreStyle;
+      ctx.lineCap = 'round';
+      ctx.lineJoin = 'round';
+      ctx.lineWidth = (w.width + w.tipW) / 2 * (isHalo ? 2.2 : 1); // wider halo than backSeaweeds
+
+      // stalk outline: up one side, round tip, down the other
+      ctx.beginPath();
+      let prevX = 0, prevY = baseY;
+      let lastPx = 0, lastPy = baseY;
+      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
+      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;
+        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 * 2.2 : b.w;
+        ctx.strokeStyle = isHalo ? haloStyle : `hsla(${w.hue + 6},50%,40%,0.7)`;
+        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();
+      }
+    }
+  }
+}
+
 function drawBackSeaweeds(t) {
   // v6: no runtime canvas filter — blur() forces a CPU re-rasterize every frame
   // and was the main FPS cost. Softness now comes from the halo pass below instead.
@@ -2107,6 +2242,9 @@ function frame(now) {
   // v5: ultra-far pre-rendered blurry seaweed — deepest layer, behind everything else
   drawFarSeaweeds(t);
 
+  // v6: middle-distance seaweed with halo pass (between far and back)
+  drawMidSeaweeds(t);
+
   // v4: background seaweed — drawn behind sand/rocks for depth
   drawBackSeaweeds(t); // v4.3: procedural multi-wave motion (no separate update pass)