Upload index.html

index.html

@@ -645,22 +645,6 @@ class Fish {
     c.closePath();
     c.fill();
 
-    // pectoral fin (flapping)
-    const flap = Math.sin(this.phase * 1.3) * 0.45;
-    c.save();
-    c.translate(s * 0.05, s * 0.12);
-    c.rotate(0.7 + flap);
-    // v17: pectoral fin matches the body color (no more blue arms on silver fish), but
-    // gets a thin darker outline so it stays visible sitting on top of the same-colored body
-    c.fillStyle = this.pevFillStyle;
-    c.beginPath();
-    c.ellipse(0, 0, s * 0.3, s * 0.14, 0, 0, Math.PI * 2);
-    c.fill();
-    c.strokeStyle = this.pevStrokeStyle;
-    c.lineWidth = Math.max(1, s * 0.03);
-    c.stroke();
-    c.restore();
-
     // eye
     c.fillStyle = "#fff";
     c.beginPath();
@@ -709,37 +693,71 @@ class Fish {
 
     c.restore();
 
-    // v7: overhead light streak — a soft line of light on whichever edge faces up,
-    // computed in screen space so it stays on top no matter how the fish turns.
+    // v17: overhead light — a soft elliptical highlight matching the fish body shape,
+    // positioned on the upper edge and rotated with the fish's angle.
     {
       const ca = Math.cos(this.angle), sa = Math.sin(this.angle);
-      const N = 40;
-      const pts = [];
-      for (let i = 0; i < N; i++) {
-        const th = (i / N) * Math.PI * 2;
-        const lx = s * Math.cos(th);          // along heading
-        const ly = -s * 0.42 * Math.sin(th);  // across body (local up)
-        pts.push([this.x + lx*ca - ly*sa, this.y + lx*sa + ly*ca]);
-      }
-      let ti = 0; for (let i = 1; i < N; i++) if (pts[i][1] < pts[ti][1]) ti = i;
-      const arc = [];
-      for (let k = -8; k <= 8; k++) {
-        const idx = ((ti + k) % N + N) % N;
-        arc.push(pts[idx]);
-      }
+      // Find which side faces up (screen space)
+      const upY = -sa; // screen-space y-component of the fish's local "up" direction
+      // Smooth transition instead of hard switch to prevent flickering/snapping
+      const sideUp = -upY / (Math.abs(upY) + 0.15);
+      
       const a = 0.35 * (1 - curNight * 0.65); // dimmer at night, still present
       if (a > 0.02) {
         c.save();
-        c.lineCap = "round"; c.lineJoin = "round";
-        c.strokeStyle = `rgba(255,255,255,${(a * 0.4).toFixed(3)})`;
-        c.lineWidth = s * 0.16;
-        strokeArc(c, arc);
-        c.strokeStyle = `rgba(255,255,255,${a.toFixed(3)})`;
-        c.lineWidth = Math.max(1, s * 0.05);
-        strokeArc(c, arc);
+        // Position the ellipse on the upper edge of the fish body
+        const offsetX = sideUp * s * 0.18; // offset along the fish's local up axis
+        const lightX = this.x + offsetX * ca;
+        const lightY = this.y + offsetX * sa;
+        
+        // Draw two concentric ellipses matching the fish body proportions
+        c.translate(lightX, lightY);
+        c.rotate(this.angle);
+        
+        // Outer soft glow — larger and more transparent
+        c.fillStyle = `rgba(255,255,255,${(a * 0.3).toFixed(3)})`;
+        c.beginPath();
+        c.ellipse(0, 0, s * 0.65, s * 0.25, 0, 0, Math.PI * 2);
+        c.fill();
+        
+        // Inner bright core — smaller and more opaque
+        c.fillStyle = `rgba(255,255,255,${a.toFixed(3)})`;
+        c.beginPath();
+        c.ellipse(0, 0, s * 0.35, s * 0.1, 0, 0, Math.PI * 2);
+        c.fill();
+        
         c.restore();
       }
     }
+    // v19: pectoral fins drawn OVER the reflections for correct layering
+    {
+      c.save();
+      c.translate(this.x, this.y);
+      c.rotate(this.angle);
+      if (Math.abs(this.roll) > 0.01) {
+        c.scale(1, Math.max(0.42, Math.cos(this.roll)));
+        c.rotate(this.roll * 0.1);
+      }
+      
+        // pectoral fin (flapping)
+    const flap = Math.sin(this.phase * 1.3) * 0.45;
+    c.save();
+    c.translate(s * 0.05, s * 0.12);
+    c.rotate(0.7 + flap);
+    // v17: pectoral fin matches the body color (no more blue arms on silver fish), but
+    // gets a thin darker outline so it stays visible sitting on top of the same-colored body
+    c.fillStyle = this.pevFillStyle;
+    c.beginPath();
+    c.ellipse(0, 0, s * 0.3, s * 0.14, 0, 0, Math.PI * 2);
+    c.fill();
+    c.strokeStyle = this.pevStrokeStyle;
+    c.lineWidth = Math.max(1, s * 0.03);
+    c.stroke();
+    c.restore();
+
+      c.restore();
+    }
+
   }
 }
 
