Upload index.html

index.html

@@ -43,7 +43,7 @@ function lerpAngle(a, b, t) {
   return a + d * t;
 }
 
-const HUES = [8, 35, 46, 172, 195, 215, 262, 320];
+const HUES = [8, 35, 46, 172, 195, 215, 262];
 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
@@ -62,17 +62,22 @@ function genKoiPatches(type) {
       () => `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
     ],
+    goldspot: [
+      () => `hsla(${rand(40, 50)},${rand(15, 30)}%,${rand(92, 98)}%,0.9)`,   // white spots
+      () => `hsla(${rand(40, 50)},${rand(15, 30)}%,${rand(92, 98)}%,0.9)`,   // white spots (duplicate for consistent selection)
+    ],
   };
   const styles = palettes[type];
   const arr = [];
-  const nPatches = 4 + ((Math.random() * 4) | 0); // 4..7 large blobs
+  const isGoldspot = type === 'goldspot';
+  const nPatches = isGoldspot ? (8 + ((Math.random() * 8) | 0)) : (4 + ((Math.random() * 4) | 0)); // goldspot: 8..15, else 4..7
   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)
+      r: isGoldspot ? rand(0.06, 0.14) : rand(0.3, 0.52), // goldspot: small dots, else large patches
       style: styles[Math.random() < 0.5 ? 0 : 1](),
     });
   }
@@ -103,10 +108,18 @@ class Fish {
       // 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
+      const koiType = specialRoll < 0.22 ? 'kohaku' : specialRoll < 0.30 ? 'sanke' : specialRoll < 0.38 ? 'golden' : 'goldspot';
+      if (koiType === 'goldspot') {
+        // Golden orange fish with white spots
+        this.hue = rand(30, 42);          // golden orange
+        this.saturation = rand(85, 95);   // high saturation → vivid color
+        this.lightness = rand(50, 65);    // medium lightness → rich gold
+      } else {
+        // Classic koi — white/ivory base
+        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
@@ -214,6 +227,22 @@ class Fish {
     } else {
       this.whiskerLen = null;
     }
+
+    // PERF: precompute per-fish paint styles once. draw() used to rebuild these
+    // template strings every frame for every fish — now it's a property read.
+    this.tailFillStyle   = `hsla(${this.hue},${this.saturation}%,${this.lightness}%,0.92)`;
+    this.dorsalFillStyle = `hsla(${this.hue},${this.saturation}%,${this.lightness}%,0.9)`;
+    this.pevFillStyle    = `hsla(${this.hue},${this.saturation}%,${this.lightness}%,0.8)`;
+    this.pevStrokeStyle  = `hsla(${this.hue},${Math.min(100, this.saturation * 1.15)}%,${Math.max(8, this.lightness - 20)}%,0.5)`;
+    this.whiskerStyle    = `hsla(${this.hue},55%,82%,${this.whiskerAlpha || 0.5})`;
+
+    // PERF: the body gradient depends only on fixed per-fish colors and fish-local
+    // coordinates, so build it once instead of recreating it every frame.
+    const bg = ctx.createLinearGradient(0, -this.size * 0.5, 0, this.size * 0.5);
+    bg.addColorStop(0, `hsl(${this.hue},${Math.min(100, this.saturation * 1.08)}%,${this.lightness + 12}%)`);
+    bg.addColorStop(1, `hsl(${this.hue},${this.saturation * 0.9}%,${this.lightness - 8}%)`);
+    this.bodyGrad = bg;
+
     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)
@@ -459,7 +488,7 @@ class Fish {
     // 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.
     // v14: use per-fish saturation and lightness for expanded color palette
-    c.fillStyle = `hsla(${this.hue},${this.saturation}%,${this.lightness}%,0.92)`;
+    c.fillStyle = this.tailFillStyle;
     c.beginPath();
     if (this.tailType === 'fan') {
       // Broad, rounded fan (betta/goldfish-style): wide spread, tips high and far out,
@@ -486,10 +515,7 @@ class Fish {
     c.fill();
 
     // body — undulates while swimming: the ellipse flexes along a traveling wave (v3)
-    const g = c.createLinearGradient(0, -s * 0.5, 0, s * 0.5);
-    // 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 g = this.bodyGrad; // precomputed in constructor (static colors, local coords)
     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)
@@ -584,10 +610,18 @@ class Fish {
     // 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
     const iridHue = this.hue + 40 * Math.sin(this.phase * 2.3);   // hue drifts with phase
-    const ig = c.createLinearGradient(-s, -s*0.3, s, s*0.35);
-    ig.addColorStop(0.0, `hsla(${this.hue},95%,72%,${0.10 + 0.18*shimmer})`);
-    ig.addColorStop(0.5, `hsla(${iridHue},90%,70%,${0.04 + 0.10*shimmer})`);
-    ig.addColorStop(1.0, `hsla(${this.hue + 200},85%,68%,${0.03 + 0.08*shimmer})`);
+    // PERF: cache the sheen gradient. Its inputs move smoothly, so quantize them to a
+    // tiny grid (1/31 shimmer steps, 1° hue) and reuse until the cell changes — this
+    // skips one createLinearGradient + 3 addColorStop calls on most frames.
+    const igKey = Math.round(shimmer * 31) * 512 + (Math.round(iridHue) + 64);
+    if (igKey !== this._igKey || !this._igGrad) {
+      this._igGrad = c.createLinearGradient(-s, -s*0.3, s, s*0.35);
+      this._igGrad.addColorStop(0.0, `hsla(${this.hue},95%,72%,${0.10 + 0.18*shimmer})`);
+      this._igGrad.addColorStop(0.5, `hsla(${iridHue},90%,70%,${0.04 + 0.10*shimmer})`);
+      this._igGrad.addColorStop(1.0, `hsla(${this.hue + 200},85%,68%,${0.03 + 0.08*shimmer})`);
+      this._igKey = igKey;
+    }
+    const ig = this._igGrad;
     c.save();
     c.globalCompositeOperation = "lighter"; // additive sheen: reads as light on scales
     c.fillStyle = ig;
@@ -604,7 +638,7 @@ class Fish {
     // never disconnects as the back undulates (v4)
     // 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.fillStyle = this.dorsalFillStyle;
     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));
@@ -618,11 +652,11 @@ class Fish {
     c.rotate(0.7 + flap);
     // 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.fillStyle = this.pevFillStyle;
     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.strokeStyle = this.pevStrokeStyle;
     c.lineWidth = Math.max(1, s * 0.03);
     c.stroke();
     c.restore();
@@ -649,7 +683,7 @@ class Fish {
       const NPTS = 7;                                    // sample points per whisker
       c.save();
       c.lineCap = "round";
-      c.strokeStyle = `hsla(${this.hue},55%,82%,${this.whiskerAlpha})`;
+      c.strokeStyle = this.whiskerStyle;
       c.lineWidth = Math.max(1, s * 0.045);
       for (const side of [-1, 1]) {                       // one whisker each side
         const rootX = s * 0.6;
@@ -808,15 +842,27 @@ function buildScene() {
     const clusterHue = rand(95, 145);
     const nStalks = 3 + ((Math.random() * 4) | 0); // 3..6 stalks per bundle
     for (let j = 0; j < nStalks; j++) {
+      const hue = clusterHue + rand(-10, 10);
       const st = {
         x: cx + rand(-16, 16),
         h: rand(H * 0.12, H * 0.34),
         segs: 8,
         phase: rand(0, Math.PI * 2),
         speed: rand(0.9, 1.7),
-        hue: clusterHue + rand(-10, 10),
+        hue,
         width: rand(4, 8),
         touch: 0,
+        // v15: organic rest curve — each stalk leans and waves like real seaweed
+        // instead of standing perfectly straight. Also fed into the physics (updatePlants)
+        // so fish push the stalk where it actually looks. Weighted by f → root stays planted.
+        cA1: rand(5, 12), cF1: rand(0.9, 1.8), cP1: rand(0, Math.PI * 2),
+        cA2: rand(2, 6),  cF2: rand(2.2, 3.6), cP2: rand(0, Math.PI * 2),
+        tipW: rand(1.4, 2.6), // v15: blade tapers from width → tipW up the stipe
+        // PERF: stroke styles precomputed once (hue is fixed per stalk) — drawSeaweed
+        // used to rebuild both template strings every frame for every stalk.
+        stalkStyle: `hsla(${hue},55%,36%,0.92)`,
+        branchStyle: `hsla(${hue + 8},60%,46%,0.9)`,
+        midStyle: `hsla(${hue - 8},48%,27%,0.45)`, // v15: faint leaf vein down the blade
         off: new Float32Array(9),   // lateral bend per segment (fish push leaves aside)
         offV: new Float32Array(9),  // velocity of that bend
         branches: [],
@@ -833,12 +879,19 @@ function buildScene() {
           ph: rand(0, Math.PI * 2),
           flowers: Math.random() < 0.3 ? (() => { // ~30% of branches bloom with 1-3 heads (v3)
             const n = 1 + ((Math.random() * 3) | 0); // 1..3 flowers per branch
-            return Array.from({ length: n }, () => ({
-              t: rand(0.45, 1),                      // where along the branch it sits (tip zone)
-              hue: (Math.random() * 360) | 0,        // colourful — full spectrum
-              r: rand(4, 7),                         // head size
-              petals: 5 + ((Math.random() * 3) | 0)  // 5..7 petals
-            }));
+            return Array.from({ length: n }, () => {
+              const hue = (Math.random() * 360) | 0; // colourful — full spectrum
+              return {
+                t: rand(0.45, 1),                      // where along the branch it sits (tip zone)
+                hue,
+                r: rand(4, 7),                         // head size
+                petals: 5 + ((Math.random() * 3) | 0), // 5..7 petals
+                // PERF: paint styles precomputed once — drawFlowerHead used to rebuild
+                // these strings per petal, per frame.
+                petalFill: `hsla(${hue},85%,64%,0.95)`,
+                centerFill: `hsla(${(hue + 45) % 360},92%,78%,0.95)`
+              };
+            });
           })() : []
         });
       }
@@ -864,7 +917,12 @@ function buildScene() {
         speed: rand(1.3, 2.8),            // quicker, finer sway than seaweed
         hue: baseHue + rand(-9, 9),
         width: rand(1.4, 2.8),
-        ripple: 0                          // agitation from nearby fish (0..1)
+        ripple: 0,                         // agitation from nearby fish (0..1)
+        // v16: organic rest-curve + segmented blade outline (like seaweed)
+        cA1: rand(-5, 5),                  // primary bend amplitude
+        cF1: rand(2.2, 4.5),               // frequency along blade length
+        cP1: rand(0, Math.PI * 2),         // phase offset
+        segs: 3 + ((Math.random() * 2) | 0) // 3-4 segments for tapered outline
       });
     }
   }
@@ -888,7 +946,12 @@ function buildScene() {
         phase: rand(0, Math.PI * 2),
         speed: rand(0.8, 1.6),         // slower, heavier sway than the tiny mid-ground grass
         hue: baseHue + rand(-10, 10),
-        width: rand(1.75, 3.5)         // 50%: half thickness (was 3.5..7)
+        width: rand(1.75, 3.5),        // 50%: half thickness (was 3.5..7)
+        // v16: organic rest-curve + segmented blade outline (like seaweed)
+        cA1: rand(-8, 8),              // primary bend amplitude (larger for foreground)
+        cF1: rand(2, 4),               // frequency along blade length
+        cP1: rand(0, Math.PI * 2),     // phase offset
+        segs: 4 + ((Math.random() * 2) | 0) // 4-5 segments for tapered outline
       });
     }
   }
@@ -1003,9 +1066,18 @@ function drawBackground(light) {
   ctx.fillRect(0, 0, W, H);
 }
 
+// PERF: shared scratch arrays for drawRays. The beam spines used to allocate fresh
+// point arrays — plus ~72 tiny [x,y] pairs per ray, per frame. Rendering is sequential,
+// so one set of preallocated slots serves every ray with zero per-frame allocation.
+const RAY_SEGS = 18; // vertical resolution of each beam's undulating spine
+const _rayL = [], _rayR = [], _rayLC = [], _rayRC = [];
+for (let i = 0; i <= RAY_SEGS; i++) {
+  _rayL.push([0, 0]); _rayR.push([0, 0]); _rayLC.push([0, 0]); _rayRC.push([0, 0]);
+}
+
 function drawRays(t, light) {
   const [rr, rg, rb] = light.ray;
-  const segs = 18; // vertical resolution of each beam's undulating spine
+  const segs = RAY_SEGS;
   for (const r of rays) {
     // slow horizontal drift of the whole beam (kept from v1)
     const off = Math.sin(t * r.speed * 6 + r.x) * 55;
@@ -1016,7 +1088,7 @@ function drawRays(t, light) {
     // Undulating spine: the beam's centerline bends left/right as it descends,
     // driven by two traveling sine waves (different wavelength & speed) so it
     // shimmers like sunlight refracted through moving water, seen from inside.
-    const L = [], R = [];
+    const L = _rayL, R = _rayR;
     for (let i = 0; i <= segs; i++) {
       const v = i / segs;                       // 0 at the surface, 1 near the floor
       const y = -10 + v * (H * 0.95 + 10);
@@ -1026,8 +1098,8 @@ function drawRays(t, light) {
         Math.sin(v * r.vLen - t * r.vSpd + r.vPh) * r.vAmp;
       const cx = x0 + shift * v + wave * grow;  // undulating center x at this depth
       const halfW = topW + (botW - topW) * v;   // beam widens as it falls
-      L.push([cx - halfW, y]);
-      R.push([cx + halfW, y]);
+      L[i][0] = cx - halfW; L[i][1] = y;
+      R[i][0] = cx + halfW; R[i][1] = y;
     }
 
     // Fill a band between two edge polylines with a vertical fade (matches v1 look).
@@ -1049,13 +1121,13 @@ function drawRays(t, light) {
     band(L, R, r.alpha, 0.55, 0.45);
 
     // brighter, narrower inner core riding the same undulation (v1 core profile)
-    const LC = [], RC = [];
+    const LC = _rayLC, RC = _rayRC;
     for (let i = 0; i <= segs; i++) {
       const [lx, ly] = L[i], [rx2, ry2] = R[i];
       const cxm = (lx + rx2) / 2;
       const coreHalf = ((rx2 - lx) / 2) * 0.42; // 42% of the local half-width, as in v1
-      LC.push([cxm - coreHalf, ly]);
-      RC.push([cxm + coreHalf, ry2]);
+      LC[i][0] = cxm - coreHalf; LC[i][1] = ly;
+      RC[i][0] = cxm + coreHalf; RC[i][1] = ry2;
     }
     band(LC, RC, r.alpha * 1.5, 0.65, 0);
   }
@@ -1106,6 +1178,11 @@ function drawRocks(c = ctx) {
   }
 }
 
+// v15: static organic lean of a stalk at fraction f up its length (root stays planted)
+function stalkCurveX(w, f) {
+  return f * (w.cA1 * Math.sin(f * w.cF1 + w.cP1) + w.cA2 * Math.sin(f * w.cF2 + w.cP2));
+}
+
 function updatePlants(t, dt) {
   plantPoints.length = 0;
   for (const w of seaweeds) {
@@ -1117,7 +1194,7 @@ function updatePlants(t, dt) {
       const moveF = Math.min(1, fSpd / 1.2);          // v9: how actively this fish is swimming
       for (let i = 1; i <= w.segs; i++) {
         const fl = i / w.segs;
-        const px = w.x + w.off[i] + Math.sin(t * w.speed + w.phase + fl * 2.6) * fl * fl * 24;
+        const px = w.x + w.off[i] + stalkCurveX(w, fl) + Math.sin(t * w.speed + w.phase + fl * 2.6) * fl * fl * 24;
         const py = sandAt(w.x) + 8 - w.h * fl;
         const dx = px - f.x, dy = py - f.y;
         const d2 = dx * dx + dy * dy;
@@ -1161,7 +1238,7 @@ function updatePlants(t, dt) {
       // normal sway + a fast extra flinch while being pushed
       const sway = Math.sin(t * w.speed + w.phase + f * 2.6) * f * f * 24
                  + Math.sin(t * 7 + w.phase) * w.touch * f * 16;
-      const px = w.x + (w.off[i] || 0) + sway;
+      const px = w.x + (w.off[i] || 0) + stalkCurveX(w, f) + sway;
       const py = baseY - w.h * f;
       w.points.push({ x: px, y: py });
       plantPoints.push({ x: px, y: py, r: w.width * 0.55, s: w });
@@ -1199,33 +1276,77 @@ function updateGrass(t, dt) {
 
 function drawSeaweed() {
   for (const w of seaweeds) {
-    // main stalk through its precomputed (collision-accurate) points
-    ctx.strokeStyle = `hsla(${w.hue},55%,36%,0.92)`;
-    ctx.lineWidth = w.width;
+    const pts = w.points, n = pts.length;
+    // v15: main stipe as a tapered leaf-blade — an outline around the same physics
+    // points, wide at the root and thinning to a soft point up top. No straight-line
+    // segments anywhere; the stalk's own curve comes from the sway + rest-curve baked
+    // into those points in updatePlants.
+    ctx.fillStyle = w.stalkStyle;
+    ctx.beginPath();
+    for (let i = 0; i < n; i++) {            // up one side of the blade
+      const p = pts[i];
+      const a = pts[Math.max(0, i - 1)], b = pts[Math.min(n - 1, i + 1)];
+      let dx = b.x - a.x, dy = b.y - a.y;
+      const dl = Math.hypot(dx, dy) || 1;
+      const nx = -dy / dl, ny = dx / dl;     // perpendicular to the local stalk direction
+      const f = i / (n - 1);
+      const hw = (w.width * (1 - f) + w.tipW * f) / 2; // half-width: base → tip taper
+      if (i === 0) ctx.moveTo(p.x + nx * hw, p.y + ny * hw);
+      else ctx.lineTo(p.x + nx * hw, p.y + ny * hw);
+    }
+    {                                        // rounded cap at the tip
+      const tp = pts[n - 1], pp = pts[n - 2];
+      let dx = tp.x - pp.x, dy = tp.y - pp.y;
+      const dl = Math.hypot(dx, dy) || 1;
+      const nx = -dy / dl, ny = dx / dl;
+      const hwT = w.tipW / 2;
+      ctx.quadraticCurveTo(tp.x + dx, tp.y + dy * 0.6, tp.x - nx * hwT, tp.y - ny * hwT);
+    }
+    for (let i = n - 1; i >= 0; i--) {       // down the other side
+      const p = pts[i];
+      const a = pts[Math.max(0, i - 1)], b = pts[Math.min(n - 1, i + 1)];
+      let dx = b.x - a.x, dy = b.y - a.y;
+      const dl = Math.hypot(dx, dy) || 1;
+      const nx = -dy / dl, ny = dx / dl;
+      const f = i / (n - 1);
+      const hw = (w.width * (1 - f) + w.tipW * f) / 2;
+      ctx.lineTo(p.x - nx * hw, p.y - ny * hw);
+    }
+    ctx.closePath();
+    ctx.fill();
+
+    // v15: faint midrib vein down the blade's centreline for a leafy look
+    ctx.strokeStyle = w.midStyle;
+    ctx.lineWidth = 1.4;
     ctx.lineCap = "round";
     ctx.beginPath();
-    ctx.moveTo(w.points[0].x, w.points[0].y);
-    for (let i = 1; i < w.points.length; i++) ctx.lineTo(w.points[i].x, w.points[i].y);
+    ctx.moveTo(pts[0].x, pts[0].y);
+    for (let i = 1; i < n; i++) ctx.lineTo(pts[i].x, pts[i].y);
     ctx.stroke();
 
     // side branches curling up and out from the stalk
     for (const b of w.branches) {
       const a = w.points[Math.min(w.segs, Math.max(1, Math.round(b.f * w.segs)))];
-      ctx.strokeStyle = `hsla(${w.hue + 8},60%,46%,0.9)`;
+      // v15: S-curved frond — leaves the stalk heading upward, then arcs out and up
+      // to the tip instead of one plain quadratic bow (same endpoints as before)
+      const c1x = a.x + b.side * b.len * 0.3;
+      const c1y = a.y - b.up * 0.75;
+      const c2x = b.tx - b.side * b.len * 0.35;
+      const c2y = b.ty + b.up * 0.6;
+      ctx.strokeStyle = w.branchStyle;
       ctx.lineWidth = b.w;
       ctx.beginPath();
       ctx.moveTo(a.x, a.y);
-      ctx.quadraticCurveTo((a.x + b.tx) / 2 + b.side * 3, (a.y + b.ty) / 2 - 5, b.tx, b.ty);
+      ctx.bezierCurveTo(c1x, c1y, c2x, c2y, b.tx, b.ty);
       ctx.stroke();
 
       // colourful flower heads blooming along the branch — 1..3 per branch (v3)
       if (b.flowers.length) {
-        const cpX = (a.x + b.tx) / 2 + b.side * 3;
-        const cpY = (a.y + b.ty) / 2 - 5;
         for (const fl of b.flowers) {
-          const u = fl.t, iu = 1 - u; // point on the branch's quadratic curve
-          drawFlowerHead(iu * iu * a.x + 2 * iu * u * cpX + u * u * b.tx,
-                         iu * iu * a.y + 2 * iu * u * cpY + u * u * b.ty, fl);
+          const u = fl.t, iu = 1 - u; // point on the branch's cubic curve (v15)
+          drawFlowerHead(
+            iu * iu * iu * a.x + 3 * iu * iu * u * c1x + 3 * iu * u * u * c2x + u * u * u * b.tx,
+            iu * iu * iu * a.y + 3 * iu * iu * u * c1y + 3 * iu * u * u * c2y + u * u * u * b.ty, fl);
         }
       }
     }
@@ -1238,12 +1359,12 @@ function drawFlowerHead(x, y, fl) {
     const ang = (i / fl.petals) * Math.PI * 2;
     const px = x + Math.cos(ang) * fl.r * 0.72;
     const py = y + Math.sin(ang) * fl.r * 0.72;
-    ctx.fillStyle = `hsla(${fl.hue},85%,64%,0.95)`;
+    ctx.fillStyle = fl.petalFill;
     ctx.beginPath();
     ctx.ellipse(px, py, fl.r * 0.55, fl.r * 0.36, ang, 0, Math.PI * 2);
     ctx.fill();
   }
-  ctx.fillStyle = `hsla(${(fl.hue + 45) % 360},92%,78%,0.95)`; // bright contrasting centre
+  ctx.fillStyle = fl.centerFill; // bright contrasting centre (precomputed at bloom time)
   ctx.beginPath();
   ctx.arc(x, y, fl.r * 0.42, 0, Math.PI * 2);
   ctx.fill();
@@ -1252,22 +1373,56 @@ function drawFlowerHead(x, y, fl) {
 
 function drawGrass(t) {
   for (const g of grass) {
-    // gentle constant sway, amplified while rippling from a passing fish
+    // v16: tapered multi-segment blade — wide at root, thinning to a soft point
     const amp = 3 + g.ripple * 13;
-    const sway = Math.sin(t * g.speed + g.phase) * amp;
-    const tipX = g.x + g.lean * g.h + sway;
-    const tipY = g.y - g.h * (1 - g.ripple * 0.06);
-    ctx.strokeStyle = `hsla(${g.hue},58%,40%,0.92)`;
-    ctx.lineWidth = g.width;
-    ctx.lineCap = "round";
+    const n = g.segs + 1; // number of points along the blade
+    const pts = [];
+    for (let i = 0; i < n; i++) {
+      const f = i / g.segs; // 0 at base, 1 at tip
+      // organic rest-curve: each blade has its own natural bend (like seaweed)
+      const curveX = f * g.cA1 * Math.sin(f * g.cF1 + g.cP1);
+      // constant sway, amplified while rippling from a passing fish
+      const sway = Math.sin(t * g.speed + g.phase + f * 2.4) * amp * f;
+      pts.push({
+        x: g.x + g.lean * g.h * f + curveX + sway,
+        y: g.y - g.h * f * (1 - g.ripple * 0.06)
+      });
+    }
+    // draw tapered outline around the physics points
+    ctx.fillStyle = `hsla(${g.hue},58%,40%,0.92)`;
     ctx.beginPath();
-    ctx.moveTo(g.x, g.y);
-    ctx.quadraticCurveTo(
-      (g.x + tipX) / 2 + sway * 0.4,
-      (g.y + tipY) / 2,
-      tipX, tipY
-    );
-    ctx.stroke();
+    for (let i = 0; i < n; i++) {
+      const p = pts[i];
+      const a = pts[Math.max(0, i - 1)], b = pts[Math.min(n - 1, i + 1)];
+      let dx = b.x - a.x, dy = b.y - a.y;
+      const dl = Math.hypot(dx, dy) || 1;
+      const nx = -dy / dl, ny = dx / dl; // perpendicular to local blade direction
+      const f = i / (n - 1);
+      const hw = (g.width * (1 - f) + 0.8 * f) / 2; // half-width: base → tip taper
+      if (i === 0) ctx.moveTo(p.x + nx * hw, p.y + ny * hw);
+      else ctx.lineTo(p.x + nx * hw, p.y + ny * hw);
+    }
+    // rounded cap at the tip
+    {
+      const tp = pts[n - 1], pp = pts[n - 2];
+      let dx = tp.x - pp.x, dy = tp.y - pp.y;
+      const dl = Math.hypot(dx, dy) || 1;
+      const nx = -dy / dl, ny = dx / dl;
+      const hwT = 0.4; // tip half-width
+      ctx.quadraticCurveTo(tp.x + dx, tp.y + dy * 0.6, tp.x - nx * hwT, tp.y - ny * hwT);
+    }
+    for (let i = n - 1; i >= 0; i--) {
+      const p = pts[i];
+      const a = pts[Math.max(0, i - 1)], b = pts[Math.min(n - 1, i + 1)];
+      let dx = b.x - a.x, dy = b.y - a.y;
+      const dl = Math.hypot(dx, dy) || 1;
+      const nx = -dy / dl, ny = dx / dl;
+      const f = i / (n - 1);
+      const hw = (g.width * (1 - f) + 0.8 * f) / 2;
+      ctx.lineTo(p.x - nx * hw, p.y - ny * hw);
+    }
+    ctx.closePath();
+    ctx.fill();
   }
 }
 
@@ -1275,29 +1430,65 @@ function drawGrass(t) {
 // Drawn on top of everything else (it is closest to the viewer). Each blade gets a
 // thin lighter inner stroke over a darker body for a lush, voluminous "closer" look.
 function drawFgGrass(t) {
-  ctx.lineCap = "round";
   for (const g of fgGrass) {
-    const amp = 4 + g.h * 0.03; // taller blades swing wider at the tip
-    const sway = Math.sin(t * g.speed + g.phase) * amp;
-    const tipX = g.x + g.lean * g.h + sway;
-    const tipY = g.y - g.h;
-    const cpx = (g.x + tipX) / 2 + sway * 0.5;
-    const cpy = (g.y + tipY) / 2;
-
-    // dark body of the blade (in front)
-    ctx.strokeStyle = `hsla(${g.hue},60%,31%,0.96)`;
-    ctx.lineWidth = g.width;
+    // v16: tapered multi-segment blade with two-tone depth (like seaweed)
+    const amp = 4 + g.h * 0.03;
+    const n = g.segs + 1;
+    const pts = [];
+    for (let i = 0; i < n; i++) {
+      const f = i / g.segs;
+      // organic rest-curve: each blade has its own natural bend
+      const curveX = f * g.cA1 * Math.sin(f * g.cF1 + g.cP1);
+      // constant sway, weighted toward the tip
+      const sway = Math.sin(t * g.speed + g.phase + f * 2.4) * amp * f;
+      pts.push({
+        x: g.x + g.lean * g.h * f + curveX + sway,
+        y: g.y - g.h * f
+      });
+    }
+    // dark body of the blade (tapered outline)
+    ctx.fillStyle = `hsla(${g.hue},60%,31%,0.96)`;
     ctx.beginPath();
-    ctx.moveTo(g.x, g.y);
-    ctx.quadraticCurveTo(cpx, cpy, tipX, tipY);
-    ctx.stroke();
+    for (let i = 0; i < n; i++) {
+      const p = pts[i];
+      const a = pts[Math.max(0, i - 1)], b = pts[Math.min(n - 1, i + 1)];
+      let dx = b.x - a.x, dy = b.y - a.y;
+      const dl = Math.hypot(dx, dy) || 1;
+      const nx = -dy / dl, ny = dx / dl;
+      const f = i / (n - 1);
+      const hw = (g.width * (1 - f) + 1.2 * f) / 2; // half-width: base → tip
+      if (i === 0) ctx.moveTo(p.x + nx * hw, p.y + ny * hw);
+      else ctx.lineTo(p.x + nx * hw, p.y + ny * hw);
+    }
+    // rounded cap at the tip
+    {
+      const tp = pts[n - 1], pp = pts[n - 2];
+      let dx = tp.x - pp.x, dy = tp.y - pp.y;
+      const dl = Math.hypot(dx, dy) || 1;
+      const nx = -dy / dl, ny = dx / dl;
+      const hwT = 0.6; // tip half-width
+      ctx.quadraticCurveTo(tp.x + dx, tp.y + dy * 0.6, tp.x - nx * hwT, tp.y - ny * hwT);
+    }
+    for (let i = n - 1; i >= 0; i--) {
+      const p = pts[i];
+      const a = pts[Math.max(0, i - 1)], b = pts[Math.min(n - 1, i + 1)];
+      let dx = b.x - a.x, dy = b.y - a.y;
+      const dl = Math.hypot(dx, dy) || 1;
+      const nx = -dy / dl, ny = dx / dl;
+      const f = i / (n - 1);
+      const hw = (g.width * (1 - f) + 1.2 * f) / 2;
+      ctx.lineTo(p.x - nx * hw, p.y - ny * hw);
+    }
+    ctx.closePath();
+    ctx.fill();
 
-    // lighter inner highlight for depth (cheap: one extra thin stroke)
+    // lighter inner highlight for depth: a thin centerline stroke
     ctx.strokeStyle = `hsla(${g.hue + 6},64%,45%,0.5)`;
-    ctx.lineWidth = g.width * 0.45;
+    ctx.lineWidth = g.width * 0.3;
+    ctx.lineCap = "round";
     ctx.beginPath();
-    ctx.moveTo(g.x, g.y);
-    ctx.quadraticCurveTo(cpx, cpy, tipX, tipY);
+    ctx.moveTo(pts[0].x, pts[0].y);
+    for (let i = 1; i < n; i++) ctx.lineTo(pts[i].x, pts[i].y);
     ctx.stroke();
   }
 }