Upload index.html

index.html

@@ -22,11 +22,13 @@
 <script>
 (() => {
 "use strict";
-// ============ Aquarium v12 ALT-FG — hilly terrain + foreground grass (50% size) =====
-// Based on v10 ALT (rolling-hills sand bed), plus front-glass foreground grass planted
-// in the low band below the sand line and drawn on top of everything. The fg clumps are
-// 50% smaller than the original fg version: half height, half width, half spread —
-// so they read as near-glass flora without swallowing the hilly scene.
+// ============ Aquarium v14 SPOTTY-2 — alt-fg base + spots OR tiger stripes (~20% ea) ===
+// Based on v13 SPOTTY (rolling hills, three tail styles, yellow-green foreground grass),
+// plus: a single spawn roll gives each fish one of three looks — ~20% dark/cream spots,
+// ~20% tiger stripes (betta/tiger-barb style bars across the body), or plain. The two
+// markings are mutually exclusive (no fish wears both). Stripes ride the traveling body
+// wave and sit under the additive iridescent sheen, so they catch light as each swims.
+// Iridescence + overhead streak unchanged.
 const canvas = document.getElementById("tank");
 const ctx = canvas.getContext("2d");
 let W = 0, H = 0;
@@ -57,6 +59,61 @@ class Fish {
     this.angle = Math.random() < 0.5 ? rand(-0.4, 0.4) : Math.PI + rand(-0.4, 0.4);
     this.hue = pick(HUES);
     this.tailType = pick(TAIL_TYPES); // v11: random tail-fin style for variety
+
+    // v13/v14: random body markings — ~20% spots OR ~20% tiger stripes (mutually
+    // exclusive; one roll per fish, never both). Sampled in units of `size` so they
+    // scale with the fish, stored as pre-built fill styles — zero per-frame string work.
+    const markRoll = Math.random();
+    if (markRoll < 0.2) {
+      this.spots = [];
+      const nSpots = 7 + ((Math.random() * 9) | 0); // 7..15 spots
+      const pale = Math.random() < 0.45;            // cream/ivory vs dark spotting style
+      for (let i = 0; i < nSpots; i++) {
+        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) {
+          // 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 {
+          // dark spots — dace / leopard pattern
+          style = `hsla(${this.hue + rand(-18, 18)},${rand(60, 85)}%,${rand(24, 34)}%,${rand(0.45, 0.7).toFixed(2)})`;
+        }
+        this.spots.push({
+          x: Math.cos(th) * rr,        // along body axis, in units of s
+          y: Math.sin(th) * rr * 0.42, // across body (matches the 0.42 ellipse ratio)
+          r: rand(0.05, 0.13),         // spot radius, in units of s
+          style,
+        });
+      }
+      this.stripes = null;
+    } else if (markRoll < 0.4) {
+      // v14: tiger stripes — vertical bars across the body (betta / tiger-barb style),
+      // spread from just behind the head to near the tail base with organic jitter.
+      this.spots = null;
+      this.stripes = [];
+      const nStr = 5 + ((Math.random() * 4) | 0);   // 5..8 bars
+      const darkBars = Math.random() < 0.72;        // mostly classic dark bars, sometimes pale
+      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) {
+          // 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 {
+          // cream/ivory bars — pale tiger variant
+          style = `hsla(${this.hue + rand(-24, 24)},${rand(45, 70)}%,${rand(80, 93)}%,${rand(0.35, 0.6).toFixed(2)})`;
+        }
+        this.stripes.push({
+          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,
+        });
+      }
+    } else {
+      this.spots = null;
+      this.stripes = 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)
@@ -343,6 +400,49 @@ class Fish {
     c.fillStyle = g;
     c.fill(bodyPath);
 
+    // v13: random spots on ~20% of fish — 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 iridescent shimmer still plays across them.
+    if (this.spots) {
+      c.save();
+      c.clip(bodyPath);
+      for (const sp of this.spots) {
+        const sx = sp.x * s;
+        c.fillStyle = sp.style;
+        c.beginPath();
+        c.arc(sx, sp.y * s + wy(sx), sp.r * s, 0, Math.PI * 2);
+        c.fill();
+      }
+      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
+    // sheen so the iridescent shimmer still plays across the stripes.
+    if (this.stripes) {
+      c.save();
+      c.clip(bodyPath);
+      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)
+        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);
+        }
+        for (let j = M; j >= 0; j--) {
+          const x = sx - hw + (j / M) * (2 * hw);
+          c.lineTo(x, wy(x) + s * 0.55);
+        }
+        c.closePath();
+        c.fill();
+      }
+      c.restore();
+    }
+
     // v7: efficient iridescence — a sheen whose hue shimmers with the swim phase,
     // so scales appear to catch the light while moving. One gradient + one fill.
     const shimmer = Math.sin(this.phase * 1.6) * 0.5 + 0.5;       // 0..1 as it swims