@@ -857,6 +875,10 @@ function buildScene() {
         // so fish push the stalk where it actually looks. Weighted by f → root stays planted.
         cA1: rand(5, 12), cF1: rand(0.9, 1.8), cP1: rand(0, Math.PI * 2),
         cA2: rand(2, 6),  cF2: rand(2.2, 3.6), cP2: rand(0, Math.PI * 2),
+        // v17: secondary wobble - a finer inner shimmer for unique motion per stalk
+        sAmp: rand(2, 5),    // amplitude of the secondary wave
+        sFreq: rand(3.5, 6.5), // higher frequency than primary sway
+        sPh: rand(0, Math.PI * 2), // phase offset
         tipW: rand(1.4, 2.6), // v15: blade tapers from width → tipW up the stipe
         // PERF: stroke styles precomputed once (hue is fixed per stalk) — drawSeaweed
         // used to rebuild both template strings every frame for every stalk.
@@ -922,7 +944,11 @@ 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: 3 + ((Math.random() * 2) | 0), // 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)
       });
     }
   }
@@ -951,7 +977,11 @@ 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: 4 + ((Math.random() * 2) | 0), // 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)
       });
     }
   }
@@ -967,9 +997,12 @@ function buildScene() {
   }
 
   for (let i = 0; i < 5; i++) {
+    // random blur state: 0px (as-is), ~3px (semi-blurry), or ~7px (blurry) for visual variety
+    const blurRoll = Math.random();
+    const blur = blurRoll < 0.34 ? 0 : (blurRoll < 0.67 ? 3 : 7);
     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),
+      speed: rand(0.06, 0.14) * (Math.random() < 0.5 ? 1 : -1), alpha: rand(0.04, 0.09), blur,
       // undulation — two traveling waves so each beam shimmers like light refracted through moving water
       uAmp: rand(18, 46),   uLen: rand(2.2, 4.5), uSpd: rand(0.35, 0.9) * (Math.random() < 0.5 ? 1 : -1), uPh: rand(0, Math.PI * 2),
       vAmp: rand(6, 14),    vLen: rand(5, 9),     vSpd: rand(0.8, 1.6) * (Math.random() < 0.5 ? 1 : -1),   vPh: rand(0, Math.PI * 2)
@@ -1079,6 +1112,8 @@ function drawRays(t, light) {
   const [rr, rg, rb] = light.ray;
   const segs = RAY_SEGS;
   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;
@@ -1130,6 +1165,7 @@ function drawRays(t, light) {
       RC[i][0] = cxm + coreHalf; RC[i][1] = ry2;
     }
     band(LC, RC, r.alpha * 1.5, 0.65, 0);
+    ctx.filter = 'none'; // reset blur before next ray or other drawing
   }
 }
 
@@ -1238,7 +1274,9 @@ function updatePlants(t, dt) {
       // normal sway + a fast extra flinch while being pushed
       const sway = Math.sin(t * w.speed + w.phase + f * 2.6) * f * f * 24
                  + Math.sin(t * 7 + w.phase) * w.touch * f * 16;
-      const px = w.x + (w.off[i] || 0) + stalkCurveX(w, f) + sway;
+      // v17: secondary wobble - a finer inner movement for unique per-stalk motion
+      const sWobble = Math.sin(t * w.sFreq + w.sPh + f * 4.2) * w.sAmp * f;
+      const px = w.x + (w.off[i] || 0) + stalkCurveX(w, f) + sway + sWobble;
       const py = baseY - w.h * f;
       w.points.push({ x: px, y: py });
       plantPoints.push({ x: px, y: py, r: w.width * 0.55, s: w });
@@ -1383,8 +1421,10 @@ function drawGrass(t) {
       const curveX = f * g.cA1 * Math.sin(f * g.cF1 + g.cP1);
       // constant sway, amplified while rippling from a passing fish
       const sway = Math.sin(t * g.speed + g.phase + f * 2.4) * amp * f;
+      // v17: secondary wobble - finer inner movement for unique per-blade motion
+      const sWobble = Math.sin(t * g.sFreq + g.sPh + f * 3.8) * g.sAmp * f;
       pts.push({
-        x: g.x + g.lean * g.h * f + curveX + sway,
+        x: g.x + g.lean * g.h * f + curveX + sway + sWobble,
         y: g.y - g.h * f * (1 - g.ripple * 0.06)
       });
     }
@@ -1441,8 +1481,10 @@ function drawFgGrass(t) {
       const curveX = f * g.cA1 * Math.sin(f * g.cF1 + g.cP1);
       // constant sway, weighted toward the tip
       const sway = Math.sin(t * g.speed + g.phase + f * 2.4) * amp * f;
+      // v17: secondary wobble - finer inner movement for unique per-blade motion
+      const sWobble = Math.sin(t * g.sFreq + g.sPh + f * 4.5) * g.sAmp * f;
       pts.push({
-        x: g.x + g.lean * g.h * f + curveX + sway,
+        x: g.x + g.lean * g.h * f + curveX + sway + sWobble,
         y: g.y - g.h * f
       });
     }