Upload index.html

index.html

@@ -45,6 +45,39 @@ function lerpAngle(a, b, t) {
 
 const HUES = [8, 35, 46, 172, 195, 215, 262, 320];
 const TAIL_TYPES = ['classic', 'fan', 'streamer']; // v11: three tail-fin styles, one per fish
+// v18: koi colourations — large irregular patches on a white/ivory base. Three classic
+// looks: kohaku (red/orange), sanke (red + black), golden (amber/gold). Patches are
+// sampled in units of `size` like the spots, so they scale with each fish.
+function genKoiPatches(type) {
+  const palettes = {
+    kohaku: [
+      () => `hsla(${rand(4, 20)},${rand(85, 98)}%,${rand(50, 62)}%,0.92)`,   // vermilion
+      () => `hsla(${rand(16, 32)},${rand(85, 98)}%,${rand(54, 66)}%,0.88)`,  // orange
+    ],
+    sanke: [
+      () => `hsla(${rand(2, 14)},${rand(85, 98)}%,${rand(48, 60)}%,0.92)`,   // red
+      () => `hsla(${rand(205, 230)},${rand(18, 38)}%,${rand(12, 22)}%,0.9)`, // charcoal/black
+    ],
+    golden: [
+      () => `hsla(${rand(38, 48)},${rand(85, 98)}%,${rand(55, 66)}%,0.92)`,  // gold
+      () => `hsla(${rand(26, 40)},${rand(85, 98)}%,${rand(50, 62)}%,0.88)`,  // amber
+    ],
+  };
+  const styles = palettes[type];
+  const arr = [];
+  const nPatches = 4 + ((Math.random() * 4) | 0); // 4..7 large blobs
+  for (let i = 0; i < nPatches; i++) {
+    const th = rand(0, Math.PI * 2);
+    const rr = Math.sqrt(Math.random()) * 0.85;   // uniform in ellipse, kept off the rim
+    arr.push({
+      x: Math.cos(th) * rr,        // along body axis (units of s)
+      y: Math.sin(th) * rr * 0.42, // across body (matches the 0.42 ellipse ratio)
+      r: rand(0.3, 0.52),          // large patches (units of s)
+      style: styles[Math.random() < 0.5 ? 0 : 1](),
+    });
+  }
+  return arr;
+}
 let fishes = [], bubbles = [], seaweeds = [], motes = [], rays = [], rocks = [], grass = [], fgGrass = [];
 let curNight = 0; // v7: shared night factor (dims the top-light + sheen)
 let plantPoints = []; // collision points along every stalk/branch, rebuilt each frame
@@ -57,7 +90,30 @@ class Fish {
     this.x = rand(60, W - 60);
     this.y = rand(H * 0.15, H * 0.72);
     this.angle = Math.random() < 0.5 ? rand(-0.4, 0.4) : Math.PI + rand(-0.4, 0.4);
-    this.hue = pick(HUES);
+    // v18: color palette — silver/gray + three koi colourations (replaces dark blue & lime green)
+    const specialRoll = Math.random();
+    this.isKoi = false;
+    this.koiPatches = null;
+    if (specialRoll < 0.15) {
+      // Silver/gray fish — low saturation, medium-high lightness
+      this.hue = rand(200, 240); // slight blue-gray tint
+      this.saturation = rand(8, 18);
+      this.lightness = rand(60, 75);
+    } else if (specialRoll < 0.45) {
+      // Koi — a white/ivory base with large coloured patches; the three classic
+      // colourations are split roughly evenly across this 30% band.
+      this.isKoi = true;
+      const koiType = specialRoll < 0.25 ? 'kohaku' : specialRoll < 0.35 ? 'sanke' : 'golden';
+      this.hue = rand(40, 50);          // warm ivory tint for the base
+      this.saturation = rand(12, 22);   // low saturation → white body
+      this.lightness = rand(88, 94);    // high lightness → white/ivory base
+      this.koiPatches = genKoiPatches(koiType);
+    } else {
+      // Standard colored fish from the original palette
+      this.hue = pick(HUES);
+      this.saturation = 75;
+      this.lightness = 52;
+    }
     this.tailType = pick(TAIL_TYPES); // v11: random tail-fin style for variety
 
     // v13/v14/v15: random body markings — one roll per fish decides the look:
@@ -72,7 +128,11 @@ class Fish {
         const th = rand(0, Math.PI * 2);
         const rr = Math.sqrt(Math.random()) * 0.9;  // uniform in ellipse, kept off the rim
         let style;
-        if (pale) {
+        if (this.saturation < 30) {
+          // v14: gray/silver fish — keep spots low-saturation to match
+          const spotLight = pale ? rand(75, 88) : rand(35, 50);
+          style = `hsla(${this.hue + rand(-24, 24)},${rand(5, 15)}%,${spotLight}%,${rand(0.35, 0.6).toFixed(2)})`;
+        } else if (pale) {
           // cream/ivory spots — pearl-gourami / leopard pattern
           style = `hsla(${this.hue + rand(-24, 24)},${rand(45, 70)}%,${rand(82, 94)}%,${rand(0.35, 0.6).toFixed(2)})`;
         } else {
@@ -94,11 +154,15 @@ class Fish {
       // jitter; each bar bends and tapers instead of being a straight line.
       const arr = [];
       const nStr = 5 + ((Math.random() * 4) | 0);   // 5..8 bars
-      const darkBars = Math.random() < 0.72;        // mostly classic dark bars, sometimes pale
+      const darkBars = this.saturation >= 30 && Math.random() < 0.72; // v14: gray fish get light stripes
       for (let i = 0; i < nStr; i++) {
         const t = nStr > 1 ? i / (nStr - 1) : 0;    // 0 behind head → 1 near tail base
         let style;
-        if (darkBars) {
+        if (this.saturation < 30) {
+          // v14: gray/silver fish — keep stripes low-saturation to match
+          const stripeLight = darkBars ? rand(35, 50) : rand(75, 88);
+          style = `hsla(${this.hue + rand(-14, 14)},${rand(5, 15)}%,${stripeLight}%,${rand(0.5, 0.75).toFixed(2)})`;
+        } else if (darkBars) {
           // classic dark tiger bars
           style = `hsla(${this.hue + rand(-14, 14)},${rand(65, 90)}%,${rand(18, 30)}%,${rand(0.5, 0.75).toFixed(2)})`;
         } else {
@@ -120,7 +184,8 @@ class Fish {
       }
       return arr;
     };
-    const markRoll = Math.random();
+    // v18: koi already carry their own large patches — skip the random spots/stripes
+    const markRoll = this.isKoi ? 1 : Math.random();
     if (markRoll < 0.2) {
       this.spots = genSpots();
       this.stripes = null;
@@ -144,8 +209,8 @@ class Fish {
       this.whiskerLen = tier < 1 / 3 ? rand(0.45, 0.6)
                    : tier < 2 / 3 ? rand(0.8, 1.0)
                    :                 rand(1.25, 1.5);   // in units of size s
-      this.whiskPh = rand(0, Math.PI * 2);              // per-fish sway phase
-      this.whiskerAlpha = rand(0.45, 0.62);             // delicate translucency
+      this.whiskPh = rand(0, Math.PI * 2);              // per-fish wave phase offset
+      this.whiskerAlpha = 0.5;                          // v18: fixed 50% opacity
     } else {
       this.whiskerLen = null;
     }
@@ -254,7 +319,10 @@ class Fish {
           this.seaweedPref = (Math.random() * seaweeds.length) | 0;
         }
         const w = seaweeds[this.seaweedPref];
-        const k = night * 0.8;
+        // v13: plinko fix — stalks near the sides pull harder so fish actually reach them
+        // instead of being deflected back toward the middle by the boundary steering.
+        const edgeT = Math.abs(w.x / W - 0.5) * 2;      // 0 at center → 1 at glass
+        const k = night * 0.8 * (1 + edgeT * 0.9);       // up to ~1.9x at the very edge
         wx += (w.x - wx) * k;
         wy += (w.yMid - wy) * k;
       }
@@ -270,6 +338,12 @@ class Fish {
     else if (this.x > W - mX)   pull = Math.max(pull, 1 - (W - this.x) / mX);
     if (this.y < mTop)          pull = Math.max(pull, 1 - this.y / mTop);
     else if (this.y > H - mBot) pull = Math.max(pull, 1 - (H - this.y) / mBot);
+    // v13: plinko fix — grass-sleepers settling at night are less deflected by the
+    // boundary, so they can reach side positions instead of being pushed to the middle.
+    if (pull > 0 && this.grassSleeper && night > 0.25) {
+      const settle = Math.min(1, (night - 0.25) / 0.75); // ramps up as they get sleepier
+      pull *= (1 - settle * 0.55);                        // up to ~55% weaker when fully settled
+    }
     if (pull > 0) {
       const cx = W / 2, cy = H * 0.45;
       desired = lerpAngle(desired, Math.atan2(cy - this.y, cx - this.x), Math.min(1, pull * 1.5));
@@ -384,7 +458,8 @@ class Fish {
     // tail fin (v7 rounded / v11 three styles): each tip is swept around by a curve
     // whose control point sits just past where the old spike was. The style is fixed
     // per fish at spawn so the school has variety in its tails.
-    c.fillStyle = `hsla(${this.hue},75%,52%,0.92)`;
+    // v14: use per-fish saturation and lightness for expanded color palette
+    c.fillStyle = `hsla(${this.hue},${this.saturation}%,${this.lightness}%,0.92)`;
     c.beginPath();
     if (this.tailType === 'fan') {
       // Broad, rounded fan (betta/goldfish-style): wide spread, tips high and far out,
@@ -412,8 +487,9 @@ class Fish {
 
     // body — undulates while swimming: the ellipse flexes along a traveling wave (v3)
     const g = c.createLinearGradient(0, -s * 0.5, 0, s * 0.5);
-    g.addColorStop(0, `hsl(${this.hue},82%,64%)`);
-    g.addColorStop(1, `hsl(${this.hue},70%,44%)`);
+    // v14: use per-fish saturation and lightness for expanded color palette
+    g.addColorStop(0, `hsl(${this.hue},${Math.min(100, this.saturation * 1.08)}%,${this.lightness + 12}%)`);
+    g.addColorStop(1, `hsl(${this.hue},${this.saturation * 0.9}%,${this.lightness - 8}%)`);
     const NSEG = 26; // outline samples for a smooth curve
     // wave offset at any x along the body: rigid at head, full flex at tail.
     // Shared with the dorsal fin so it stays glued to the moving back (v4)
@@ -471,6 +547,22 @@ class Fish {
       c.restore();
     }
 
+    // v18: koi patches — large irregular blobs clipped to the body outline, riding the
+    // traveling wave (wy) so they flex with the undulating body, drawn BEFORE the
+    // additive sheen so the iridescent shimmer still plays across them.
+    if (this.koiPatches) {
+      c.save();
+      c.clip(bodyPath);
+      for (const kp of this.koiPatches) {
+        const sx = kp.x * s;
+        c.fillStyle = kp.style;
+        c.beginPath();
+        c.arc(sx, kp.y * s + wy(sx), kp.r * s, 0, Math.PI * 2);
+        c.fill();
+      }
+      c.restore();
+    }
+
     // v13: random spots on ~20% of fish (or over the stripes for the 10% mixed) —
     // clipped to the body so they never spill, riding the traveling wave (wy) so they
     // flex with the undulating body, and drawn BEFORE the additive sheen so the
@@ -510,7 +602,9 @@ class Fish {
 
     // dorsal fin — rides the body wave at its attachment points so it
     // never disconnects as the back undulates (v4)
-    c.fillStyle = `hsla(${this.hue},80%,50%,0.9)`;
+    // v17: matches the fish's own color instead of a fixed blue — silver fish no longer
+    // sprout mismatched blue fins
+    c.fillStyle = `hsla(${this.hue},${this.saturation}%,${this.lightness}%,0.9)`;
     c.beginPath();
     c.moveTo(-s * 0.15, -s * 0.36 + wy(-s * 0.15));
     c.quadraticCurveTo(s * 0.05, -s * 0.78 + wy(s * 0.05), s * 0.38, -s * 0.4 + wy(s * 0.38));
@@ -522,10 +616,15 @@ class Fish {
     c.save();
     c.translate(s * 0.05, s * 0.12);
     c.rotate(0.7 + flap);
-    c.fillStyle = `hsla(${this.hue},85%,66%,0.8)`;
+    // 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 = `hsla(${this.hue},${this.saturation}%,${this.lightness}%,0.8)`;
     c.beginPath();
     c.ellipse(0, 0, s * 0.3, s * 0.14, 0, 0, Math.PI * 2);
     c.fill();
+    c.strokeStyle = `hsla(${this.hue},${Math.min(100, this.saturation * 1.15)}%,${Math.max(8, this.lightness - 20)}%,0.5)`;
+    c.lineWidth = Math.max(1, s * 0.03);
+    c.stroke();
     c.restore();
 
     // eye
@@ -538,12 +637,16 @@ class Fish {
     c.arc(s * 0.61, -s * 0.1, s * 0.055, 0, Math.PI * 2);
     c.fill();
 
-    // v16: whiskers (barbels) — a forward-curving pair from the snout on ~10% of fish,
-    // in one of three lengths. Drawn in fish-local space so they track the heading, and
-    // swaying gently with an independent phase so they read as soft feelers, not spikes.
+    // 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.
     if (this.whiskerLen) {
       const L = this.whiskerLen * s;                     // chosen length tier at spawn
-      const swayW = Math.sin(this.phase * 1.2 + this.whiskPh); // gentle independent sway
+      const spd = Math.min(1, this.speedFactor);         // current speed multiplier
+      const NPTS = 7;                                    // sample points per whisker
       c.save();
       c.lineCap = "round";
       c.strokeStyle = `hsla(${this.hue},55%,82%,${this.whiskerAlpha})`;
@@ -551,13 +654,20 @@ class Fish {
       for (const side of [-1, 1]) {                       // one whisker each side
         const rootX = s * 0.6;
         const rootY = side * s * 0.09;                    // just off the midline at the snout
-        const tipX = rootX + L * (0.85 + 0.12 * Math.sin(this.whiskPh));
-        const tipY = rootY + side * L * 0.36 + swayW * s * 0.1;
-        const ctrlX = rootX + L * 0.55;
-        const ctrlY = rootY - side * L * 0.1 - swayW * s * 0.07;
         c.beginPath();
         c.moveTo(rootX, rootY);
-        c.quadraticCurveTo(ctrlX, ctrlY, tipX, tipY);
+        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 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);
+        }
         c.stroke();
       }
       c.restore();