Snell's Window

// Snell's window. The view from underwater looking up at a flat
// water surface: the entire 180-deg hemisphere above the water is
// compressed by refraction into a ~97-deg cone overhead. Half-angle
// theta_c = arcsin(1/1.33) ~= 48.6 deg (the critical angle). Beyond
// the cone the surface acts as a mirror by total internal reflection
// and you see the seabed below. We render a hemispherical fisheye:
// pixel radius r/R inside the disk -> underwater angle theta_2 in
// (0..theta_c), then Snell's law unbends it to the sky angle
// theta_1 = arcsin(n*sin(theta_2)). Outside the disk we mirror the
// seabed (sandy caustics + a swimming fish). Ripples warp the rim.
//
// Rendered at a fixed low resolution into an OffscreenCanvas and
// upscaled with smoothing on so the trig-per-pixel cost stays cheap
// on phones while keeping a soft watery look.

const N_WATER = 1.333;
const THETA_C = Math.asin(1 / N_WATER); // ~0.8481 rad (48.6 deg)
const BW = 200, BH = 200; // render-buffer resolution

let W = 0, H = 0;
let off, octx, img, buf;
const NSZ = 64;
let nperm;

function init({ width, height }) {
  W = width; H = height;
  off = new OffscreenCanvas(BW, BH);
  octx = off.getContext("2d");
  img = octx.createImageData(BW, BH);
  buf = new Uint32Array(img.data.buffer);
  nperm = new Uint8Array(NSZ * NSZ);
  for (let i = 0; i < nperm.length; i++) nperm[i] = (Math.random() * 256) | 0;
}

function nval(u, v) {
  const x = ((u % NSZ) + NSZ) % NSZ;
  const y = ((v % NSZ) + NSZ) % NSZ;
  const xi = x | 0, yi = y | 0;
  const xf = x - xi, yf = y - yi;
  const a = nperm[yi * NSZ + xi];
  const b = nperm[yi * NSZ + ((xi + 1) % NSZ)];
  const c = nperm[((yi + 1) % NSZ) * NSZ + xi];
  const d = nperm[((yi + 1) % NSZ) * NSZ + ((xi + 1) % NSZ)];
  const sx = xf * xf * (3 - 2 * xf), sy = yf * yf * (3 - 2 * yf);
  return ((a * (1 - sx) + b * sx) * (1 - sy) +
          (c * (1 - sx) + d * sx) * sy) * (1 / 255);
}

function packRGB(r, g, b) {
  return (255 << 24) | ((b & 255) << 16) | ((g & 255) << 8) | (r & 255);
}

// Sky color for an above-water direction. `a` = angle from zenith
// (0 = straight up, pi/2 = horizon). `az` = azimuth on the surface.
function skyColor(a, az, t) {
  // Horizon glow ramps in as a -> pi/2.
  const horizon = Math.max(0, Math.min(1, (a - 1.15) * 2.4));
  // Sun direction: 0.5 rad from zenith, azimuth 0.6 rad.
  const cs = Math.cos(a) * Math.cos(0.5) +
             Math.sin(a) * Math.sin(0.5) * Math.cos(az - 0.6);
  const dSun = Math.acos(cs < -1 ? -1 : cs > 1 ? 1 : cs);
  const shim = 0.6 + 0.4 * Math.sin(t * 4 + az * 3);
  const sun = (Math.exp(-dSun * 16) + 0.4 * Math.exp(-dSun * 5)) * shim;
  let r = 100 + 60 * horizon + 220 * sun;
  let g = 160 + 50 * horizon + 200 * sun;
  let b = 235 - 70 * horizon + 140 * sun;
  if (r > 255) r = 255; if (g > 255) g = 255; if (b > 255) b = 255;
  return packRGB(r | 0, g | 0, b | 0);
}

