Upload index.html

index.html

@@ -1013,7 +1013,7 @@ function buildScene() {
   const nGrassTufts = Math.max(50, Math.floor(W / 9));
   for (let i = 0; i < nGrassTufts; i++) {
     const gx = rand(8, W - 8);
-    const gy = sandAt(gx) + rand(-3, 7);
+    const gy = sandAt(gx) + rand(2, 9); // moved DOWN so every blade roots at/below the sand line — no floating bits, closes the gap fish wedged into
     const baseHue = rand(95, 155);
     const blades = 2 + ((Math.random() * 4) | 0); // 2..5 blades per tuft
     for (let b = 0; b < blades; b++) {
@@ -1051,7 +1051,7 @@ function buildScene() {
   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 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
     for (let b = 0; b < nBlades; b++) {
@@ -1064,7 +1064,7 @@ 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(2, 4),             // kept slightly thicker than the mid-ground grass (1.4..2.8)
         // 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
@@ -1288,21 +1288,41 @@ function buildRaySprites() {
     const sc = spr.getContext("2d");
     sc.drawImage(full, 0, 0, bw, bh, 0, 0, spr.width, spr.height);
 
-    // PERF: pre-tint the sprite with the current light.ray color (no per-frame tinting)
-    if (rayTintRGB) {
-      const [tr, tg, tb] = rayTintRGB;
-      sc.globalCompositeOperation = "source-in";
-      sc.fillStyle = `rgb(${tr},${tg},${tb})`;
-      sc.fillRect(0, 0, spr.width, spr.height);
-    }
-
-    r.sprite = spr;
+    // PERF: store the blurred WHITE beam. Tinting is done separately in applyRayTint()
+    // so that a light-color change only needs a cheap source-in fill instead of
+    // re-running this expensive blur rasterization (which caused transition hitching).
+    r.baseSprite = spr;
     r.tw = spr.width; r.th = spr.height; // sprite pixel size
     r.bw = bw;                           // beam width in CSS px (dest size)
     r.xMinL = xMinL;                     // leftmost local x of the beam body
   }
 
   raySpritesBuiltFor = W + "x" + H;
+  applyRayTint(); // ensure every ray has a blittable sprite immediately
+}
+
+// Cheaply re-tint the cached blurred sprites with the current light.ray color.
+// No blur / no shape rasterization — just a source-in fill over the stored beam,
+// so this stays fast even during slow dusk/dawn transitions.
+function applyRayTint() {
+  for (const r of rays) {
+    if (!r.baseSprite) continue;
+    if (!r.tintCanvas) {
+      r.tintCanvas = document.createElement("canvas");
+      r.tintCanvas.width = r.tw; r.tintCanvas.height = r.th;
+    }
+    const tc = r.tintCanvas.getContext("2d");
+    tc.clearRect(0, 0, r.tw, r.th);
+    tc.drawImage(r.baseSprite, 0, 0);
+    if (rayTintRGB) {
+      const [tr, tg, tb] = rayTintRGB;
+      tc.globalCompositeOperation = "source-in";
+      tc.fillStyle = `rgb(${tr},${tg},${tb})`;
+      tc.fillRect(0, 0, r.tw, r.th);
+      tc.globalCompositeOperation = "source-over";
+    }
+    r.sprite = r.tintCanvas;
+  }
 }
 
 function drawRays(t, light) {
@@ -1310,11 +1330,12 @@ function drawRays(t, light) {
   const [rr, rg, rb] = light.ray;
   const yTop0 = -10, ySpan = H * 0.95 + 10;
 
-  // PERF: only rebuild tinted sprites when the light color shifts significantly (delta > 35)
-  // Higher threshold = fewer expensive canvas rebuilds during slow dusk/dawn transitions
+  // PERF: re-tint the cached blurred sprites only when the light color shifts enough.
+  // Re-tinting is cheap (a source-in fill) — no blur re-rasterization — so this runs
+  // smoothly even during slow dusk/dawn transitions instead of hitching on rebuilds.
   if (!rayTintRGB || Math.abs(rayTintRGB[0] - rr) + Math.abs(rayTintRGB[1] - rg) + Math.abs(rayTintRGB[2] - rb) > 35) {
     rayTintRGB = [rr, rg, rb];
-    buildRaySprites(); // rebuild with the new tint
+    applyRayTint(); // cheap re-tint of the cached blurred sprites (no blur re-run)
   }
 
   for (const r of rays) {