Upload index.html

index.html

@@ -22,6 +22,7 @@
 <script>
 (() => {
 "use strict";
+// ============ Aquarium v2 — undulating god rays (light refracting through moving water) ============
 const canvas = document.getElementById("tank");
 const ctx = canvas.getContext("2d");
 let W = 0, H = 0;
@@ -44,7 +45,7 @@ let sandHeights = [], starfish = null;
 class Fish {
   constructor() {
     this.size = rand(15, 42);
-    this.speed = rand(0.55, 1.7) * (this.size / 30 + 0.5);
+    this.speed = rand(0.55, 1.7) * (this.size / 30 + 0.5) * 0.75; // v3: max speed reduced 25%
     this.x = rand(60, W - 60);
     this.y = rand(H * 0.15, H * 0.72);
     this.angle = Math.random() < 0.5 ? rand(-0.4, 0.4) : Math.PI + rand(-0.4, 0.4);
@@ -65,6 +66,11 @@ class Fish {
 
     // Occasionally puffs a tiny cluster of bubbles from its mouth
     this.bubbleTimer = rand(4, 16);    // seconds until the next bubble puff
+
+    // Body roll — banks/rolls through sharp turns like a real fish (spring-damper)
+    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?
   }
   update(dt) {
     // Behavior state machine — occasionally hover or come to near-rest
@@ -93,7 +99,7 @@ class Fish {
     if (this.bubbleTimer <= 0) {
       const mx = this.x + Math.cos(this.angle) * this.size * 0.62;
       const my = this.y + Math.sin(this.angle) * this.size * 0.62;
-      const n = 2 + ((Math.random() * 3) | 0); // 2..4 bubbles, a tiny cluster
+      const n = (2 + ((Math.random() * 3) | 0)) * 2; // 4..8 bubbles — doubled from the old 2..4
       for (let i = 0; i < n; i++) bubbles.push(new Bubble(false, mx + rand(-3, 3), my + rand(-3, 3)));
       this.bubbleTimer = rand(8, 22); // wait a while before the next puff
     }
@@ -108,10 +114,10 @@ class Fish {
 
     let desired = Math.atan2(wy - this.y, wx - this.x);
 
-    // Soft boundary steering: only kicks in near the actual glass, so fish roam
-    // freely across almost the whole tank (including far left and right)
+    // Soft boundary steering: kicks in a bit before the glass so fish turn
+    // gently instead of bonking (v4), roaming freely across the whole tank
     let pull = 0;
-    const mX = W * 0.13, mTop = H * 0.10, mBot = H * 0.16;
+    const mX = W * 0.16, mTop = H * 0.14, mBot = H * 0.16;
     if (this.x < mX)            pull = Math.max(pull, 1 - this.x / mX);
     else if (this.x > W - mX)   pull = Math.max(pull, 1 - (W - this.x) / mX);
     if (this.y < mTop)          pull = Math.max(pull, 1 - this.y / mTop);
@@ -123,11 +129,12 @@ class Fish {
 
     // Floor steering: as a fish nears the sand bed it is steered upward,
     // so it skims above the ground line instead of diving under it
+    // (v4: starts earlier and pushes harder — grass yes, faceplants no)
     const floorY = sandAt(this.x) - this.size * 0.35;
-    const fZone = H * 0.14;
+    const fZone = H * 0.18;
     if (this.y > floorY - fZone) {
       const fp = Math.min(1, (this.y - (floorY - fZone)) / fZone);
-      desired = lerpAngle(desired, Math.atan2(H * 0.45 - this.y, W / 2 - this.x), fp * 1.2);
+      desired = lerpAngle(desired, Math.atan2(H * 0.45 - this.y, W / 2 - this.x), fp * 1.6);
     }
 
     // Limit turn rate so direction changes are smooth and fish-like
@@ -137,6 +144,19 @@ class Fish {
     const maxStep = this.maxTurn * dt;
     this.angle += Math.max(-maxStep, Math.min(maxStep, d));
 
+    // Fish roll their bodies when banking through sharp turns: the moment a big
+    // heading change begins, sometimes excite a roll (banking into the turn),
+    // then let a spring-damper wobble it back upright.
+    const hardTurn = Math.abs(d) > 1.2;
+    if (hardTurn && !this.inHardTurn && this.speedFactor > 0.35 && Math.random() < 0.55) {
+      this.rollVel += Math.sign(d) * rand(3.8, 5.5); // bank into the turn
+    }
+    this.inHardTurn = hardTurn;
+    this.rollVel += (-8 * this.roll - 2.4 * this.rollVel) * dt;
+    this.roll += this.rollVel * dt;
+    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; }
+
     const sp = this.speed * this.speedFactor * 60 * dt;
     this.x += Math.cos(this.angle) * sp;
     this.y += Math.sin(this.angle) * sp;
@@ -144,9 +164,10 @@ class Fish {
     // NOTE: fish do NOT collide with plants — they plough straight through.
     // The seaweed bends out of the way instead (see updatePlants).
 
-    // Hard safety clamp — never below the ground line (sand surface)
-    this.x = Math.max(20, Math.min(W - 20, this.x));
-    this.y = Math.max(20, Math.min(sandAt(this.x) - this.size * 0.35, this.y));
+    // Hard safety clamp — fish may just about swim off-screen (they never
+    // despawn or leave), but never below the ground line (sand surface)
+    this.x = Math.max(-40, Math.min(W + 40, this.x));
+    this.y = Math.max(-50, Math.min(sandAt(this.x) - this.size * 0.35, this.y));
 
     // Tail beat follows actual speed — a resting fish barely moves its tail
     const effSpeed = this.speed * this.speedFactor;
@@ -156,8 +177,18 @@ 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)));
+      c.rotate(this.roll * 0.1);
+    }
     const s = this.size;
-    const sway = Math.sin(this.phase) * s * 0.28;
+    // 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
+    const waveAmp = s * 0.12;    // subtle flex amplitude
+    // 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;
 
     // tail fin
     c.fillStyle = `hsla(${this.hue},75%,52%,0.92)`;
@@ -169,13 +200,27 @@ class Fish {
     c.quadraticCurveTo(-s * 1.0, s * 0.35 + sway, -s * 0.5, 0);
     c.fill();
 
-    // body
+    // body — undulates while swimming: the ellipse flexes along a traveling wave (v3)
     const g = c.createLinearGradient(0, -s * 0.5, 0, s * 0.5);
     g.addColorStop(0, `hsl(${this.hue},82%,64%)`);
     g.addColorStop(1, `hsl(${this.hue},70%,44%)`);
     c.fillStyle = g;
+    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)
+    const wy = x => Math.sin(x * waveK + this.phase) * waveAmp * ((s - x) / (2 * s));
     c.beginPath();
-    c.ellipse(0, 0, s, s * 0.42, 0, 0, Math.PI * 2);
+    for (let i = 0; i <= NSEG; i++) {        // top edge: head (+s) -> tail (-s)
+      const x = s - (i / NSEG) * 2 * s;
+      const hh = s * 0.42 * Math.sqrt(Math.max(0, 1 - (x / s) ** 2));
+      if (i === 0) c.moveTo(x, -hh + wy(x)); else c.lineTo(x, -hh + wy(x));
+    }
+    for (let i = NSEG; i >= 0; i--) {        // bottom edge: tail (-s) -> head (+s)
+      const x = s - (i / NSEG) * 2 * s;
+      const hh = s * 0.42 * Math.sqrt(Math.max(0, 1 - (x / s) ** 2));
+      c.lineTo(x, hh + wy(x));
+    }
+    c.closePath();
     c.fill();
 
     // belly highlight
@@ -184,11 +229,12 @@ class Fish {
     c.ellipse(0, s * 0.14, s * 0.82, s * 0.24, 0, 0, Math.PI * 2);
     c.fill();
 
-    // dorsal fin
+    // dorsal fin — rides the body wave at its attachment points so it
+    // never disconnects as the back undulates (v4)
     c.fillStyle = `hsla(${this.hue},80%,50%,0.9)`;
     c.beginPath();
-    c.moveTo(-s * 0.15, -s * 0.36);
-    c.quadraticCurveTo(s * 0.05, -s * 0.78, s * 0.38, -s * 0.4);
+    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));
     c.closePath();
     c.fill();
 
@@ -305,11 +351,15 @@ function buildScene() {
           up: rand(10, 26),               // how far it curls upward
           w: rand(2, 4),
           ph: rand(0, Math.PI * 2),
-          flower: Math.random() < 0.3 ? {  // ~30% of branch tips bloom
-            hue: (Math.random() * 360) | 0,      // colourful — full spectrum
-            r: rand(4.5, 8),                     // head size
-            petals: 5 + ((Math.random() * 3) | 0) // 5..7 petals
-          } : null
+          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
+            }));
+          })() : []
         });
       }
       seaweeds.push(st);
