Upload index.html

index.html

@@ -1175,12 +1175,13 @@ function buildScene() {
   // 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));
+  // DOUBLED: more foreground grass clusters for denser coverage
+  const nFgClusters = Math.max(16, Math.floor(W / 60));
   for (let i = 0; i < nFgClusters; i++) {
     const cx = rand(-10, W + 10);
     const clusterBaseY = sandAt(cx) + rand(8, H * 0.06); // moved down (a touch lower than the mid-ground grass) so it sits planted in front
     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
+    const nBlades = 5 + ((Math.random() * 4) | 0); // 5..8 blades per clump (doubled density)
     for (let b = 0; b < nBlades; b++) {
       const fgSegs = 4 + ((Math.random() * 2) | 0); // 4-5 segments for tapered outline
       fgGrass.push({
@@ -1202,10 +1203,15 @@ function buildScene() {
         sFreq: rand(3.8, 6.5),
         sPh: rand(0, Math.PI * 2),
         // PERF: per-blade scratch points — drawFgGrass reuses them in place
-        pts: Array.from({ length: fgSegs + 1 }, () => ({ x: 0, y: 0 }))
+        pts: Array.from({ length: fgSegs + 1 }, () => ({ x: 0, y: 0 })),
+        // v28: ~40% of blades get a gentle blur (pre-rendered sprite) for depth
+        blurred: Math.random() < 0.4,
+        sprite: null,
+        spriteScale: 1
       });
     }
   }
+  buildFgGrassSprites(); // v28: bake the defocused-blade sprites once (free at runtime)
 
   // PERF: pool the plantPoints collision objects too — updatePlants reuses them
   // in place instead of allocating one per stalk/branch point every frame.
@@ -1499,8 +1505,8 @@ function updateMotes(dt, t) {
 
 function drawSand(c = ctx) {
   const g = c.createLinearGradient(0, H * 0.85, 0, H);
-  g.addColorStop(0, "#d9b97c");
-  g.addColorStop(1, "#7e653d");
+  g.addColorStop(0, "#cdd8bd"); // v24: pale aqua-tan (cooled from warm brown)
+  g.addColorStop(1, "#7f938b"); // v24: sea-glass taupe
   c.fillStyle = g;
   c.beginPath();
   c.moveTo(-10, H + 10);
@@ -1811,6 +1817,80 @@ function buildFarSeaweedSprites() {
   }
 }
 
+// v28: pre-render blurred foreground grass sprites for ~40% of blades (gentle depth effect)
+function buildFgGrassSprites() {
+  const BLUR = 1.5; // very gentle blur — just enough to suggest "slightly out of focus"
+  const PAD = 8;    // extra space for blur spill
+  
+  for (const g of fgGrass) {
+    if (!g.blurred || g.sprite) continue; // only build for flagged blades that don't have sprites yet
+    
+    // Bounding box: account for the lean deviation so the tip can't clip out of canvas
+    const dev = g.lean * g.h; // horizontal offset of tip from base
+    const bw = Math.ceil(Math.abs(dev) + g.width + PAD * 2);
+    const bh = Math.ceil(g.h + PAD * 2);
+    
+    // Create sprite canvas
+    const spr = document.createElement("canvas");
+    spr.width = bw;
+    spr.height = bh;
+    const sc = spr.getContext("2d");
+    
+    // Apply gentle blur filter (baked in at build time - zero runtime cost)
+    sc.filter = `blur(${BLUR}px)`;
+    
+    // Draw the blade as a tapered shape with the same style as drawFgGrass
+    const localBaseX = PAD - Math.min(0, dev); // base x so both base and tip fit in canvas
+    const localBaseY = bh - PAD;
+    
+    // Dark body of the blade (simplified static version)
+    sc.fillStyle = `hsla(${g.hue},60%,31%,0.96)`;
+    sc.beginPath();
+    
+    // Simple tapered blade shape
+    const nSegs = g.segs + 1;
+    for (let i = 0; i < nSegs; i++) {
+      const f = i / g.segs;
+      const x = localBaseX + g.lean * g.h * f;
+      const y = localBaseY - g.h * f;
+      const hw = (g.width * (1 - f) + 1.2 * f) / 2;
+      
+      if (i === 0) sc.moveTo(x - hw, y);
+      else sc.lineTo(x - hw, y);
+    }
+    // Rounded tip
+    const tipX = localBaseX + g.lean * g.h;
+    const tipY = localBaseY - g.h;
+    sc.quadraticCurveTo(tipX + 2, tipY + 3, tipX + 1, tipY);
+    
+    // Right side going back down
+    for (let i = nSegs - 1; i >= 0; i--) {
+      const f = i / g.segs;
+      const x = localBaseX + g.lean * g.h * f;
+      const y = localBaseY - g.h * f;
+      const hw = (g.width * (1 - f) + 1.2 * f) / 2;
+      sc.lineTo(x + hw, y);
+    }
+    
+    sc.closePath();
+    sc.fill();
+    
+    // Lighter inner highlight
+    sc.strokeStyle = `hsla(${g.hue + 6},64%,45%,0.5)`;
+    sc.lineWidth = g.width * 0.3;
+    sc.lineCap = "round";
+    sc.beginPath();
+    sc.moveTo(localBaseX, localBaseY);
+    sc.lineTo(tipX, tipY);
+    sc.stroke();
+    
+    // Store sprite and offset for drawing (offsets place the blade base at the draw origin)
+    g.sprite = spr;
+    g.spriteXOffset = -localBaseX;
+    g.spriteYOffset = -localBaseY;
+  }
+}
+
 // v5: draw ultra-far seaweed sprites with simple sway animation
 function drawFarSeaweeds(t) {
   for (const w of farSeaweeds) {
@@ -2085,6 +2165,18 @@ function drawGrass(t) {
 // thin lighter inner stroke over a darker body for a lush, voluminous "closer" look.
 function drawFgGrass(t) {
   for (const g of fgGrass) {
+    // v28: defocused blades — blit the pre-blurred sprite with a gentle rotational sway
+    // around its base (same trick as the ultra-far seaweed). The baked blur hides the
+    // simplified motion, and this path is far cheaper than per-frame canvas filters.
+    if (g.sprite) {
+      const swayAngle = Math.sin(t * g.speed + g.phase) * 0.05; // subtle: like farSeaweeds
+      ctx.save();
+      ctx.translate(g.x, g.y);
+      ctx.rotate(swayAngle);
+      ctx.drawImage(g.sprite, g.spriteXOffset, g.spriteYOffset);
+      ctx.restore();
+      continue;
+    }
     // v16: tapered multi-segment blade with two-tone depth (like seaweed)
     const amp = 4 + g.h * 0.03;
     const n = g.segs + 1;
@@ -2221,6 +2313,92 @@ let lastGrainDrawn = false;
 // per-ray blur() filter is far cheaper rasterizing small areas than full-screen.
 
 
+// v24: baked current ripples — faint curved lines following the sand contour
+function drawRipples(c) {
+  c.save();
+  c.lineCap = "round";
+  const nLines = Math.floor(W / 16);
+  for (let i = 0; i < nLines; i++) {
+    const x0 = rand(0, W);
+    const yBase = sandAt(x0);
+    const len = rand(35, 95);
+    const bow = rand(-7, 7);
+    c.strokeStyle = `rgba(126, 148, 141, ${rand(0.07, 0.16)})`;
+    c.lineWidth = rand(1, 2);
+    c.beginPath();
+    c.moveTo(x0, yBase + rand(3, H * 0.05));
+    c.quadraticCurveTo(
+      x0 + len / 2,
+      sandAt(x0 + len / 2) + bow,
+      x0 + len,
+      sandAt(x0 + len) + rand(3, H * 0.04)
+    );
+    c.stroke();
+  }
+  c.restore();
+}
+
+// v24: baked pebble/speckle scatter — grainy cool-toned dots across the sand bed
+function drawPebbles(c) {
+  const n = Math.floor(W * H / 1800);
+  for (let i = 0; i < n; i++) {
+    const x = rand(0, W);
+    const y = sandAt(x) + rand(2, H * 0.14);
+    if (y > H) continue;
+    // cool palette: grey-teal, muted green, pale blue-grey
+    const hue = rand(150, 200);
+    const light = rand(38, 68);
+    c.fillStyle = `hsla(${hue}, ${rand(10, 28)}%, ${light}%, ${rand(0.25, 0.5)})`;
+    const r = rand(0.7, 2.4);
+    if (Math.random() < 0.6) {
+      // small round dot
+      c.beginPath();
+      c.arc(x, y, r, 0, Math.PI * 2);
+      c.fill();
+    } else {
+      // small ellipse pebble
+      c.save();
+      c.translate(x, y);
+      c.rotate(rand(0, Math.PI));
+      c.beginPath();
+      c.ellipse(0, 0, r * rand(1.2, 2), r * rand(0.5, 0.8), 0, 0, Math.PI * 2);
+      c.fill();
+      c.restore();
+    }
+  }
+}
+
+// v24: contact shadows — soft dark ellipses under rocks + faint band at sand surface line
+function drawContactShadows(c) {
+  // Faint darker band right at the sand surface (grounds the whole bed)
+  // FIXED: follows the actual sand contour instead of a fixed horizontal band
+  c.save();
+  const bandGrad = c.createLinearGradient(0, H * 0.85, 0, H * 0.9);
+  bandGrad.addColorStop(0, "rgba(50, 72, 68, 0)");
+  bandGrad.addColorStop(1, "rgba(50, 72, 68, 0.10)");
+  c.fillStyle = bandGrad;
+  // Draw the band following the sand contour to avoid visible horizontal lines
+  c.beginPath();
+  c.moveTo(-10, H + 10);
+  for (let i = 0; i < sandHeights.length; i++) {
+    const x = i * 40;
+    const y = sandHeights[i] + rand(2, H * 0.05); // offset below the surface
+    c.lineTo(x, y);
+  }
+  c.lineTo(W + 10, H + 10);
+  c.closePath();
+  c.fill();
+  // Soft ellipse under each rock
+  for (const rk of rocks) {
+    const y = sandAt(rk.x) + rk.r * 0.35;
+    c.fillStyle = "rgba(42, 60, 58, 0.18)";
+    c.beginPath();
+    c.ellipse(rk.x, y + rk.r * 0.25, rk.r * 1.25, rk.r * 0.38, 0, 0, Math.PI * 2);
+    c.fill();
+  }
+  c.restore();
+}
+
 let staticLayer = null;
 function buildStaticLayer() {
   staticLayer = document.createElement("canvas");
@@ -2229,9 +2407,135 @@ function buildStaticLayer() {
   const c2 = staticLayer.getContext("2d");
   c2.setTransform(ctx.getTransform());       // match DPR scaling exactly
   drawSand(c2);
-  drawRocks(c2);
+  drawRipples(c2);    // v24: baked current ripples (free at runtime)
+  drawPebbles(c2);    // v24: baked grainy pebble/speckle scatter
+  drawContactShadows(c2); // v24: soft dark ellipses under rocks + surface band
+  // NOTE: rocks are no longer baked here — they live in rocksLayer so they can be
+  // drawn AFTER the mid-ground grass (rocks sit IN FRONT of the blades, not behind them).
+}
+// Rocks on their own layer: blitted after drawGrass() so stones read as sitting in
+// front of the plants instead of the grass appearing to sprout out of them.
+let rocksLayer = null;
+function buildRocksLayer() {
+  rocksLayer = document.createElement("canvas");
+  rocksLayer.width = canvas.width;          // same device-pixel resolution as the tank
+  rocksLayer.height = canvas.height;
+  const c3 = rocksLayer.getContext("2d");
+  c3.setTransform(ctx.getTransform());       // match DPR scaling exactly
+  drawRocks(c3);
+}
+
+// ============ Tier 2: Caustics + light pooling (v25) ============
+let causticTile = null;
+let causticOffsetX = 0, causticOffsetY = 0;
+let lastCausticShift = 0;
+const CAUSTIC_TILE_SIZE = 160; // small tile — cheap to blit repeatedly
+
+function buildCausticTile() {
+  causticTile = document.createElement("canvas");
+  const s = CAUSTIC_TILE_SIZE;
+  causticTile.width = s; causticTile.height = s;
+  const c = causticTile.getContext("2d");
+  
+  // Apply blur to make caustics look softer/more realistic
+  c.filter = "blur(4px)"; // v26: tighter blur so the pattern reads clearly
+  
+  // Draw a few random bright spots/lines that look like refracted light patterns
+  for (let i = 0; i < 18; i++) {
+    const x = Math.random() * s, y = Math.random() * s;
+    const r = rand(4, 14);
+    const g = c.createRadialGradient(x, y, 0, x, y, r);
+    // Faint white-blue glow (will be blended with 'screen')
+    g.addColorStop(0, "rgba(255,255,255,0.44)"); // v26: +25% brighter
+    g.addColorStop(1, "rgba(255,255,255,0)");
+    c.fillStyle = g;
+    c.fillRect(x - r, y - r, r * 2, r * 2);
+  }
+  // Add some thin curved lines (like caustic web patterns)
+  for (let i = 0; i < 8; i++) {
+    const x1 = Math.random() * s, y1 = Math.random() * s;
+    const cx = x1 + rand(-40, 40), cy = y1 + rand(-40, 40);
+    const x2 = Math.random() * s, y2 = Math.random() * s;
+    c.strokeStyle = "rgba(255,255,255,0.23)"; // v26: +25% brighter
+    c.lineWidth = rand(1.5, 3.5);
+    c.beginPath();
+    c.moveTo(x1, y1);
+    c.quadraticCurveTo(cx, cy, x2, y2);
+    c.stroke();
+  }
+  
+  // Reset filter
+  c.filter = "none";
+}
+
+function drawCaustics(t) {
+  if (!causticTile || !sandHeights.length) return;
+  // Shift the tile offset every ~50ms for a subtle shimmer effect (cheap: no redraw, just reposition)
+  if (t - lastCausticShift > 0.05) {
+    causticOffsetX = Math.random() * CAUSTIC_TILE_SIZE;
+    causticOffsetY = Math.random() * CAUSTIC_TILE_SIZE;
+    lastCausticShift = t;
+  }
+
+  ctx.save();
+  
+  // Create a clipping path that follows the actual sand terrain
+  ctx.beginPath();
+  ctx.moveTo(-10, H + 10);
+  for (let i = 0; i < sandHeights.length; i++) {
+    ctx.lineTo(i * 40, sandHeights[i]);
+  }
+  ctx.lineTo(W + 10, H + 10);
+  ctx.closePath();
+  ctx.clip();
+  
+  ctx.globalCompositeOperation = "screen"; // additive light effect
+  ctx.globalAlpha = 0.35; // v26: +25% brighter so the shimmer stands out from the sand
+
+  // Tile the caustic pattern across the entire canvas (clip will handle masking)
+  const tileW = CAUSTIC_TILE_SIZE, tileH = CAUSTIC_TILE_SIZE;
+  for (let x = -causticOffsetX % tileW - tileW; x < W + tileW; x += tileW) {
+    for (let y = -causticOffsetY % tileH - tileH; y < H + tileH; y += tileH) {
+      ctx.drawImage(causticTile, x, y);
+    }
+  }
+
+  ctx.restore();
 }
 
+function drawLightPooling(t) {
+  // Draw faint bright patches where each god-ray hits the sand
+  const sandTop = H * 0.85;
+  ctx.save();
+  ctx.globalCompositeOperation = "screen"; // additive light
+
+  for (const r of rays) {
+    // Compute where this ray hits the sand at y ≈ sandTop
+    // Use the same wave math as the ray drawing to match positions
+    const off = Math.sin(t * r.speed * 6 + r.x) * 55;
+    // At the sand depth (vM near the bottom), compute the x position
+    const vM = 0.95; // approximate depth where sand starts
+    const wave =
+      Math.sin(vM * r.uLen + t * r.uSpd + r.uPh) * r.uAmp +
+      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
+    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.restore();
+}
+
+
 let last = performance.now();
 function frame(now) {
   const dt = Math.min(0.05, (now - last) / 1000);
@@ -2286,8 +2590,27 @@ function frame(now) {
   for (const f of fishes) f.draw(ctx);
 
   ctx.drawImage(staticLayer, 0, 0, W, H);
+
+  // v27: at night, dim the bare floor ~25% (clipped to the sand shape) BEFORE the caustics,
+  // so the shimmer reads brighter against a darker bed without touching the caustics themselves.
+  if (curNight > 0.01) {
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(-10, H + 10);
+    for (let i = 0; i < sandHeights.length; i++) ctx.lineTo(i * 40, sandHeights[i]);
+    ctx.lineTo(W + 10, H + 10);
+    ctx.closePath();
+    ctx.clip();
+    ctx.fillStyle = `rgba(5,10,22,${(curNight * 0.25).toFixed(3)})`;
+    ctx.fillRect(0, H * 0.8, W, H * 0.2);
+    ctx.restore();
+  }
+
+  drawCaustics(t);      // v25: animated caustic shimmer on the sand
+  drawLightPooling(t);  // v25: light pools where god-rays hit the floor
   drawSeaweed();
   drawGrass(t);
+  ctx.drawImage(rocksLayer, 0, 0, W, H); // rocks in front of mid-ground grass
 
   for (let i = bubbles.length - 1; i >= 0; i--) {
     const b = bubbles[i];
@@ -2324,6 +2647,8 @@ function doResize() {
   buildFarSeaweedSprites(); // v5: rebuild ultra-far seaweed sprites for new size
   buildVignette(); // v6: rebuild the static vignette layer
   buildStaticLayer();
+  buildRocksLayer(); // rocks drawn after grass so they sit in front of the plants
+  buildCausticTile(); // v25: caustic texture tile (built once)
   if (!grainPattern) buildGrainTile(); // v8: grain tile is size-independent, build once
 }
 // ============ Player controls: keyboard + gamepad ============