// Seabed color for the mirrored direction (outside the disk).
// f = radial fraction beyond the disk (0 at rim, grows outward),
// az = azimuth. We map (f, az) to world-plane (u, v) on the seabed.
function seabedColor(f, az, t) {
  const u = Math.cos(az) * f * 3.0;
  const v = Math.sin(az) * f * 3.0;
  // Sandy ripples + slow caustic interference.
  const sand = 0.55 + 0.25 * Math.sin(u * 5 + v * 3 + t * 0.4) *
                      Math.cos(v * 4 - t * 0.3);
  // Fish on a Lissajous path.
  const fx = 1.4 * Math.cos(t * 0.35);
  const fy = 0.9 * Math.sin(t * 0.55);
  // Velocity gives body orientation.
  const vx = -1.4 * 0.35 * Math.sin(t * 0.35);
  const vy =  0.9 * 0.55 * Math.cos(t * 0.55);
  const ang = Math.atan2(vy, vx);
  const ca = Math.cos(-ang), sa = Math.sin(-ang);
  const dx = u - fx, dy = v - fy;
  const lx = dx * ca - dy * sa;
  const ly = dx * sa + dy * ca;
  const body = (lx * lx) / 0.16 + (ly * ly) / 0.035;
  const tailWag = 0.05 * Math.sin(t * 9);
  const onTail = lx > 0.30 && lx < 0.50 &&
                 Math.abs(ly - tailWag) < 0.10 - (lx - 0.30) * 0.4;
  const dim = 0.55; // TIR-reflected view of the seabed is dimmer
  if (body < 1 || onTail) {
    return packRGB(18 * dim | 0, 28 * dim | 0, 46 * dim | 0);
  }
  const s = sand;
  const r = 150 * s * dim;
  const g = 130 * s * dim;
  const b = 90  * s * dim;
  return packRGB(r | 0, g | 0, b | 0);
}

function tick({ ctx, time, width, height }) {
  if (width !== W || height !== H) { W = width; H = height; }
  const t = time;
  const cx = BW * 0.5, cy = BH * 0.5;
  const R = Math.min(BW, BH) * 0.42;
  const invR = 1 / R;

  // Ripple advection in canvas-space.
  const ru = t * 6, rv = t * 3;
  const ru2 = -t * 4, rv2 = t * 2;

  for (let y = 0; y < BH; y++) {
    const dy = y - cy;
    const row = y * BW;
    for (let x = 0; x < BW; x++) {
      const dx = x - cx;
      const rr = Math.sqrt(dx * dx + dy * dy);
      const az = Math.atan2(dy, dx);

      // Two-octave ripple distortion of the radial coord.
      const n1 = nval(x * 0.13 + ru, y * 0.13 + rv);
      const n2 = nval(x * 0.31 + ru2, y * 0.31 + rv2);
      const r = rr + (n1 - 0.5) * 3.2 + (n2 - 0.5) * 1.6;

      let col;
      if (r < R) {
        // Inside disk: radial fraction -> theta_2 -> theta_1 via Snell.
        const f = r * invR;
        const t2 = f * THETA_C;
        const s1 = N_WATER * Math.sin(t2);
        const t1 = s1 >= 1 ? Math.PI / 2 : Math.asin(s1);
        col = skyColor(t1, az, t);
      } else {
        // Outside disk: TIR mirror of seabed.
        const f = (r - R) * invR;
        col = seabedColor(f, az, t);
      }
      buf[row + x] = col;
    }
  }

  octx.putImageData(img, 0, 0);
  ctx.imageSmoothingEnabled = true;
  // Letterbox so the disk stays circular at non-square aspects.
  const side = Math.min(W, H);
  const ox = (W - side) * 0.5, oy = (H - side) * 0.5;
  // Dark border fill for the letterbox bars (deep water).
  ctx.fillStyle = "#04060c";
  if (ox > 0) { ctx.fillRect(0, 0, ox, H); ctx.fillRect(W - ox, 0, ox, H); }
  if (oy > 0) { ctx.fillRect(0, 0, W, oy); ctx.fillRect(0, H - oy, W, oy); }
  ctx.drawImage(off, ox, oy, side, side);

  // Rim highlight glaze.
  const cxs = ox + side * 0.5, cys = oy + side * 0.5;
  const Rs = side * 0.42;
  const grad = ctx.createRadialGradient(cxs, cys, Rs * 0.95, cxs, cys, Rs * 1.08);
  grad.addColorStop(0, "rgba(255,255,255,0.0)");
  grad.addColorStop(0.5, "rgba(255,255,255,0.18)");
  grad.addColorStop(1, "rgba(255,255,255,0.0)");
  ctx.fillStyle = grad;
  ctx.fillRect(ox, oy, side, side);

  // HUD.
  ctx.fillStyle = "rgba(0,0,0,0.6)";
  ctx.fillRect(10, 10, 244, 66);
  ctx.fillStyle = "#fff";
  ctx.font = "13px monospace";
  ctx.textAlign = "left"; ctx.textBaseline = "alphabetic";
  ctx.fillText("Snell's window (underwater POV)", 18, 28);
  ctx.fillText(`n_water = ${N_WATER.toFixed(3)}`, 18, 46);
  ctx.fillText(`theta_c = ${(THETA_C * 180 / Math.PI).toFixed(1)} deg  cone ${(2 * THETA_C * 180 / Math.PI).toFixed(0)} deg`, 18, 64);
}