Upload index.html

index.html

@@ -1673,12 +1673,22 @@ function drawRays(t, light) {
   }
 }
 
-// v29: Fish occlude godrays - cast long blurred shadows down to the tank floor
+// v29: Fish occlude godrays - cast angled, blurred shadows that move with the sun
 function drawFishShadows(t) {
   ctx.save();
   ctx.globalCompositeOperation = 'multiply';
+  
+  // Calculate sun position based on raw day phase (linear progression)
+  const p = ((t / CYCLE) % 1 + 1) % 1; // 0 to 1, linear throughout the day
+  // Sun moves from left to right across the sky during the day
+  // p=0 (dawn): sun on left, shadows point right
+  // p=0.5 (noon): sun overhead, shadows are short and straight down
+  // p=1 (dusk): sun on right, shadows point left
+  const sunAngle = (p - 0.5) * Math.PI * 0.8; // -1.25 to +1.25 radians
+  const shadowAngle = Math.atan2(1, Math.tan(sunAngle + Math.PI/2)); // convert to shadow angle
+  
   for (const f of fishes) {
-    // Fish blocks light, casting a shadow that extends down to the sand
+    // Fish blocks light, casting a shadow that extends down to the sand at an angle
     const shadowTop = f.y - f.size * 0.3;
     const shadowBottom = sandAt(f.x) - 5;
     const shadowHeight = shadowBottom - shadowTop;
@@ -1688,22 +1698,26 @@ function drawFishShadows(t) {
       const topWidth = f.size * 1.2;
       const bottomWidth = f.size * 2.5;
       
+      // Shadow descends at an angle based on sun position
+      const topX = f.x;
+      const bottomX = f.x + shadowHeight * Math.tan(shadowAngle);
+      
       // Create gradient for shadow (darker near fish, fading downward)
-      const g = ctx.createLinearGradient(f.x, shadowTop, f.x, shadowBottom);
-      g.addColorStop(0, 'rgba(0,0,0,0.22)');
-      g.addColorStop(0.3, 'rgba(0,0,0,0.12)');
-      g.addColorStop(1, 'rgba(0,0,0,0.03)');
+      const g = ctx.createLinearGradient(topX, shadowTop, bottomX, shadowBottom);
+      g.addColorStop(0, 'rgba(0,0,0,0.11)');
+      g.addColorStop(0.3, 'rgba(0,0,0,0.06)');
+      g.addColorStop(1, 'rgba(0,0,0,0.015)');
       
       ctx.fillStyle = g;
       ctx.beginPath();
       // Draw tapered shadow shape with soft edges using quadratic curves
-      const blur = f.size * 0.4;
-      ctx.moveTo(f.x - topWidth/2, shadowTop + blur);
-      ctx.quadraticCurveTo(f.x - topWidth/2, shadowTop, f.x, shadowTop);
-      ctx.quadraticCurveTo(f.x + topWidth/2, shadowTop, f.x + topWidth/2, shadowTop + blur);
-      ctx.lineTo(f.x + bottomWidth/2, shadowBottom - blur);
-      ctx.quadraticCurveTo(f.x + bottomWidth/2, shadowBottom, f.x, shadowBottom);
-      ctx.quadraticCurveTo(f.x - bottomWidth/2, shadowBottom, f.x - bottomWidth/2, shadowBottom - blur);
+      const blur = f.size * 0.8;
+      ctx.moveTo(topX - topWidth/2, shadowTop + blur);
+      ctx.quadraticCurveTo(topX - topWidth/2, shadowTop, topX, shadowTop);
+      ctx.quadraticCurveTo(topX + topWidth/2, shadowTop, topX + topWidth/2, shadowTop + blur);
+      ctx.lineTo(bottomX + bottomWidth/2, shadowBottom - blur);
+      ctx.quadraticCurveTo(bottomX + bottomWidth/2, shadowBottom, bottomX, shadowBottom);
+      ctx.quadraticCurveTo(bottomX - bottomWidth/2, shadowBottom, bottomX - bottomWidth/2, shadowBottom - blur);
       ctx.closePath();
       ctx.fill();
     }