Upload index.html

index.html

@@ -544,15 +544,22 @@ function resize() {
   buildScene();
 }
 
-// --- slow light cycle: dark -> blue -> orange -> dark over CYCLE seconds ---
-const CYCLE = 240; // seconds per full day/night cycle (night now lasts ~2x as long)
+// --- slow light cycle: bright day -> dusk -> night -> dawn, over CYCLE seconds ---
+const CYCLE = 180; // seconds per full day/night cycle (v9: exactly 3 minutes)
+// Phase durations in seconds: daytime blue 90s, dusk 15s, night 60s, dawn 15s. Total = 180s.
+// The cycle starts at the beginning of the bright daytime-blue phase.
+const DUSK_START   = 90 / CYCLE;              // p where day ends and dusk begins      (0.5)
+const NIGHT_START  = (90 + 15) / CYCLE;       // p where dusk ends and night begins    (~0.5833)
+const DAWN_START   = (90 + 15 + 60) / CYCLE;  // p where night ends and dawn begins    (~0.9167)
+const MID_DUSK     = (DUSK_START + NIGHT_START) / 2; // sunset-glow point, mid-dusk
 // [t, waterTop, waterMid, waterBot, rayTint, ambientWashRGB, ambientWashAlpha]
 const LIGHT_KEYS = [
-  [0.00, [13,88,118],  [8,58,82],    [3,25,43],    [190,235,255], [190,235,255], 0.00],
-  [0.35, [224,122,52], [128,60,36],  [34,22,26],   [255,176,96],  [255,150,70],  0.14],
-  [0.62, [7,15,32],    [4,10,22],    [2,6,14],     [96,146,206],  [3,8,20],      0.40],
-  [0.90, [7,15,32],    [4,10,22],    [2,6,14],     [96,146,206],  [3,8,20],      0.40],
-  [1.00, [13,88,118],  [8,58,82],    [3,25,43],    [190,235,255], [190,235,255], 0.00]
+  [0.00,       [13,88,118],  [8,58,82],   [3,25,43],   [190,235,255], [190,235,255], 0.00],
+  [DUSK_START, [13,88,118],  [8,58,82],   [3,25,43],   [190,235,255], [190,235,255], 0.00],
+  [MID_DUSK,   [224,122,52], [128,60,36], [34,22,26],  [255,176,96],  [255,150,70],  0.14],
+  [NIGHT_START,[7,15,32],    [4,10,22],   [2,6,14],    [96,146,206],  [3,8,20],      0.40],
+  [DAWN_START, [7,15,32],    [4,10,22],   [2,6,14],    [96,146,206],  [3,8,20],      0.40],
+  [1.00,       [13,88,118],  [8,58,82],   [3,25,43],   [190,235,255], [190,235,255], 0.00]
 ];
 
 function sampleLight(t) {
@@ -572,10 +579,10 @@ function rgbStr(c) { return `rgb(${c[0]},${c[1]},${c[2]})`; }
 // Drives the sleepier night-time behaviour. Cheap: pure math on one number.
 function nightFactor(t) {
   const p = ((t / CYCLE) % 1 + 1) % 1;
-  if (p < 0.35 || p >= 0.92) return 0;   // bright day
-  if (p < 0.62)  return (p - 0.35) / 0.27;                       // dusk: fade to night
-  if (p < 0.90)  return 1;                                        // full night
-  return 1 - (p - 0.90) / 0.02;                                   // pre-dawn: fade to day
+  if (p < DUSK_START)   return 0;                                              // bright day
+  if (p < NIGHT_START)  return (p - DUSK_START) / (NIGHT_START - DUSK_START);  // dusk: fade to night
+  if (p < DAWN_START)   return 1;                                              // full night
+  return 1 - (p - DAWN_START) / (1 - DAWN_START);                              // dawn: fade to day
 }
 
 function drawBackground(light) {
@@ -860,6 +867,40 @@ function drawVignette() {
   ctx.fillRect(0, 0, W, H);
 }
 
+// --- v8: mild film grain over the whole scene.
+// Efficient: a small noise tile is generated ONCE and turned into a cached pattern.
+// Each frame we just blit that pattern with 'overlay' blending at low opacity and a
+// random sub-tile offset, so it shimmers like real film. Cost = one pattern fillRect.
+let grainPattern = null;
+const GRAIN_TILE = 160; // tile size in px (kept small so the pattern is cheap to repeat)
+function buildGrainTile() {
+  const tile = document.createElement("canvas");
+  tile.width = GRAIN_TILE; tile.height = GRAIN_TILE;
+  const g = tile.getContext("2d");
+  const img = g.createImageData(GRAIN_TILE, GRAIN_TILE);
+  const d = img.data;
+  for (let i = 0; i < d.length; i += 4) {
+    // grayscale noise centred on mid-grey (~128): with 'overlay' blend, values near
+    // 128 are neutral while higher/lower ones gently brighten/darken -> filmic grain.
+    const v = 96 + Math.floor(Math.random() * 64); // 96..159, centred on 128
+    d[i] = v; d[i+1] = v; d[i+2] = v; d[i+3] = 255;
+  }
+  g.putImageData(img, 0, 0);
+  grainPattern = ctx.createPattern(tile, "repeat"); // cached once, reused every frame
+}
+function drawGrain() {
+  if (!grainPattern) return;
+  const ox = (Math.random() * GRAIN_TILE) | 0; // random offset each frame -> animated grain
+  const oy = (Math.random() * GRAIN_TILE) | 0;
+  ctx.save();
+  ctx.globalCompositeOperation = "overlay";
+  ctx.globalAlpha = 0.7; // mild: subtle shimmer, not heavy noise
+  ctx.translate(-ox, -oy);
+  ctx.fillStyle = grainPattern;
+  ctx.fillRect(0, 0, W + GRAIN_TILE, H + GRAIN_TILE); // cover full screen even with offset
+  ctx.restore();
+}
+
 // Precomputed static layers — the sand and rocks never move, so they are
 // rendered once to an offscreen canvas and blitted each frame (v6) instead of
 // re-drawing their gradients and paths every single frame.
@@ -936,12 +977,14 @@ function frame(now) {
   }
 
   drawVignette();
+  drawGrain(); // v8: mild film grain on top of everything
   requestAnimationFrame(frame);
 }
 
 function doResize() {
   resize();
   buildStaticLayer();
+  if (!grainPattern) buildGrainTile(); // v8: grain tile is size-independent, build once
 }
 window.addEventListener("resize", doResize);
 doResize();