Upload index.html

index.html

@@ -23,6 +23,8 @@
 (() => {
 "use strict";
 // ============ Aquarium v16 WHISKERS — alt-fg base + spots/stripes + whiskers (~10%) ==
+// v22: Ecco-style rendering — fish show top/bottom view when moving vertically,
+// side profile when moving horizontally, like Ecco the Dolphin's 3D perspective
 // 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
@@ -290,6 +292,10 @@ class Fish {
     this.roll = 0;          // current roll angle (rad); 0 = upright
     this.rollVel = 0;       // angular velocity of the roll
     this.inHardTurn = false;// was it in a sharp turn last frame?
+    
+    // v22: Ecco-style viewing angle — determines whether we see the fish from the side
+    // or from above/below based on its movement direction (0 = side, 1 = top/bottom)
+    this.viewAngle = 0;     // current interpolated view angle
   }
   update(dt) {
     const night = personalNight(performance.now() / 1000, this); // v10: per-fish early/normal/late sleep & wake
@@ -460,6 +466,12 @@ class Fish {
     if (this.roll > 1.15) { this.roll = 1.15; this.rollVel *= -0.25; }
     else if (this.roll < -1.15) { this.roll = -1.15; this.rollVel *= -0.25; }
 
+    // v22: Ecco-style viewing angle — when moving vertically, we see the fish from above/below;
+    // when moving horizontally, we see its side profile. Smoothly interpolate between views.
+    // sin(angle) gives 0 for horizontal (0, π) and ±1 for vertical (±π/2)
+    const targetView = Math.abs(Math.sin(this.angle));
+    this.viewAngle += (targetView - this.viewAngle) * Math.min(1, dt * 4);
+
     // Player fish: input-driven movement (keyboard WASD + gamepad sticks),
     // overrides the AI cruising so the player is fully in control.
     if (this === playerFish) {
@@ -508,12 +520,110 @@ class Fish {
     c.save();
     c.translate(this.x, this.y);
     c.rotate(this.angle);
-    // body roll from banking into sharp turns: squash vertically as it rolls,
-    // plus a tiny wobble so the motion reads as a real roll, not a glitch
-    if (Math.abs(this.roll) > 0.01) {
-      c.scale(1, Math.max(0.42, Math.cos(this.roll)));
+
+    // v23: Ecco-style perspective WITHOUT a second picture. We keep the one fully-
+    // detailed body and foreshorten it as the fish turns to swim vertically.
+    // viewAngle 0 = pure side profile (one eye), 1 = seen from above/below (the back).
+    // Foreshortening along local up/down makes the dorsal fin slide toward center and
+    // the body slim down, reading as "seeing the back" — no snapping, nothing vanishes.
+    const v = Math.max(0, Math.min(1, this.viewAngle));
+    let scaleY = 1 - 0.34 * v;                 // foreshorten toward the back view
+    if (Math.abs(this.roll) > 0.01) {          // banking roll still squashes a touch
+      scaleY *= Math.max(0.42, Math.cos(this.roll));
       c.rotate(this.roll * 0.1);
     }
+    c.scale(1, scaleY);
+
+    this.drawSideView(c);                      // one body: wave + patterns + fins always on
+    c.restore();
+  }
+  
+  // v22: Draw fish from above or below (Ecco-style top/bottom view)
+  drawTopBottomView(c) {
+    const s = this.size;
+    // traveling body wave
+    const waveK = Math.PI / s;
+    const waveAmp = s * 0.12;
+    const sway = Math.sin(-s * waveK + this.phase) * s * 0.34;
+
+    // Top/bottom view: body seen from above or below
+    // Dorsal fin visible as a line down the center when viewed from above
+    const g = this.bodyGrad;
+    const NSEG = 26;
+    
+    // Build body outline (same as side view but we're looking at it from top/bottom)
+    const bodyPath = new Path2D();
+    for (let i = 0; i <= NSEG; i++) {
+      const x = s - (i / NSEG) * 2 * s;
+      // Wider body when viewed from top/bottom (we see the full width)
+      const hh = s * 0.55 * Math.sqrt(Math.max(0, 1 - (x / s) ** 2));
+      if (i === 0) bodyPath.moveTo(x, -hh); else bodyPath.lineTo(x, -hh);
+    }
+    for (let i = NSEG; i >= 0; i--) {
+      const x = s - (i / NSEG) * 2 * s;
+      const hh = s * 0.55 * Math.sqrt(Math.max(0, 1 - (x / s) ** 2));
+      bodyPath.lineTo(x, hh);
+    }
+    bodyPath.closePath();
+
+    c.fillStyle = g;
+    c.fill(bodyPath);
+
+    // Dorsal fin — visible as a line/shape down the center when viewed from above
+    c.strokeStyle = this.tailFillStyle;
+    c.lineWidth = s * 0.15;
+    c.lineCap = "round";
+    c.beginPath();
+    c.moveTo(s * 0.3, 0);
+    // Curved dorsal fin running down the center
+    c.quadraticCurveTo(-s * 0.2, -sway * 0.5, -s * 0.6, sway * 0.3);
+    c.stroke();
+
+    // Eyes — visible on both sides of the head when viewed from top/bottom
+    c.fillStyle = "#fff";
+    // Left eye
+    c.beginPath();
+    c.arc(s * 0.55, -s * 0.25, s * 0.1, 0, Math.PI * 2);
+    c.fill();
+    c.fillStyle = "#0d1420";
+    c.beginPath();
+    c.arc(s * 0.57, -s * 0.25, s * 0.05, 0, Math.PI * 2);
+    c.fill();
+    // Right eye
+    c.fillStyle = "#fff";
+    c.beginPath();
+    c.arc(s * 0.55, s * 0.25, s * 0.1, 0, Math.PI * 2);
+    c.fill();
+    c.fillStyle = "#0d1420";
+    c.beginPath();
+    c.arc(s * 0.57, s * 0.25, s * 0.05, 0, Math.PI * 2);
+    c.fill();
+
+    // Tail fin (simplified for top/bottom view)
+    c.fillStyle = this.tailFillStyle;
+    c.beginPath();
+    if (this.tailType === 'fan') {
+      c.moveTo(-s * 0.5, 0);
+      c.quadraticCurveTo(-s * 1.3, -s * 0.28 + sway, -s * 1.42, -s * 0.5 + sway);
+      c.quadraticCurveTo(-s * 1.12, sway * 0.5, -s * 1.42, s * 0.5 + sway);
+      c.quadraticCurveTo(-s * 1.3, s * 0.28 + sway, -s * 0.5, 0);
+    } else if (this.tailType === 'streamer') {
+      c.moveTo(-s * 0.5, 0);
+      c.quadraticCurveTo(-s * 1.35, -s * 0.24 + sway, -s * 1.68, -s * 0.56 + sway);
+      c.quadraticCurveTo(-s * 0.98, sway * 0.35, -s * 1.68, s * 0.56 + sway);
+      c.quadraticCurveTo(-s * 1.35, s * 0.24 + sway, -s * 0.5, 0);
+    } else {
+      c.moveTo(-s * 0.5, 0);
+      c.quadraticCurveTo(-s * 1.04, -s * 0.36 + sway, -s * 1.22, -s * 0.44 + sway);
+      c.quadraticCurveTo(-s * 1.34, -s * 0.52 + sway, -s * 0.86, sway * 0.5);
+      c.quadraticCurveTo(-s * 1.34, s * 0.52 + sway, -s * 1.22, s * 0.44 + sway);
+      c.quadraticCurveTo(-s * 1.04, s * 0.36 + sway, -s * 0.5, 0);
+    }
+    c.fill();
+  }
+  
+  // v22: Draw fish from the side (original view)
+  drawSideView(c) {
     const s = this.size;
     // traveling body wave (v3): ripples head→tail so the fish undulates like a real one
     const waveK = Math.PI / s;   // ~one wavelength across the body length
@@ -521,6 +631,11 @@ class Fish {
     // tail fin follows the body wave at its base, amplified (same phase → no fighting)
     const sway = Math.sin(-s * waveK + this.phase) * s * 0.34;
 
+    // v24: Ecco-style blend factor (0 = side profile, 1 = seen from above/below).
+    // Flattens the tail lobes and spreads eyes/barbels as we see more of the back.
+    const ev = Math.max(0, Math.min(1, this.viewAngle));
+    const tailFlat = 1 - 0.4 * ev; // extra foreshortening for the caudal lobes only
+
     // 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.
@@ -531,23 +646,23 @@ class Fish {
       // Broad, rounded fan (betta/goldfish-style): wide spread, tips high and far out,
       // with only a shallow dip between the two lobes.
       c.moveTo(-s * 0.5, 0);
-      c.quadraticCurveTo(-s * 1.3, -s * 0.28 + sway, -s * 1.42, -s * 0.5 + sway); // up to upper tip
-      c.quadraticCurveTo(-s * 1.12, sway * 0.5, -s * 1.42, s * 0.5 + sway);       // shallow notch → lower tip
-      c.quadraticCurveTo(-s * 1.3, s * 0.28 + sway, -s * 0.5, 0);                 // back to the base
+      c.quadraticCurveTo(-s * 1.3, -s * 0.28 * tailFlat + sway, -s * 1.42, -s * 0.5 * tailFlat + sway); // up to upper tip
+      c.quadraticCurveTo(-s * 1.12, sway * 0.5, -s * 1.42, s * 0.5 * tailFlat + sway);                   // shallow notch → lower tip
+      c.quadraticCurveTo(-s * 1.3, s * 0.28 * tailFlat + sway, -s * 0.5, 0);                             // back to the base
     } else if (this.tailType === 'streamer') {
       // Long forked streamers (angelfish/fancy-guppy-style): two flowing lobes that
       // reach further back with a deeper notch between them.
       c.moveTo(-s * 0.5, 0);
-      c.quadraticCurveTo(-s * 1.35, -s * 0.24 + sway, -s * 1.68, -s * 0.56 + sway); // long upper lobe
-      c.quadraticCurveTo(-s * 0.98, sway * 0.35, -s * 1.68, s * 0.56 + sway);       // deep fork → lower tip
-      c.quadraticCurveTo(-s * 1.35, s * 0.24 + sway, -s * 0.5, 0);                  // long lower lobe back to base
+      c.quadraticCurveTo(-s * 1.35, -s * 0.24 * tailFlat + sway, -s * 1.68, -s * 0.56 * tailFlat + sway); // long upper lobe
+      c.quadraticCurveTo(-s * 0.98, sway * 0.35, -s * 1.68, s * 0.56 * tailFlat + sway);                   // deep fork → lower tip
+      c.quadraticCurveTo(-s * 1.35, s * 0.24 * tailFlat + sway, -s * 0.5, 0);                              // long lower lobe back to base
     } else {
       // classic (v7): rounded lobes with a soft notch — the original look
       c.moveTo(-s * 0.5, 0);
-      c.quadraticCurveTo(-s * 1.04, -s * 0.36 + sway, -s * 1.22, -s * 0.44 + sway); // upper edge out toward the tip
-      c.quadraticCurveTo(-s * 1.34, -s * 0.52 + sway, -s * 0.86, sway * 0.5);      // rounded upper lobe → notch
-      c.quadraticCurveTo(-s * 1.34, s * 0.52 + sway, -s * 1.22, s * 0.44 + sway); // notch → rounded lower lobe
-      c.quadraticCurveTo(-s * 1.04, s * 0.36 + sway, -s * 0.5, 0);                // lower edge back to the base
+      c.quadraticCurveTo(-s * 1.04, -s * 0.36 * tailFlat + sway, -s * 1.22, -s * 0.44 * tailFlat + sway); // upper edge out toward the tip
+      c.quadraticCurveTo(-s * 1.34, -s * 0.52 * tailFlat + sway, -s * 0.86, sway * 0.5);                  // rounded upper lobe → notch
+      c.quadraticCurveTo(-s * 1.34, s * 0.52 * tailFlat + sway, -s * 1.22, s * 0.44 * tailFlat + sway);   // notch → rounded lower lobe
+      c.quadraticCurveTo(-s * 1.04, s * 0.36 * tailFlat + sway, -s * 0.5, 0);                             // lower edge back to the base
     }
     c.fill();
 
@@ -565,13 +680,15 @@ class Fish {
       {
         const side = -1; // far side (behind the body)
         const rootX = s * 0.6;
-        const rootY = side * s * 0.09;
+        // v24: from above, barbels sit on either side of the mouth — spread the roots
+        // apart and flare each whisker further out as the fish "rotates" to swim vertically
+        const rootY = side * s * (0.09 + 0.07 * ev);
         c.beginPath();
         c.moveTo(rootX, rootY);
         for (let i = 1; i <= NPTS; i++) {
           const t = i / NPTS;
           const bx = rootX - L * (0.25 + 0.65 * spd) * t;
-          const by = rootY + side * L * 0.42 * t * t;
+          const by = rootY + side * L * (0.42 + 0.3 * ev) * t * t;
           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);
@@ -712,15 +829,39 @@ class Fish {
     c.closePath();
     c.fill();
 
-    // eye
-    c.fillStyle = "#fff";
-    c.beginPath();
-    c.arc(s * 0.58, -s * 0.1, s * 0.11, 0, Math.PI * 2);
-    c.fill();
-    c.fillStyle = "#0d1420";
-    c.beginPath();
-    c.arc(s * 0.61, -s * 0.1, s * 0.055, 0, Math.PI * 2);
-    c.fill();
+    // v24: both eyes — as the fish turns to swim vertically (ev→1) we see them from
+    // above: the pair spreads wider on either side of the head and each eye squashes
+    // into a flatter ellipse (perspective), instead of two overlapping circles.
+    {
+      const eyeRY = 0.11 * (1 - 0.35 * ev);   // vertical squash of the white
+      const pupRY = 0.055 * (1 - 0.35 * ev);  // pupil squashes with it
+      const yNear = -s * (0.1 + 0.1 * ev);    // near eye slides outward as we see more of the back
+      c.fillStyle = "#fff";
+      c.beginPath();
+      c.ellipse(s * 0.58, yNear, s * 0.11, s * eyeRY, 0, 0, Math.PI * 2);
+      c.fill();
+      c.fillStyle = "#0d1420";
+      c.beginPath();
+      c.ellipse(s * 0.61, yNear, s * 0.055, s * pupRY, 0, 0, Math.PI * 2);
+      c.fill();
+
+      // far-side eye fades in as we see more of the back (Ecco-style top view) —
+      // two eyes flanking the head when the fish turns to swim vertically.
+      if (ev > 0.03) {
+        const yFar = s * (0.14 + 0.08 * ev);  // far eye slides outward too — pair widens
+        c.save();
+        c.globalAlpha = ev * 0.9;
+        c.fillStyle = "#fff";
+        c.beginPath();
+        c.ellipse(s * 0.58, yFar, s * 0.11, s * eyeRY, 0, 0, Math.PI * 2);
+        c.fill();
+        c.fillStyle = "#0d1420";
+        c.beginPath();
+        c.ellipse(s * 0.61, yFar, s * 0.055, s * pupRY, 0, 0, Math.PI * 2);
+        c.fill();
+        c.restore();
+      }
+    }
 
     // v21: near-side whisker — drawn AFTER the body so it sits in front of the fish.
     // (The far-side whisker is drawn before the body, above.) Together they form a
@@ -738,13 +879,14 @@ class Fish {
       {
         const side = 1; // near side (in front of the body)
         const rootX = s * 0.6;
-        const rootY = side * s * 0.09;
+        // v24: same spread/flare as the far whisker — a pair flanking the snout from above
+        const rootY = side * s * (0.09 + 0.07 * ev);
         c.beginPath();
         c.moveTo(rootX, rootY);
         for (let i = 1; i <= NPTS; i++) {
           const t = i / NPTS;
           const bx = rootX - L * (0.25 + 0.65 * spd) * t;
-          const by = rootY + side * L * 0.42 * t * t;
+          const by = rootY + side * L * (0.42 + 0.3 * ev) * t * t;
           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);
@@ -756,51 +898,27 @@ class Fish {
 
     c.restore();
 
-    // v17: overhead light — a soft elliptical highlight matching the fish body shape,
-    // positioned on the upper edge and rotated with the fish's angle.
+    // v17/v23: overhead light — soft elliptical highlight on the fish's upper edge.
+    // Drawn in local coords (draw() already positioned + rotated us) so it rides with
+    // the body and foreshortens correctly instead of being double-offset.
     {
-      const ca = Math.cos(this.angle), sa = Math.sin(this.angle);
-      // Find which side faces up (screen space)
-      const upY = -sa; // screen-space y-component of the fish's local "up" direction
-      // Smooth transition instead of hard switch to prevent flickering/snapping
-      const sideUp = -upY / (Math.abs(upY) + 0.15);
-      
       const a = 0.35 * (1 - curNight * 0.65); // dimmer at night, still present
       if (a > 0.02) {
-        c.save();
-        // Position the ellipse on the upper edge of the fish body
-        const offsetX = sideUp * s * 0.18; // offset along the fish's local up axis
-        const lightX = this.x + offsetX * ca;
-        const lightY = this.y + offsetX * sa;
-        
-        // Draw two concentric ellipses matching the fish body proportions
-        c.translate(lightX, lightY);
-        c.rotate(this.angle);
-        
-        // Outer soft glow — larger and more transparent
         c.fillStyle = `rgba(255,255,255,${(a * 0.3).toFixed(3)})`;
         c.beginPath();
-        c.ellipse(0, 0, s * 0.65, s * 0.25, 0, 0, Math.PI * 2);
+        c.ellipse(s * 0.05, -s * 0.26, s * 0.6, s * 0.2, 0, 0, Math.PI * 2);
         c.fill();
-        
-        // Inner bright core — smaller and more opaque
         c.fillStyle = `rgba(255,255,255,${a.toFixed(3)})`;
         c.beginPath();
-        c.ellipse(0, 0, s * 0.35, s * 0.1, 0, 0, Math.PI * 2);
+        c.ellipse(s * 0.05, -s * 0.26, s * 0.34, s * 0.1, 0, 0, Math.PI * 2);
         c.fill();
-        
-        c.restore();
       }
     }
-    // v19: pectoral fins drawn OVER the reflections for correct layering
+    // v19/v23: pectoral fins drawn OVER the reflections for correct layering.
+    // draw() already applied translate+rotate+foreshortening, so we draw in local
+    // coords (the old duplicate translate/rotate misplaced and hid these fins).
     {
       c.save();
-      c.translate(this.x, this.y);
-      c.rotate(this.angle);
-      if (Math.abs(this.roll) > 0.01) {
-        c.scale(1, Math.max(0.42, Math.cos(this.roll)));
-        c.rotate(this.roll * 0.1);
-      }
 
       // v20: render the pectoral fins at 50% opacity
       c.globalAlpha = 0.5;
@@ -1017,6 +1135,8 @@ function buildScene() {
       const hue = clusterHue + rand(-15, 15);
       // v4.3: depth split — ~51% "far" (heavy softness), ~49% "near" (sharper) for a layered look
       const near = Math.random() < 0.49;
+      const w = near ? rand(2.5, 5) : rand(3, 6);
+      const tw = near ? rand(1.2, 2.4) : rand(1.5, 3);
       const st = {
         x: cx + rand(-20, 20),
         h: rand(H * 0.35, H * 0.65), // much taller than foreground seaweed
@@ -1025,8 +1145,8 @@ function buildScene() {
         speed: rand(0.7, 1.3), // slower, more gentle sway
         hue,
         near,
-        width: near ? rand(2.5, 5) : rand(3, 6),
-        tipW: near ? rand(1.2, 2.4) : rand(1.5, 3),
+        width: w,
+        tipW: tw,
         branches: [],
         // organic curve parameters (same as foreground seaweed)
         cA1: rand(8, 15), cF1: rand(0.8, 1.6), cP1: rand(0, Math.PI * 2),
@@ -1034,17 +1154,24 @@ function buildScene() {
         // v4.3: multi-wave organic motion parameters
         waveA1: rand(6, 14), waveF1: rand(0.5, 1.2), wavePh1: rand(0, Math.PI * 2),
         waveA2: rand(3, 8),  waveF2: rand(1.3, 2.1), wavePh2: rand(0, Math.PI * 2),
-        waveA3: rand(2, 5),  waveF3: rand(2.4, 3.6), wavePh3: rand(0, Math.PI * 2)
+        waveA3: rand(2, 5),  waveF3: rand(2.4, 3.6), wavePh3: rand(0, Math.PI * 2),
+        // PERF: precomputed styles/widths (avoids per-frame string alloc + arithmetic)
+        coreStyle: `hsla(${hue},50%,32%,${near ? 0.8 : 0.7})`,
+        haloStyle: `hsla(${hue},45%,36%,0.18)`,
+        branchCoreStyle: `hsla(${hue + 8},55%,42%,0.75)`,
+        backLineW: (w + tw) / 2
       };
       // v4.1: add branches to background seaweed (like foreground)
       const nBr = 1 + ((Math.random() * 3) | 0); // 1..3 branches per stalk
       for (let k = 0; k < nBr; k++) {
+        const bw = rand(1.5, 3);          // PERF: computed once, reused for halo width
         st.branches.push({
           f: rand(0.25, 0.85),            // where along the stalk it sprouts
           side: Math.random() < 0.5 ? -1 : 1,
           len: rand(10, 24),              // horizontal reach (slightly smaller than fg)
           up: rand(8, 20),                // how far it curls upward
-          w: rand(1.5, 3),
+          w: bw,
+          haloW: bw * 1.9,                // PERF: precomputed halo width
           ph: rand(0, Math.PI * 2)
         });
       }
@@ -1062,6 +1189,8 @@ function buildScene() {
     const nStalks = 2 + ((Math.random() * 3) | 0);
     for (let j = 0; j < nStalks; j++) {
       const hue = clusterHue + rand(-12, 12);
+      const mw = rand(3, 6.5);   // PERF: captured once for precomputed widths
+      const mtw = rand(1.8, 3.2);
       // Median properties: height between backSeaweeds (0.35-0.65H) and farSeaweeds (0.4-0.7H)
       const st = {
         x: cx + rand(-22, 22),
@@ -1070,8 +1199,8 @@ function buildScene() {
         phase: rand(0, Math.PI * 2),
         speed: rand(0.6, 1.15), // median sway speed between back (0.7-1.3) and far (0.5-1.0)
         hue,
-        width: rand(3, 6.5), // median width
-        tipW: rand(1.8, 3.2),
+        width: mw, // median width
+        tipW: mtw,
         branches: [],
         // Organic curve parameters (like backSeaweeds for halo pass technique)
         cA1: rand(9, 16), cF1: rand(0.7, 1.5), cP1: rand(0, Math.PI * 2),
@@ -1079,17 +1208,24 @@ function buildScene() {
         // Multi-wave organic motion parameters
         waveA1: rand(7, 15), waveF1: rand(0.45, 1.1), wavePh1: rand(0, Math.PI * 2),
         waveA2: rand(3.5, 9),  waveF2: rand(1.2, 2.0), wavePh2: rand(0, Math.PI * 2),
-        waveA3: rand(2.5, 6),  waveF3: rand(2.2, 3.4), wavePh3: rand(0, Math.PI * 2)
+        waveA3: rand(2.5, 6),  waveF3: rand(2.2, 3.4), wavePh3: rand(0, Math.PI * 2),
+        // PERF: precomputed styles/widths (avoids per-frame string alloc + arithmetic)
+        coreStyle: `hsla(${hue},48%,30%,0.65)`,
+        haloStyle: `hsla(${hue},42%,34%,0.16)`,
+        branchCoreStyle: `hsla(${hue + 6},50%,40%,0.7)`,
+        midLineW: (mw + mtw) / 2
       };
       // Add branches (median count between back and far)
       const nBr = 1 + ((Math.random() * 3) | 0);
       for (let k = 0; k < nBr; k++) {
+        const bw = rand(1.8, 3.5);         // PERF: computed once, reused for halo width
         st.branches.push({
           f: rand(0.28, 0.82),
           side: Math.random() < 0.5 ? -1 : 1,
           len: rand(11, 26),
           up: rand(9, 22),
-          w: rand(1.8, 3.5),
+          w: bw,
+          haloW: bw * 2.2,                // PERF: precomputed halo width
           ph: rand(0, Math.PI * 2)
         });
       }
@@ -1324,12 +1460,21 @@ function personalNight(t, f) {
   return c(g + f.riseShift);
 }
 
+// PERF: cache background gradient - only recreate when colors change significantly
+let _bgGrad = null, _bgGradKey = '';
 function drawBackground(light) {
-  const g = ctx.createLinearGradient(0, 0, 0, H);
-  g.addColorStop(0, rgbStr(light.top));
-  g.addColorStop(0.5, rgbStr(light.mid));
-  g.addColorStop(1, rgbStr(light.bot));
-  ctx.fillStyle = g;
+  // PERF: quantize colors so the gradient only rebuilds on visible color shifts
+  const key = [light.top[0] | 0, light.top[1] | 0, light.top[2] | 0,
+               light.mid[0] | 0, light.mid[1] | 0, light.mid[2] | 0,
+               light.bot[0] | 0, light.bot[1] | 0, light.bot[2] | 0].join(',');
+  if (!_bgGrad || _bgGradKey !== key) {
+    _bgGrad = ctx.createLinearGradient(0, 0, 0, H);
+    _bgGrad.addColorStop(0, rgbStr(light.top));
+    _bgGrad.addColorStop(0.5, rgbStr(light.mid));
+    _bgGrad.addColorStop(1, rgbStr(light.bot));
+    _bgGradKey = key;
+  }
+  ctx.fillStyle = _bgGrad;
   ctx.fillRect(0, 0, W, H);
 }
 
@@ -1541,87 +1686,76 @@ function stalkCurveX(w, f) {
   return f * (w.cA1 * Math.sin(f * w.cF1 + w.cP1) + w.cA2 * Math.sin(f * w.cF2 + w.cP2));
 }
 
+// PERF: shared sway function (was a per-stalk closure recreated every frame)
+function stalkSwayX(w, t, f) {
+  return Math.sin(t * w.waveF1 + w.wavePh1 + f * 2.4) * w.waveA1 * f * f +
+         Math.sin(t * w.waveF2 + w.wavePh2 + f * 3.8) * w.waveA2 * f * f +
+         Math.sin(t * w.waveF3 + w.wavePh3 + f * 5.4) * w.waveA3 * f;
+}
+
 // v4.3: draw background seaweed procedurally — multi-wave organic motion instead of
 // rigid sprite rotation. Far stalks get a soft low-alpha halo pass to keep their
 // "far away" look without any runtime blur filters (no slowdown).
 // v6: middle-distance seaweed using halo stroke pass (median depth between back and far)
 function drawMidSeaweeds(t) {
+  // PERF: lineCap/lineJoin are constant — set once instead of per stalk per pass
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
   for (const w of midSeaweeds) {
     const baseY = sandAt(w.x) + 10;
     const n = w.segs;
-    // Slightly more blue-tinted and softer than backSeaweeds
-    const coreStyle = `hsla(${w.hue},48%,30%,0.65)`;
-    const haloStyle = `hsla(${w.hue},42%,34%,0.16)`;
-
-    // stalk sway at fraction f: three overlapping waves, root planted (f^2), tip free (f)
-    const swayAt = (f) =>
-      Math.sin(t * w.waveF1 + w.wavePh1 + f * 2.4) * w.waveA1 * f * f +
-      Math.sin(t * w.waveF2 + w.wavePh2 + f * 3.8) * w.waveA2 * f * f +
-      Math.sin(t * w.waveF3 + w.wavePh3 + f * 5.4) * w.waveA3 * f;
+    // PERF: compute sway positions ONCE per frame; both passes and branches reuse them
+    const pxs = w._px || (w._px = new Float64Array(n + 1));
+    const pys = w._py || (w._py = new Float64Array(n + 1));
+    for (let i = 0; i <= n; i++) {
+      const f = i / n;
+      pxs[i] = w.x + stalkCurveX(w, f) + stalkSwayX(w, t, f);
+      pys[i] = baseY - w.h * f;
+    }
 
     // Wider halo pass for more softness (between backSeaweeds and farSeaweeds)
     for (let pass = 0; pass < 2; pass++) {
       const isHalo = pass === 0;
-      ctx.strokeStyle = isHalo ? haloStyle : coreStyle;
-      ctx.lineCap = 'round';
-      ctx.lineJoin = 'round';
-      ctx.lineWidth = (w.width + w.tipW) / 2 * (isHalo ? 2.2 : 1); // wider halo than backSeaweeds
+      ctx.strokeStyle = isHalo ? w.haloStyle : w.coreStyle; // PERF: precomputed at build
+      ctx.lineWidth = w.midLineW * (isHalo ? 2.2 : 1);
 
-      // stalk outline: up one side, round tip, down the other
+      // stalk outline: up one side, down the other
       ctx.beginPath();
-      let prevX = 0, prevY = baseY;
-      let lastPx = 0, lastPy = baseY;
+      let prevX = 0, prevY = baseY; // original quirk: first normal measured from origin
       for (let i = 0; i <= n; i++) {
         const f = i / n;
-        const px = w.x + stalkCurveX(w, f) + swayAt(f);
-        const py = baseY - w.h * f;
+        const px = pxs[i], py = pys[i];
         const dx = px - prevX, dy = py - prevY;
-        const dl = Math.hypot(dx, dy) || 1;
+        const dl = Math.sqrt(dx * dx + dy * dy) || 1; // PERF: hypot is slower, not needed here
         const nx = -dy / dl, ny = dx / dl;
-        const hw = (w.width * (1 - f) + w.tipW * f) / 2;
+        const hw = (w.width * (1 - f) + w.tipW * f) * 0.5;
         if (i === 0) ctx.moveTo(px + nx * hw, py + ny * hw);
         else ctx.lineTo(px + nx * hw, py + ny * hw);
         prevX = px; prevY = py;
-        lastPx = px; lastPy = py;
       }
-      // round tip cap
-      const dxT = lastPx - prevX, dyT = lastPy - prevY;
-      const dlT = Math.hypot(dxT, dyT) || 1;
-      const nxT = -dyT / dlT, nyT = dxT / dlT;
-      ctx.quadraticCurveTo(lastPx, lastPy, lastPx + dxT * 0.5 + nxT * (w.tipW / 2), lastPy + dyT * 0.5 + nyT * (w.tipW / 2));
-      // down the other side
-      for (let i = n; i >= 0; i--) {
+      // down the other side (cached points; i=n no-op point dropped — degenerate in original)
+      for (let i = n - 1; i >= 0; i--) {
         const f = i / n;
-        const px = w.x + stalkCurveX(w, f) + swayAt(f);
-        const py = baseY - w.h * f;
-        let dx, dy;
-        if (i === n) { dx = prevX - px; dy = prevY - py; }
-        else {
-          const f2 = (i + 1) / n;
-          const px2 = w.x + stalkCurveX(w, f2) + swayAt(f2);
-          const py2 = baseY - w.h * f2;
-          dx = px2 - px; dy = py2 - py;
-        }
-        const dl = Math.hypot(dx, dy) || 1;
+        const px = pxs[i], py = pys[i];
+        const dx = pxs[i + 1] - px, dy = pys[i + 1] - py;
+        const dl = Math.sqrt(dx * dx + dy * dy) || 1;
         const nx = -dy / dl, ny = dx / dl;
-        const hw = (w.width * (1 - f) + w.tipW * f) / 2;
+        const hw = (w.width * (1 - f) + w.tipW * f) * 0.5;
         ctx.lineTo(px - nx * hw, py - ny * hw);
       }
       ctx.closePath();
       ctx.stroke();
 
-      // branches flutter with the stalk
+      // branches flutter with the stalk (anchors read from cached positions)
       for (const b of w.branches) {
         const idx = Math.min(n, Math.max(1, Math.round(b.f * n)));
-        const f = idx / n;
-        const ax = w.x + stalkCurveX(w, f) + swayAt(f);
-        const ay = baseY - w.h * f;
+        const ax = pxs[idx], ay = pys[idx];
         const flutter = Math.sin(t * w.waveF2 * 1.4 + b.ph) * (3 + w.waveA2 * 0.4);
         const bx = ax + b.side * b.len + flutter;
         const by = ay - b.up;
         ctx.beginPath();
-        ctx.lineWidth = isHalo ? b.w * 2.2 : b.w;
-        ctx.strokeStyle = isHalo ? haloStyle : `hsla(${w.hue + 6},50%,40%,0.7)`;
+        ctx.lineWidth = isHalo ? b.haloW : b.w; // PERF: halo width precomputed
+        ctx.strokeStyle = isHalo ? w.haloStyle : w.branchCoreStyle;
         ctx.moveTo(ax, ay);
         ctx.bezierCurveTo(
           ax + b.side * b.len * 0.3, ay - b.up * 0.75,
@@ -1637,82 +1771,63 @@ function drawMidSeaweeds(t) {
 function drawBackSeaweeds(t) {
   // v6: no runtime canvas filter — blur() forces a CPU re-rasterize every frame
   // and was the main FPS cost. Softness now comes from the halo pass below instead.
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
   for (const w of backSeaweeds) {
     const baseY = sandAt(w.x) + 10;
     const n = w.segs;
-    const coreStyle = `hsla(${w.hue},50%,32%,${w.near ? 0.8 : 0.7})`;
-    const haloStyle = `hsla(${w.hue},45%,36%,0.18)`;
-
-    // stalk sway at fraction f: three overlapping waves, root planted (f^2), tip free (f)
-    const swayAt = (f) =>
-      Math.sin(t * w.waveF1 + w.wavePh1 + f * 2.4) * w.waveA1 * f * f +
-      Math.sin(t * w.waveF2 + w.wavePh2 + f * 3.8) * w.waveA2 * f * f +
-      Math.sin(t * w.waveF3 + w.wavePh3 + f * 5.4) * w.waveA3 * f;
+    // PERF: compute sway positions ONCE per frame; both passes and branches reuse them
+    const pxs = w._px || (w._px = new Float64Array(n + 1));
+    const pys = w._py || (w._py = new Float64Array(n + 1));
+    for (let i = 0; i <= n; i++) {
+      const f = i / n;
+      pxs[i] = w.x + stalkCurveX(w, f) + stalkSwayX(w, t, f);
+      pys[i] = baseY - w.h * f;
+    }
 
     // v6: near stalks also get a halo pass (replaces the old blur(2px) filter)
     for (let pass = 0; pass < 2; pass++) {
-      const isHalo = pass === 0; // v6: every stalk gets a halo pass (replaces the old blur filter)
-      ctx.strokeStyle = isHalo ? haloStyle : coreStyle;
-      ctx.lineCap = 'round';
-      ctx.lineJoin = 'round';
-      ctx.lineWidth = (w.width + w.tipW) / 2 * (isHalo ? 1.9 : 1);
+      const isHalo = pass === 0;
+      ctx.strokeStyle = isHalo ? w.haloStyle : w.coreStyle; // PERF: precomputed at build
+      ctx.lineWidth = w.backLineW * (isHalo ? 1.9 : 1);
 
-      // stalk outline: up one side, round tip, down the other
+      // stalk outline: up one side, down the other
       ctx.beginPath();
-      let prevX = 0, prevY = baseY;
-      let lastPx = 0, lastPy = baseY; // track final position for tip cap
+      let prevX = 0, prevY = baseY; // original quirk: first normal measured from origin
       for (let i = 0; i <= n; i++) {
         const f = i / n;
-        const px = w.x + stalkCurveX(w, f) + swayAt(f);
-        const py = baseY - w.h * f;
+        const px = pxs[i], py = pys[i];
         const dx = px - prevX, dy = py - prevY;
-        const dl = Math.hypot(dx, dy) || 1;
+        const dl = Math.sqrt(dx * dx + dy * dy) || 1; // PERF: hypot is slower, not needed here
         const nx = -dy / dl, ny = dx / dl;
-        const hw = (w.width * (1 - f) + w.tipW * f) / 2;
+        const hw = (w.width * (1 - f) + w.tipW * f) * 0.5;
         if (i === 0) ctx.moveTo(px + nx * hw, py + ny * hw);
         else ctx.lineTo(px + nx * hw, py + ny * hw);
         prevX = px; prevY = py;
-        lastPx = px; lastPy = py;
       }
-      // round tip cap (follows the stalk's actual direction)
-      const dxT = lastPx - prevX, dyT = lastPy - prevY;
-      const dlT = Math.hypot(dxT, dyT) || 1;
-      const nxT = -dyT / dlT, nyT = dxT / dlT;
-      ctx.quadraticCurveTo(lastPx, lastPy, lastPx + dxT * 0.5 + nxT * (w.tipW / 2), lastPy + dyT * 0.5 + nyT * (w.tipW / 2));
-      // down the other side
-      for (let i = n; i >= 0; i--) {
+      // down the other side (cached points; i=n no-op point dropped — degenerate in original)
+      for (let i = n - 1; i >= 0; i--) {
         const f = i / n;
-        const px = w.x + stalkCurveX(w, f) + swayAt(f);
-        const py = baseY - w.h * f;
-        // perpendicular from this segment direction
-        let dx, dy;
-        if (i === n) { dx = prevX - px; dy = prevY - py; }
-        else {
-          const f2 = (i + 1) / n;
-          const px2 = w.x + stalkCurveX(w, f2) + swayAt(f2);
-          const py2 = baseY - w.h * f2;
-          dx = px2 - px; dy = py2 - py;
-        }
-        const dl = Math.hypot(dx, dy) || 1;
+        const px = pxs[i], py = pys[i];
+        const dx = pxs[i + 1] - px, dy = pys[i + 1] - py;
+        const dl = Math.sqrt(dx * dx + dy * dy) || 1;
         const nx = -dy / dl, ny = dx / dl;
-        const hw = (w.width * (1 - f) + w.tipW * f) / 2;
+        const hw = (w.width * (1 - f) + w.tipW * f) * 0.5;
         ctx.lineTo(px - nx * hw, py - ny * hw);
       }
       ctx.closePath();
       ctx.stroke();
 
-      // branches flutter with the stalk
+      // branches flutter with the stalk (anchors read from cached positions)
       for (const b of w.branches) {
         const idx = Math.min(n, Math.max(1, Math.round(b.f * n)));
-        const f = idx / n;
-        const ax = w.x + stalkCurveX(w, f) + swayAt(f);
-        const ay = baseY - w.h * f;
+        const ax = pxs[idx], ay = pys[idx];
         const flutter = Math.sin(t * w.waveF2 * 1.4 + b.ph) * (3 + w.waveA2 * 0.4);
         const bx = ax + b.side * b.len + flutter;
         const by = ay - b.up;
         ctx.beginPath();
-        ctx.lineWidth = isHalo ? b.w * 1.9 : b.w;
-        ctx.strokeStyle = isHalo ? haloStyle : `hsla(${w.hue + 8},55%,42%,0.75)`;
+        ctx.lineWidth = isHalo ? b.haloW : b.w; // PERF: halo width precomputed
+        ctx.strokeStyle = isHalo ? w.haloStyle : w.branchCoreStyle;
         ctx.moveTo(ax, ay);
         ctx.bezierCurveTo(
           ax + b.side * b.len * 0.3, ay - b.up * 0.75,
@@ -2503,7 +2618,25 @@ function drawCaustics(t) {
   ctx.restore();
 }
 
+// PERF: pre-render a soft radial gradient sprite for light pooling - draw scaled instead of creating gradients each frame
+let _poolSprite = null, _poolSpriteSize = 0;
+function buildPoolSprite() {
+  const size = 256; // fixed size, will be scaled per ray
+  if (_poolSprite && _poolSpriteSize === size) return;
+  _poolSprite = document.createElement('canvas');
+  _poolSprite.width = size;
+  _poolSprite.height = size;
+  const pc = _poolSprite.getContext('2d');
+  const g = pc.createRadialGradient(size/2, size/2, 0, size/2, size/2, size/2);
+  g.addColorStop(0, 'rgba(255,255,255,1)'); // full white, alpha controlled via globalAlpha
+  g.addColorStop(1, 'rgba(255,255,255,0)');
+  pc.fillStyle = g;
+  pc.fillRect(0, 0, size, size);
+  _poolSpriteSize = size;
+}
+
 function drawLightPooling(t) {
+  if (!_poolSprite) buildPoolSprite(); // lazy init (was never called before)
   // Draw faint bright patches where each god-ray hits the sand
   const sandTop = H * 0.85;
   ctx.save();
@@ -2520,16 +2653,10 @@ function drawLightPooling(t) {
       Math.sin(vM * r.vLen - t * r.vSpd + r.vPh) * r.vAmp;
     const dx = r.x + off + wave * (0.35 + 0.65 * vM);
 
-    // Draw a soft bright ellipse at this position on the sand
+    // Draw a soft bright ellipse at this position on the sand using pre-rendered sprite
     const poolW = r.w * 0.7, poolH = 18;
-    const g = ctx.createRadialGradient(dx, sandTop + 12, 0, dx, sandTop + 12, poolW);
-    // Very faint: this is just a subtle highlight
-    g.addColorStop(0, `rgba(255,255,255,${r.alpha * 1.75})`); // v26: +25% brighter
-    g.addColorStop(1, "rgba(255,255,255,0)");
-    ctx.fillStyle = g;
-    ctx.beginPath();
-    ctx.ellipse(dx, sandTop + 12, poolW, poolH, 0, 0, Math.PI * 2);
-    ctx.fill();
+    ctx.globalAlpha = r.alpha * 1.75; // v26: +25% brighter
+    ctx.drawImage(_poolSprite, dx - poolW, sandTop + 12 - poolH, poolW * 2, poolH * 2);
   }
 
   ctx.restore();