Upload index.html

index.html

@@ -22,12 +22,12 @@
 <script>
 (() => {
 "use strict";
-// ============ Aquarium v15 SPOTTY-3 — alt-fg base + spots / stripes / BOTH (~20/20/10) ==
-// Based on v14 SPOTTY-2 (rolling hills, three tail styles, yellow-green foreground grass),
-// plus: a single spawn roll gives each fish one of four looks — ~20% dark/cream spots,
-// ~20% tiger stripes (betta/tiger-barb style bars across the body), ~10% BOTH (spots
-// over stripes), or plain. Stripes ride the traveling body
-// wave and sit under the additive iridescent sheen, so they catch light as each swims.
+// ============ Aquarium v16 WHISKERS — alt-fg base + spots/stripes + whiskers (~10%) ==
+// Based on v15 SPOTTY-3 (rolling hills, three tail styles, yellow-green foreground grass,
+// ~20% spots / ~20% stripes / ~10% both), plus: an independent roll gives ~10% of fish
+// whiskers (barbels) — a forward-curving pair from the snout in one of THREE lengths
+// (short / medium / long), swaying gently as they swim. Whiskers are independent of the
+// body markings, so a whiskered fish may also be spotted, striped, both, or plain.
 // Iridescence + overhead streak unchanged.
 const canvas = document.getElementById("tank");
 const ctx = canvas.getContext("2d");
@@ -135,6 +135,20 @@ class Fish {
       this.spots = null;
       this.stripes = null;
     }
+    // v16: whiskers (barbels) — an independent ~10% roll. A whiskered fish gets a
+    // forward-curving pair from the snout in one of three length tiers (~even split),
+    // so the tank shows short, medium and long whiskers. Independent of spots/stripes,
+    // so any marked fish can also wear them.
+    if (Math.random() < 0.1) {
+      const tier = Math.random();                       // pick one of three lengths
+      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
+    } else {
+      this.whiskerLen = null;
+    }
     this.phase = rand(0, Math.PI * 2);
     // v9: after dark, most fish bed down low in the grass — only a small share still
     // hovers by the seaweed, and each of those keeps to its own stalk (no pile-ups)
@@ -524,6 +538,31 @@ 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.
+    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
+      c.save();
+      c.lineCap = "round";
+      c.strokeStyle = `hsla(${this.hue},55%,82%,${this.whiskerAlpha})`;
+      c.lineWidth = Math.max(1, s * 0.045);
+      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);
+        c.stroke();
+      }
+      c.restore();
+    }
+
     c.restore();
 
     // v7: overhead light streak — a soft line of light on whichever edge faces up,