Upload index.html

index.html

@@ -514,6 +514,36 @@ class Fish {
     }
     c.fill();
 
+    // v21: far-side whisker — drawn BEFORE the body so it sits behind the fish and is
+    // partially obscured by the head (only the part that pokes out from behind the snout
+    // shows). The near-side whisker is drawn after the eye, below.
+    if (this.whiskerLen) {
+      const L = this.whiskerLen * s;
+      const spd = Math.min(1, this.speedFactor);
+      const NPTS = 7;
+      c.save();
+      c.lineCap = "round";
+      c.strokeStyle = this.whiskerStyle;
+      c.lineWidth = Math.max(1, s * 0.045);
+      {
+        const side = -1; // far side (behind the body)
+        const rootX = s * 0.6;
+        const rootY = side * s * 0.09;
+        c.beginPath();
+        c.moveTo(rootX, rootY);
+        for (let i = 1; i <= NPTS; i++) {
+          const t = i / NPTS;
+          const bx = rootX - L * (0.25 + 0.65 * spd) * t;
+          const by = rootY + side * L * 0.42 * t * t;
+          const amp = s * 0.17 * t * (0.35 + 0.65 * spd);
+          const off = Math.sin(t * 5.5 - this.phase * 1.4 + this.whiskPh) * amp;
+          c.lineTo(bx, by + off);
+        }
+        c.stroke();
+      }
+      c.restore();
+    }
+
     // body — undulates while swimming: the ellipse flexes along a traveling wave (v3)
     const g = this.bodyGrad; // precomputed in constructor (static colors, local coords)
     const NSEG = 26; // outline samples for a smooth curve
@@ -655,33 +685,29 @@ class Fish {
     c.arc(s * 0.61, -s * 0.1, s * 0.055, 0, Math.PI * 2);
     c.fill();
 
-    // v16/v17: whiskers (barbels) — a pair from the snout on ~10% of fish, in one of
-    // three lengths, drawn in fish-local space so they track the heading.
-    // v18: loose ribbons flowing in the current — they trail back opposite the motion
-    // and a traveling wave runs down their length as the fish swims. The faster it
-    // swims, the further back they stream and the livelier they ripple; at rest they
-    // droop softly. Drawn at a fixed 50% opacity.
+    // v21: near-side whisker — drawn AFTER the body so it sits in front of the fish.
+    // (The far-side whisker is drawn before the body, above.) Together they form a
+    // pair from the snout on ~10% of fish, in one of three lengths, with loose ribbons
+    // flowing in the current and a traveling wave rippling down their length. Drawn at
+    // a fixed 50% opacity.
     if (this.whiskerLen) {
-      const L = this.whiskerLen * s;                     // chosen length tier at spawn
-      const spd = Math.min(1, this.speedFactor);         // current speed multiplier
-      const NPTS = 7;                                    // sample points per whisker
+      const L = this.whiskerLen * s;
+      const spd = Math.min(1, this.speedFactor);
+      const NPTS = 7;
       c.save();
       c.lineCap = "round";
       c.strokeStyle = this.whiskerStyle;
       c.lineWidth = Math.max(1, s * 0.045);
-      for (const side of [-1, 1]) {                       // one whisker each side
+      {
+        const side = 1; // near side (in front of the body)
         const rootX = s * 0.6;
-        const rootY = side * s * 0.09;                    // just off the midline at the snout
+        const rootY = side * s * 0.09;
         c.beginPath();
         c.moveTo(rootX, rootY);
         for (let i = 1; i <= NPTS; i++) {
-          const t = i / NPTS;                             // 0 at root → 1 at tip
-          // base flow: streams back with the current as the fish moves forward,
-          // drooping gently outward, easing out toward the loose tip
+          const t = i / NPTS;
           const bx = rootX - L * (0.25 + 0.65 * spd) * t;
           const by = rootY + side * L * 0.42 * t * t;
-          // traveling wave: ripples flow down the whisker (root → tip), loosest at the
-          // free end; this.phase advances with swim speed so they live up as it moves
           const amp = s * 0.17 * t * (0.35 + 0.65 * spd);
           const off = Math.sin(t * 5.5 - this.phase * 1.4 + this.whiskPh) * amp;
           c.lineTo(bx, by + off);
@@ -772,6 +798,15 @@ function strokeArc(c, pts) {
   c.stroke();
 }
 
+// v19: each bubble gets a subtle random tint — pure white up to a soft grey-blue
+function bubbleColor() {
+  const t = Math.random() * 0.85;    // keep it subtle, most stay near-white
+  const r = Math.round(255 - (255 - 196) * t);
+  const g = Math.round(255 - (255 - 214) * t);
+  const b = Math.round(255 - (255 - 238) * t);
+  return [r, g, b];
+}
+
 class Bubble {
   constructor(init, x, y, size) {
     if (x !== undefined) {           // spawned from a fish's mouth: tiny, one-shot
@@ -780,6 +815,7 @@ class Bubble {
       this.r = rand(1.4, 3.2) * s;
       this.speed = rand(45, 85) * (0.7 + 0.3 * s);
       this.p = rand(0, Math.PI * 2);
+      this.rgb = bubbleColor();
       this.isMouth = true;
     } else {
       this.reset(init);
@@ -791,6 +827,7 @@ class Bubble {
     this.r = rand(2, 7);
     this.speed = rand(35, 90);
     this.p = rand(0, Math.PI * 2);
+    this.rgb = bubbleColor();
     this.isMouth = false;
   }
   update(dt, t) {
@@ -799,14 +836,15 @@ class Bubble {
     if (this.y < -12) { if (this.isMouth) this.dead = true; else this.reset(false); }
   }
   draw(c) {
+    const [r, g, b] = this.rgb;
     c.lineWidth = 1;
-    c.strokeStyle = "rgba(255,255,255,0.35)";
-    c.fillStyle = "rgba(255,255,255,0.08)";
+    c.strokeStyle = `rgba(${r},${g},${b},0.35)`;
+    c.fillStyle = `rgba(${r},${g},${b},0.08)`;
     c.beginPath();
     c.arc(this.x, this.y, this.r, 0, Math.PI * 2);
     c.fill();
     c.stroke();
-    c.fillStyle = "rgba(255,255,255,0.45)";
+    c.fillStyle = `rgba(${r},${g},${b},0.45)`;
     c.beginPath();
     c.arc(this.x - this.r * 0.3, this.y - this.r * 0.3, this.r * 0.25, 0, Math.PI * 2);
     c.fill();
@@ -1000,9 +1038,9 @@ function buildScene() {
   }
 
   for (let i = 0; i < 5; i++) {
-    // random blur state: 0px (as-is), ~3px (semi-blurry), or ~7px (blurry) for visual variety
+    // random blur state: ~3px (semi-blurry), ~7px (blurry), or ~14px (very blurry) for visual variety
     const blurRoll = Math.random();
-    const blur = blurRoll < 0.34 ? 0 : (blurRoll < 0.67 ? 3 : 7);
+    const blur = blurRoll < 0.34 ? 3 : (blurRoll < 0.67 ? 7 : 14);
     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,