Upload index.html

index.html

@@ -108,6 +108,13 @@ class Fish {
           x: 0.72 - t * 1.62 + rand(-0.07, 0.07), // +0.72s → -0.90s along the body
           w: rand(0.08, 0.2),                     // bar width, in units of s
           style,
+          // v14.1: organic shape — each bar bends and tapers instead of a straight line
+          cAmp: rand(0.03, 0.09),   // whole-bar bend amplitude (units of s)
+          cFreq: rand(0.8, 2.0),    // waves of bend across the bar's height
+          cPh:  rand(0, Math.PI * 2),
+          tAmp: rand(0.15, 0.45),   // width taper (fraction of half-width)
+          tFreq: rand(0.8, 2.0),
+          tPh:  rand(0, Math.PI * 2),
         });
       }
     } else {
@@ -416,26 +423,36 @@ class Fish {
       c.restore();
     }
 
-    // v14: tiger stripes on ~20% of fish (mutually exclusive with spots) — vertical bars
-    // across the body. Each bar is a thin polygon sampled along its width so it bends
-    // with the traveling wave (wy), clipped to the outline, drawn BEFORE the additive
+    // v14.1: tiger stripes on ~20% of fish (mutually exclusive with spots). Each bar is
+    // a wavy, tapering band — its centerline bends and its width varies down the body,
+    // so no stripe reads as a straight line. Sampled along both edges so it still rides
+    // the traveling wave (wy); clipped to the outline and drawn BEFORE the additive
     // sheen so the iridescent shimmer still plays across the stripes.
     if (this.stripes) {
       c.save();
       c.clip(bodyPath);
+      const N = 8;                    // samples down each edge for smooth organic curves
       for (const st of this.stripes) {
         const sx = st.x * s;          // bar center, fish-local x
-        const hw = st.w * s / 2;      // half-width
-        const M = 5;                  // samples across the bar so it follows wy(x)
+        const hw0 = st.w * s / 2;     // base half-width
+        const H = s * 1.35;           // vertical span (clipped by the body outline)
         c.fillStyle = st.style;
         c.beginPath();
-        for (let j = 0; j <= M; j++) {
-          const x = sx - hw + (j / M) * (2 * hw);
-          if (j === 0) c.moveTo(x, wy(x) - s * 0.55); else c.lineTo(x, wy(x) - s * 0.55);
+        // left edge, top → bottom: bend the centerline + taper the width with t
+        for (let j = 0; j <= N; j++) {
+          const t = j / N;
+          const cx = sx + Math.sin(t * st.cFreq * Math.PI + st.cPh) * st.cAmp * s;
+          const hwL = hw0 * (1 + st.tAmp * Math.sin(t * st.tFreq * Math.PI + st.tPh));
+          const xL = cx - hwL, yL = wy(xL) + (t - 0.5) * H;
+          if (j === 0) c.moveTo(xL, yL); else c.lineTo(xL, yL);
         }
-        for (let j = M; j >= 0; j--) {
-          const x = sx - hw + (j / M) * (2 * hw);
-          c.lineTo(x, wy(x) + s * 0.55);
+        // right edge, bottom → top
+        for (let j = N; j >= 0; j--) {
+          const t = j / N;
+          const cx = sx + Math.sin(t * st.cFreq * Math.PI + st.cPh) * st.cAmp * s;
+          const hwR = hw0 * (1 + st.tAmp * Math.sin(t * st.tFreq * Math.PI + st.tPh));
+          const xR = cx + hwR, yR = wy(xR) + (t - 0.5) * H;
+          c.lineTo(xR, yR);
         }
         c.closePath();
         c.fill();