@@ -328,7 +378,7 @@ function buildScene() {
       grass.push({
         x: gx + rand(-7, 7),
         y: gy,
-        h: rand(14, 44),
+        h: rand(14, 70), // v3: taller grass blades allowed (seaweed unchanged)
         lean: rand(-0.35, 0.35),          // base tilt from vertical
         phase: rand(0, Math.PI * 2),
         speed: rand(1.3, 2.8),            // quicker, finer sway than seaweed
@@ -342,7 +392,7 @@ function buildScene() {
   const nFish = Math.max(7, Math.floor(W / 130));
   for (let i = 0; i < nFish; i++) fishes.push(new Fish());
 
-  for (let i = 0; i < 52; i++) bubbles.push(new Bubble(true)); // doubled for a livelier stream
+  for (let i = 0; i < 26; i++) bubbles.push(new Bubble(true)); // halved back to the original stream
 
   for (let i = 0; i < 45; i++) {
     motes.push({ x: rand(0, W), y: rand(0, H), r: rand(0.6, 1.8), s: rand(3, 9), p: rand(0, Math.PI * 2) });
@@ -351,7 +401,10 @@ function buildScene() {
   for (let i = 0; i < 5; i++) {
     rays.push({
       x: rand(0, W), w: rand(80, 210), tilt: rand(-0.35, 0.35),
-      speed: rand(0.06, 0.14) * (Math.random() < 0.5 ? 1 : -1), alpha: rand(0.04, 0.09)
+      speed: rand(0.06, 0.14) * (Math.random() < 0.5 ? 1 : -1), alpha: rand(0.04, 0.09),
+      // undulation — two traveling waves so each beam shimmers like light refracted through moving water
+      uAmp: rand(18, 46),   uLen: rand(2.2, 4.5), uSpd: rand(0.35, 0.9) * (Math.random() < 0.5 ? 1 : -1), uPh: rand(0, Math.PI * 2),
+      vAmp: rand(6, 14),    vLen: rand(5, 9),     vSpd: rand(0.8, 1.6) * (Math.random() < 0.5 ? 1 : -1),   vPh: rand(0, Math.PI * 2)
     });
   }
 
@@ -408,39 +461,59 @@ function drawBackground(light) {
 
 function drawRays(t, light) {
   const [rr, rg, rb] = light.ray;
+  const segs = 18; // vertical resolution of each beam's undulating spine
   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;
-    const x = r.x + off;
+    const x0 = r.x + off;
     const topW = r.w * 0.45, botW = r.w * 1.9;
     const shift = r.tilt * H;
 
-    // soft outer beam: bright at the surface, fading down through the water
-    let grad = ctx.createLinearGradient(0, 0, 0, H);
-    grad.addColorStop(0, `rgba(${rr},${rg},${rb},${r.alpha})`);
-    grad.addColorStop(0.55, `rgba(${rr},${rg},${rb},${r.alpha * 0.45})`);
-    grad.addColorStop(1, `rgba(${rr},${rg},${rb},0)`);
-    ctx.fillStyle = grad;
-    ctx.beginPath();
-    ctx.moveTo(x - topW, -10);
-    ctx.lineTo(x + topW, -10);
-    ctx.lineTo(x + shift + botW, H * 0.95);
-    ctx.lineTo(x + shift - botW, H * 0.95);
-    ctx.closePath();
-    ctx.fill();
+    // 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 = [];
+    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);
+      const grow = 0.35 + 0.65 * v;             // straighter up top, bends more with depth
+      const wave =
+        Math.sin(v * r.uLen + t * r.uSpd + r.uPh) * r.uAmp +
+        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]);
+    }
 
-    // brighter inner core so each beam has a gentle gradient across it
-    const cTop = topW * 0.42, cBot = botW * 0.42;
-    grad = ctx.createLinearGradient(0, 0, 0, H);
-    grad.addColorStop(0, `rgba(${rr},${rg},${rb},${r.alpha * 1.5})`);
-    grad.addColorStop(0.65, `rgba(${rr},${rg},${rb},0)`);
-    ctx.fillStyle = grad;
-    ctx.beginPath();
-    ctx.moveTo(x - cTop, -10);
-    ctx.lineTo(x + cTop, -10);
-    ctx.lineTo(x + shift + cBot, H * 0.95);
-    ctx.lineTo(x + shift - cBot, H * 0.95);
-    ctx.closePath();
-    ctx.fill();
+    // Fill a band between two edge polylines with a vertical fade (matches v1 look).
+    const band = (a, b, aTop, midStop, midFactor) => {
+      ctx.beginPath();
+      ctx.moveTo(a[0][0], a[0][1]);
+      for (let i = 1; i < a.length; i++) ctx.lineTo(a[i][0], a[i][1]);
+      for (let i = b.length - 1; i >= 0; i--) ctx.lineTo(b[i][0], b[i][1]);
+      ctx.closePath();
+      const g = ctx.createLinearGradient(0, 0, 0, H);
+      g.addColorStop(0, `rgba(${rr},${rg},${rb},${aTop})`);
+      g.addColorStop(midStop, `rgba(${rr},${rg},${rb},${aTop * midFactor})`);
+      g.addColorStop(1, `rgba(${rr},${rg},${rb},0)`);
+      ctx.fillStyle = g;
+      ctx.fill();
+    };
+
+    // soft outer beam (v1 alphas), now following the undulating spine
+    band(L, R, r.alpha, 0.55, 0.45);
+
+    // brighter, narrower inner core riding the same undulation (v1 core profile)
+    const LC = [], RC = [];
+    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]);
+    }
+    band(LC, RC, r.alpha * 1.5, 0.65, 0);
   }
 }
 
@@ -618,8 +691,16 @@ function drawSeaweed() {
       ctx.quadraticCurveTo((a.x + b.tx) / 2 + b.side * 3, (a.y + b.ty) / 2 - 5, b.tx, b.ty);
       ctx.stroke();
 
-      // colourful flower head blooming at the branch tip
-      if (b.flower) drawFlowerHead(b.tx, b.ty, b.flower);
+      // 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);
+        }
+      }
     }
   }
 }