Upload index.html

index.html

@@ -22,11 +22,11 @@
 <script>
 (() => {
 "use strict";
-// ============ 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
+// ============ 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.
 // Iridescence + overhead streak unchanged.
 const canvas = document.getElementById("tank");
@@ -60,12 +60,12 @@ class Fish {
     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 = [];
+    // v13/v14/v15: random body markings — one roll per fish decides the look:
+    // ~20% spots, ~20% tiger stripes, ~10% BOTH (spots over stripes), else plain.
+    // Sampled in units of `size` so they scale with the fish; stored as pre-built
+    // fill styles — zero per-frame string work.
+    const genSpots = () => {
+      const arr = [];
       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++) {
@@ -79,19 +79,20 @@ class Fish {
           // 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({
+        arr.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 = [];
+      return arr;
+    };
+    const genStripes = () => {
+      // v14/v14.1: 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; 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
       for (let i = 0; i < nStr; i++) {
@@ -104,7 +105,7 @@ class Fish {
           // 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({
+        arr.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,
@@ -117,6 +118,19 @@ class Fish {
           tPh:  rand(0, Math.PI * 2),
         });
       }
+      return arr;
+    };
+    const markRoll = Math.random();
+    if (markRoll < 0.2) {
+      this.spots = genSpots();
+      this.stripes = null;
+    } else if (markRoll < 0.4) {
+      this.spots = null;
+      this.stripes = genStripes();
+    } else if (markRoll < 0.5) {
+      // v15: the mixed breed — stripes as the base pattern, spots scattered over them
+      this.spots = genSpots();
+      this.stripes = genStripes();
     } else {
       this.spots = null;
       this.stripes = null;
@@ -407,27 +421,10 @@ 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
+    // v15: stripes first when both are present — bars form the base pattern,
+    // spots scatter on top. Each is clipped to the body so nothing spills, and both
+    // ride 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.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.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);
@@ -460,6 +457,23 @@ class Fish {
       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
+    // 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();
+    }
+
     // 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