Upload index.html

index.html

@@ -167,6 +167,30 @@ class Fish {
       desired = lerpAngle(desired, Math.atan2(H * 0.45 - this.y, W / 2 - this.x), fp * 1.6);
     }
 
+    // v7: separation steering — bend around nearby fish instead of ploughing into them.
+    // Only kicks in while actually swimming, so resting fish don't twitch at each other;
+    // the faster we swim, the earlier and harder we steer away.
+    const mySpeed = this.speed * this.speedFactor;
+    if (mySpeed > 0.3) {
+      let ax = 0, ay = 0, wsum = 0;
+      for (const o of fishes) {
+        if (o === this) continue;
+        const dx = o.x - this.x, dy = o.y - this.y;
+        const d2 = dx * dx + dy * dy;
+        const zone = (this.size + o.size) * 1.7; // notice radius scales with both fish
+        if (d2 < zone * zone && d2 > 0.01) {
+          const dd = Math.sqrt(d2);
+          const w = (1 - dd / zone) * Math.min(1, mySpeed); // close & fast → strong
+          ax -= (dx / dd) * w;
+          ay -= (dy / dd) * w;
+          wsum += w;
+        }
+      }
+      if (wsum > 0) {
+        desired = lerpAngle(desired, Math.atan2(ay, ax), Math.min(0.85, wsum * 0.45));
+      }
+    }
+
     // Limit turn rate so direction changes are smooth and fish-like
     let d = desired - this.angle;
     while (d > Math.PI) d -= 2 * Math.PI;
@@ -220,14 +244,15 @@ class Fish {
     // tail fin follows the body wave at its base, amplified (same phase → no fighting)
     const sway = Math.sin(-s * waveK + this.phase) * s * 0.34;
 
-    // tail fin
+    // tail fin (v7): rounded lobes instead of two pointed spikes — each tip is swept
+    // around by a curve whose control point sits just past where the old spike was
     c.fillStyle = `hsla(${this.hue},75%,52%,0.92)`;
     c.beginPath();
     c.moveTo(-s * 0.5, 0);
-    c.quadraticCurveTo(-s * 1.0, -s * 0.35 + sway, -s * 1.28, -s * 0.48 + sway);
-    c.lineTo(-s * 0.82, sway * 0.5);
-    c.lineTo(-s * 1.28, s * 0.48 + sway);
-    c.quadraticCurveTo(-s * 1.0, s * 0.35 + sway, -s * 0.5, 0);
+    c.quadraticCurveTo(-s * 1.04, -s * 0.36 + sway, -s * 1.22, -s * 0.44 + sway); // upper edge out toward the tip
+    c.quadraticCurveTo(-s * 1.34, -s * 0.52 + sway, -s * 0.86, sway * 0.5);      // rounded upper lobe → notch
+    c.quadraticCurveTo(-s * 1.34, s * 0.52 + sway, -s * 1.22, s * 0.44 + sway); // notch → rounded lower lobe
+    c.quadraticCurveTo(-s * 1.04, s * 0.36 + sway, -s * 0.5, 0);                // lower edge back to the base
     c.fill();
 
     // body — undulates while swimming: the ellipse flexes along a traveling wave (v3)
@@ -865,6 +890,31 @@ function frame(now) {
   updateGrass(t, dt);
 
   for (const f of fishes) f.update(dt);
+
+  // v7: fish gently bump each other — overlapping pairs are eased apart along their
+  // center line (weighted by size), so they nudge instead of stacking on top of each other
+  for (let i = 0; i < fishes.length; i++) {
+    const a = fishes[i];
+    for (let j = i + 1; j < fishes.length; j++) {
+      const b = fishes[j];
+      let dx = b.x - a.x, dy = b.y - a.y;
+      const minD = (a.size + b.size) * 0.62; // gentle: smaller than their visual length
+      const d2 = dx * dx + dy * dy;
+      if (d2 <= 0.01) {                      // exactly overlapping — nudge apart randomly
+        a.x -= rand(0.5, 1.5); a.y -= rand(0.5, 1.5);
+        b.x += rand(0.5, 1.5); b.y += rand(0.5, 1.5);
+      } else if (d2 < minD * minD) {
+        const dd = Math.sqrt(d2);
+        const overlap = (minD - dd) / minD;  // 0..1 how deep they are in each other
+        const push = overlap * 24 * dt;      // soft: only a few px/s even at full overlap
+        dx /= dd; dy /= dd;
+        const ma = b.size / (a.size + b.size), mb = a.size / (a.size + b.size);
+        a.x -= dx * push * 2 * ma; a.y -= dy * push * 2 * ma;
+        b.x += dx * push * 2 * mb; b.y += dy * push * 2 * mb;
+      }
+    }
+  }
+
   fishes.sort((a, b) => a.size - b.size); // small fish swim behind
   for (const f of fishes) f.draw(ctx);