Upload index.html

index.html

@@ -22,10 +22,11 @@
 <script>
 (() => {
 "use strict";
-// ============ Aquarium v10 ALT — hilly terrain (alt) ================================
-// Based on v10: same behavior, but the sand bed is generated as rolling hills that
-// differ on every refresh. Fish skim over crests, and night-time sleep clusters form
-// on the hilly seaweed/grass patches instead of a flat line.
+// ============ 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.
 const canvas = document.getElementById("tank");
 const ctx = canvas.getContext("2d");
 let W = 0, H = 0;
@@ -41,7 +42,8 @@ function lerpAngle(a, b, t) {
 }
 
 const HUES = [8, 35, 46, 172, 195, 215, 262, 320];
-let fishes = [], bubbles = [], seaweeds = [], motes = [], rays = [], rocks = [], grass = [];
+const TAIL_TYPES = ['classic', 'fan', 'streamer']; // v11: three tail-fin styles, one per fish
+let fishes = [], bubbles = [], seaweeds = [], motes = [], rays = [], rocks = [], grass = [], fgGrass = [];
 let curNight = 0; // v7: shared night factor (dims the top-light + sheen)
 let plantPoints = []; // collision points along every stalk/branch, rebuilt each frame
 let sandHeights = [];
@@ -54,6 +56,7 @@ class Fish {
     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);
     this.hue = pick(HUES);
+    this.tailType = pick(TAIL_TYPES); // v11: random tail-fin style for variety
     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)
@@ -286,15 +289,33 @@ 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;
 
-    // tail fin (v7): rounded lobes instead of two pointed spikes — each tip is swept
-    // around by a curve whose control point sits just past where the old spike was
+    // 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.
     c.fillStyle = `hsla(${this.hue},75%,52%,0.92)`;
     c.beginPath();
-    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
+    if (this.tailType === 'fan') {
+      // 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
+    } 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
+    } 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.fill();
 
     // body — undulates while swimming: the ellipse flexes along a traveling wave (v3)
@@ -471,6 +492,8 @@ function buildScene() {
   rays = [];
   rocks = [];
   sandHeights = [];
+  grass = []; // v10.1: clear on rebuild so resize/F11 doesn't stack a second row
+  fgGrass = []; // v12: same reset for the foreground layer (resize/F11 safety)
 
   // ALT: rolling hills instead of a flat bed — three octaves of random sine waves
   // (broad swells + mid undulations + fine ripples), re-rolled on every refresh.
@@ -566,6 +589,30 @@ function buildScene() {
     }
   }
 
+  // v12: foreground grass — planted on the FRONT glass (closest to the viewer), so it is
+  // drawn last and foreshortened. It grows in the low band below the sand line, i.e. the
+  // zone fish never reach, and sways with the water like the other flora but has no
+  // fish-push physics (purely decorative). ALT-FG: all sizes halved vs the original fg.
+  const nFgClusters = Math.max(8, Math.floor(W / 120));
+  for (let i = 0; i < nFgClusters; i++) {
+    const cx = rand(-10, W + 10);
+    const clusterBaseY = sandAt(cx) + rand(4, H * 0.05); // rooted just in front of the sand bed
+    const baseHue = rand(46, 76); // v12.1: yellowish-green — pops against the mid-ground green grass
+    const nBlades = 3 + ((Math.random() * 4) | 0); // 3..6 blades per clump
+    for (let b = 0; b < nBlades; b++) {
+      fgGrass.push({
+        x: cx + rand(-7.5, 7.5),       // 50%: tighter clumps (was -15..15)
+        y: clusterBaseY + rand(-2, 4), // 50%: finer vertical jitter (was -4..8)
+        h: rand(H * 0.08, H * 0.18),   // 50%: half height (was H*0.16..H*0.36)
+        lean: rand(-0.25, 0.25),       // base tilt from vertical
+        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)
+      });
+    }
+  }
+
   const nFish = Math.max(7, Math.floor(W / 130));
   for (let i = 0; i < nFish; i++) fishes.push(new Fish());
 
@@ -944,6 +991,37 @@ function drawGrass(t) {
   }
 }
 
+// v12: foreground grass sways with the water — decorative only, no physics.
+// 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;
+    ctx.beginPath();
+    ctx.moveTo(g.x, g.y);
+    ctx.quadraticCurveTo(cpx, cpy, tipX, tipY);
+    ctx.stroke();
+
+    // lighter inner highlight for depth (cheap: one extra thin stroke)
+    ctx.strokeStyle = `hsla(${g.hue + 6},64%,45%,0.5)`;
+    ctx.lineWidth = g.width * 0.45;
+    ctx.beginPath();
+    ctx.moveTo(g.x, g.y);
+    ctx.quadraticCurveTo(cpx, cpy, tipX, tipY);
+    ctx.stroke();
+  }
+}
+
 function drawVignette() {
   const g = ctx.createRadialGradient(W / 2, H * 0.45, Math.min(W, H) * 0.35, W / 2, H * 0.55, Math.max(W, H) * 0.78);
   g.addColorStop(0, "rgba(0,0,0,0)");
@@ -1064,6 +1142,8 @@ function frame(now) {
     b.draw(ctx);
   }
 
+  drawFgGrass(t); // v12: foreground grass — closest to the viewer, drawn on top
+
   // ambient day/night wash over the whole scene
   if (light.washA > 0.005) {
     ctx.fillStyle = `rgba(${light.washRGB[0]},${light.washRGB[1]},${light.washRGB[2]},${light.washA})`;