Adding some AI slop but it's okay because it looks really cool imo

1 files changed, 423 insertions, 0 deletions

diff --git a/html/assets/snow.js b/html/assets/snow.js
new file mode 100644
index 0000000..ba9a46a
--- /dev/null
+++ b/html/assets/snow.js
@@ -0,0 +1,423 @@
+(function () {
+  var canvas = document.getElementById("snow");
+  var ctx = canvas.getContext("2d", { alpha: true });
+
+  // Cap the backing store on hi-dpi screens. Full 3x on a laptop panel
+  // triples the per-frame clear cost for detail nobody sees at 8px.
+  var DPR = Math.min(window.devicePixelRatio || 1, 2);
+
+  var W = 0, H = 0;   // CSS pixels — all physics happens in this space
+  var rand = function (min, max) { return Math.random() * (max - min) + min; };
+
+  /* =============================================================
+     KOCH SNOWFLAKE SPRITES
+
+     Each flake is a Koch snowflake, rasterised once into a small
+     offscreen canvas and then blitted every frame — so the fractal
+     costs nothing at runtime no matter how deep we take it.
+
+     The Koch snowflake has 3-fold rotational symmetry (unlike a real
+     6-armed crystal), so a sprite set has to cover 120° of rotation
+     rather than 60° to spin seamlessly.
+  ============================================================= */
+  var SIZES = [3, 6, 9, 13, 18];   // CSS px, across the circumcircle
+  var ROTATIONS = 12;
+  var ROT_SPAN = (Math.PI * 2) / 3;
+
+  var SHAPES = [
+    { fill: 0.18, line: 0.085, inner: false },
+    { fill: 0.32, line: 0.070, inner: true },
+    { fill: 0.08, line: 0.105, inner: false }
+  ];
+
+  // Unit-circumradius outlines, generated once per depth and reused
+  // for every size and rotation that needs them.
+  var kochCache = {};
+
+  function subdivide(ax, ay, bx, by, depth, out) {
+    if (depth === 0) {
+      out.push(ax, ay);
+      return;
+    }
+    var dx = (bx - ax) / 3, dy = (by - ay) / 3;
+    var p1x = ax + dx,     p1y = ay + dy;
+    var p3x = ax + dx * 2, p3y = ay + dy * 2;
+
+    // Apex of the bump: perpendicular to the middle third, pushed out
+    // to equilateral height. Pick the sign that points away from the
+    // centre so bumps grow outward whatever the winding order.
+    var mx = (p1x + p3x) / 2, my = (p1y + p3y) / 2;
+    var ex = p3x - p1x, ey = p3y - p1y;
+    var elen = Math.sqrt(ex * ex + ey * ey);
+    var px = -ey / elen, py = ex / elen;
+    if (mx * px + my * py < 0) { px = -px; py = -py; }
+    var h = elen * Math.sqrt(3) / 2;
+    var p2x = mx + px * h, p2y = my + py * h;
+
+    subdivide(ax, ay, p1x, p1y, depth - 1, out);
+    subdivide(p1x, p1y, p2x, p2y, depth - 1, out);
+    subdivide(p2x, p2y, p3x, p3y, depth - 1, out);
+    subdivide(p3x, p3y, bx, by, depth - 1, out);
+  }
+
+  function kochOutline(depth) {
+    if (kochCache[depth]) return kochCache[depth];
+    var v = [];
+    for (var i = 0; i < 3; i++) {
+      var a = -Math.PI / 2 + i * (Math.PI * 2 / 3);
+      v.push(Math.cos(a), Math.sin(a));
+    }
+    var pts = [];
+    for (var s = 0; s < 3; s++) {
+      var n = (s + 1) % 3;
+      subdivide(v[s * 2], v[s * 2 + 1], v[n * 2], v[n * 2 + 1], depth, pts);
+    }
+    kochCache[depth] = pts;
+    return pts;
+  }
+
+  function tracePath(c, pts, R) {
+    c.beginPath();
+    c.moveTo(pts[0] * R, pts[1] * R);
+    for (var i = 2; i < pts.length; i += 2) {
+      c.lineTo(pts[i] * R, pts[i + 1] * R);
+    }
+    c.closePath();
+  }
+
+  // Iteration depth has to match the pixel budget: past roughly one
+  // segment per pixel the detail just turns to grey mush.
+  function depthForSize(sizeCss) {
+    if (sizeCss < 7) return 1;
+    if (sizeCss < 12) return 2;
+    return 3;
+  }
+
+  function drawKoch(c, R, p, sizeCss) {
+    var pts = kochOutline(depthForSize(sizeCss));
+
+    tracePath(c, pts, R);
+    c.fillStyle = "rgba(255,255,255," + p.fill + ")";
+    c.fill();
+
+    c.strokeStyle = "#ffffff";
+    c.lineWidth = Math.max(0.75, R * p.line);
+    c.lineJoin = "round";
+    c.stroke();
+
+    if (p.inner) {
+      // a second, counter-rotated flake inside — reads as facets
+      c.save();
+      c.rotate(Math.PI / 3);
+      tracePath(c, kochOutline(1), R * 0.42);
+      c.lineWidth = Math.max(0.6, R * 0.05);
+      c.stroke();
+      c.restore();
+    }
+  }
+
+  function makeSprite(sizeCss, shape, rotation) {
+    var pad = 2;
+    var dim = Math.ceil((sizeCss + pad * 2) * DPR);
+    var s = document.createElement("canvas");
+    s.width = dim;
+    s.height = dim;
+    var c = s.getContext("2d");
+
+    c.translate(dim / 2, dim / 2);
+    c.rotate(rotation);
+    var R = (sizeCss / 2) * DPR;
+
+    if (sizeCss < 4.5) {
+      // Below ~4px even one Koch iteration is mush. A soft disc reads
+      // better, and these are the distant flakes anyway.
+      var g = c.createRadialGradient(0, 0, 0, 0, 0, R);
+      g.addColorStop(0, "rgba(255,255,255,1)");
+      g.addColorStop(0.55, "rgba(255,255,255,0.9)");
+      g.addColorStop(1, "rgba(255,255,255,0)");
+      c.fillStyle = g;
+      c.beginPath();
+      c.arc(0, 0, R, 0, Math.PI * 2);
+      c.fill();
+    } else {
+      drawKoch(c, R, shape, sizeCss);
+    }
+    return s;
+  }
+
+  // sprites[shape][sizeTier] -> array of ROTATIONS canvases
+  var sprites = [];
+  for (var si = 0; si < SHAPES.length; si++) {
+    var byTier = [];
+    for (var ti = 0; ti < SIZES.length; ti++) {
+      var frames = [];
+      for (var ri = 0; ri < ROTATIONS; ri++) {
+        frames.push(makeSprite(SIZES[ti], SHAPES[si], (ri / ROTATIONS) * ROT_SPAN));
+      }
+      byTier.push(frames);
+    }
+    sprites.push(byTier);
+  }
+
+  /* =============================================================
+     VELOCITY FIELD
+
+     A coarse grid over the viewport. The cursor deposits momentum
+     into the cells it passes through; each frame that momentum
+     spreads to neighbours and decays, so a gust stays local to
+     where the cursor actually was.
+  ============================================================= */
+  var CELL = 44;
+  var cols = 0, rows = 0, gu, gv, tu, tv;
+
+  function buildGrid() {
+    cols = Math.ceil(W / CELL) + 2;
+    rows = Math.ceil(H / CELL) + 2;
+    var n = cols * rows;
+    gu = new Float32Array(n);
+    gv = new Float32Array(n);
+    tu = new Float32Array(n);
+    tv = new Float32Array(n);
+  }
+
+  var DEPOSIT_RADIUS = 3;      // cells
+  var DEPOSIT_STRENGTH = 34;   // px/s of field velocity per px of cursor travel
+  var CELL_MAX = 1400;         // clamp so a fast flick can't explode the field
+  var DIFFUSION = 0.08;        // neighbour blend per frame at 60fps
+  var DECAY_PER_SEC = 0.05;    // fraction of a gust still present a second later
+
+  function deposit(px, py, dx, dy) {
+    var cx = px / CELL, cy = py / CELL;
+    var i0 = Math.max(0, Math.floor(cx) - DEPOSIT_RADIUS);
+    var i1 = Math.min(cols - 1, Math.floor(cx) + DEPOSIT_RADIUS);
+    var j0 = Math.max(0, Math.floor(cy) - DEPOSIT_RADIUS);
+    var j1 = Math.min(rows - 1, Math.floor(cy) + DEPOSIT_RADIUS);
+
+    for (var j = j0; j <= j1; j++) {
+      for (var i = i0; i <= i1; i++) {
+        var ddx = i - cx, ddy = j - cy;
+        var falloff = Math.exp(-(ddx * ddx + ddy * ddy) / (DEPOSIT_RADIUS * 0.75));
+        if (falloff < 0.01) continue;
+        var k = j * cols + i;
+        var u = gu[k] + dx * falloff * DEPOSIT_STRENGTH;
+        var v = gv[k] + dy * falloff * DEPOSIT_STRENGTH;
+        gu[k] = u > CELL_MAX ? CELL_MAX : (u < -CELL_MAX ? -CELL_MAX : u);
+        gv[k] = v > CELL_MAX ? CELL_MAX : (v < -CELL_MAX ? -CELL_MAX : v);
+      }
+    }
+  }
+
+  function relaxField(dt) {
+    var decay = Math.pow(DECAY_PER_SEC, dt);
+    var diffusion = Math.min(0.5, DIFFUSION * dt * 60);
+    for (var j = 0; j < rows; j++) {
+      for (var i = 0; i < cols; i++) {
+        var k = j * cols + i;
+        var su = 0, sv = 0, n = 0;
+        if (i > 0)        { su += gu[k - 1];    sv += gv[k - 1];    n++; }
+        if (i < cols - 1) { su += gu[k + 1];    sv += gv[k + 1];    n++; }
+        if (j > 0)        { su += gu[k - cols]; sv += gv[k - cols]; n++; }
+        if (j < rows - 1) { su += gu[k + cols]; sv += gv[k + cols]; n++; }
+        tu[k] = (gu[k] + (su / n - gu[k]) * diffusion) * decay;
+        tv[k] = (gv[k] + (sv / n - gv[k]) * diffusion) * decay;
+      }
+    }
+    var a = gu; gu = tu; tu = a;
+    var b = gv; gv = tv; tv = b;
+  }
+
+  var sampleU = 0, sampleV = 0;
+  function sampleField(px, py) {
+    var cx = px / CELL, cy = py / CELL;
+    var i = Math.floor(cx), j = Math.floor(cy);
+    if (i < 0) i = 0; else if (i > cols - 2) i = cols - 2;
+    if (j < 0) j = 0; else if (j > rows - 2) j = rows - 2;
+    var fx = cx - i, fy = cy - j;
+    if (fx < 0) fx = 0; else if (fx > 1) fx = 1;
+    if (fy < 0) fy = 0; else if (fy > 1) fy = 1;
+
+    var k = j * cols + i;
+    var w00 = (1 - fx) * (1 - fy), w10 = fx * (1 - fy);
+    var w01 = (1 - fx) * fy,       w11 = fx * fy;
+
+    sampleU = gu[k] * w00 + gu[k + 1] * w10 + gu[k + cols] * w01 + gu[k + cols + 1] * w11;
+    sampleV = gv[k] * w00 + gv[k + 1] * w10 + gv[k + cols] * w01 + gv[k + cols + 1] * w11;
+  }
+
+  /* =============================================================
+     AMBIENT AIR
+
+     Turbulence comes from the curl of a stream function built out of
+     two octaves of sine. Taking the curl makes the field
+     divergence-free — air can swirl but never pile up or vanish —
+     which is most of the difference between "windy" and "jelly".
+     The coarse octave drifts slowly, the fine one churns fast.
+  ============================================================= */
+  var O1 = { kx: 0.0042, ky: 0.0058, amp: 12500, sx: 0.25, sy: -0.19 };
+  var O2 = { kx: 0.0125, ky: 0.0155, amp: 2400,  sx: -0.62, sy: 0.78 };
+  var U1 = O1.amp * O1.ky, V1 = O1.amp * O1.kx;
+  var U2 = O2.amp * O2.ky, V2 = O2.amp * O2.kx;
+
+  // per-frame time offsets, hoisted out of the flake loop
+  var p1a = 0, p1b = 0, p2a = 0, p2b = 0;
+  var gustX = 0, gustY = 0;
+
+  function updateAir(t) {
+    p1a = t * O1.sx; p1b = t * O1.sy;
+    p2a = t * O2.sx; p2b = t * O2.sy;
+
+    // Gusts: three detuned sines summed, then squared with the sign
+    // kept. Squaring is what makes it gust rather than sway — long
+    // lulls near zero, then a sharp shove.
+    var env = Math.sin(t * 0.17) + 0.55 * Math.sin(t * 0.29 + 2.1)
+            + 0.30 * Math.sin(t * 0.53 + 4.4);
+    var gust = env > 0 ? env * env : -env * env;
+    gustX = gust * 46 + Math.sin(t * 0.041) * 18;
+    gustY = gust * Math.sin(t * 0.37 + 1.3) * 8;
+  }
+
+  var airU = 0, airV = 0;
+  function sampleAir(x, y) {
+    var a1 = x * O1.kx + p1a, b1 = y * O1.ky + p1b;
+    var a2 = x * O2.kx + p2a, b2 = y * O2.ky + p2b;
+    airU = U1 * Math.sin(a1) * Math.cos(b1) + U2 * Math.sin(a2) * Math.cos(b2) + gustX;
+    airV = -V1 * Math.cos(a1) * Math.sin(b1) - V2 * Math.cos(a2) * Math.sin(b2) + gustY;
+  }
+
+  /* ============================ flakes ============================ */
+  var flakes = [];
+
+  function buildFlakes() {
+    // scale the count to the viewport so a small window isn't overdrawn
+    var count = Math.round(Math.min(170, Math.max(55, (W * H) / 11000)));
+    flakes.length = 0;
+    for (var i = 0; i < count; i++) {
+      var depth = Math.random();
+      var tier = Math.min(SIZES.length - 1, Math.floor(depth * SIZES.length));
+      flakes.push({
+        frames: sprites[(Math.random() * SHAPES.length) | 0][tier],
+        half: 0,
+        x: rand(0, W),
+        // seed across the whole viewport, already at terminal speed, so
+        // the first frame looks like snow that has been falling a while
+        // rather than a batch dumped in from above
+        y: rand(-40, H),
+        vx: 0,
+        vy: 12 + depth * 30,
+        fall: 12 + depth * 30,        // base fall speed, px/s
+        // fast, shallow flutter — the individual tumble of one crystal,
+        // distinct from the air it is riding in
+        sway: rand(0, Math.PI * 2),
+        swaySpeed: rand(2.2, 4.4),
+        swayAmp: 3 + (1 - depth) * 7,
+        spin: rand(-0.3, 0.3),        // sprite cycles/sec (1 cycle = 120°)
+        angle: Math.random(),
+        alpha: 0.3 + depth * 0.55,
+        // Light flakes catch more of the wind AND change speed faster;
+        // heavy ones plough through. That split is what sells it as air
+        // rather than everything sloshing in unison.
+        response: 0.5 + (1 - depth) * 0.85,
+        drag: 3.0 + (1 - depth) * 6.5   // velocity response rate, per second
+      });
+      var f = flakes[i];
+      f.half = f.frames[0].width / 2;
+    }
+  }
+
+  function resize() {
+    W = window.innerWidth;
+    H = window.innerHeight;
+    canvas.width = Math.round(W * DPR);
+    canvas.height = Math.round(H * DPR);
+    buildGrid();
+    if (!flakes.length) buildFlakes();
+  }
+
+  /* ============================= input ============================ */
+  var lastX = null, lastY = null;
+
+  window.addEventListener("pointermove", function (e) {
+    var x = e.clientX, y = e.clientY;
+    if (lastX !== null) {
+      var dx = x - lastX, dy = y - lastY;
+      var dist = Math.sqrt(dx * dx + dy * dy);
+      // walk the segment so a fast flick paints one continuous gust
+      // instead of two disconnected puffs
+      var steps = Math.min(10, Math.max(1, Math.round(dist / (CELL * 0.5))));
+      for (var s = 1; s <= steps; s++) {
+        var t = s / steps;
+        deposit(lastX + dx * t, lastY + dy * t, dx / steps, dy / steps);
+      }
+    }
+    lastX = x;
+    lastY = y;
+  }, { passive: true });
+
+  window.addEventListener("pointerleave", function () { lastX = lastY = null; });
+  window.addEventListener("resize", resize);
+
+  /* ============================== loop ============================ */
+  var lastT = null, raf = 0;
+
+  function step(now) {
+    if (lastT === null) lastT = now;
+    var dt = Math.min((now - lastT) / 1000, 0.05);
+    lastT = now;
+
+    relaxField(dt);
+    updateAir(now / 1000);
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    for (var i = 0; i < flakes.length; i++) {
+      var f = flakes[i];
+      sampleField(f.x, f.y);   // cursor gusts
+      sampleAir(f.x, f.y);     // ambient turbulence
+
+      f.sway += f.swaySpeed * dt;
+      var targetVX = (airU + sampleU) * f.response + Math.sin(f.sway) * f.swayAmp;
+      var targetVY = (airV + sampleV) * f.response + f.fall;
+
+      // exponential approach: correct at any timestep, and the rate is
+      // per-flake so light and heavy crystals visibly disagree
+      var ease = 1 - Math.exp(-f.drag * dt);
+      f.vx += (targetVX - f.vx) * ease;
+      f.vy += (targetVY - f.vy) * ease;
+
+      f.x += f.vx * dt;
+      f.y += f.vy * dt;
+
+      // tumble harder the faster the air is dragging past
+      f.angle += (f.spin + f.vx * 0.006) * dt;
+
+      if (f.y > H + 20) { f.y = -20; f.x = rand(0, W); f.vy = f.fall; }
+      else if (f.y < -80) { f.y = H + 20; }
+      if (f.x < -30) f.x = W + 30;
+      else if (f.x > W + 30) f.x = -30;
+
+      var ri = ((f.angle * ROTATIONS) | 0) % ROTATIONS;
+      if (ri < 0) ri += ROTATIONS;
+
+      ctx.globalAlpha = f.alpha;
+      // integer destination + unscaled source = fastest blit path
+      ctx.drawImage(f.frames[ri], (f.x * DPR - f.half) | 0, (f.y * DPR - f.half) | 0);
+    }
+
+    ctx.globalAlpha = 1;
+    raf = requestAnimationFrame(step);
+  }
+
+  // don't burn battery in a background tab
+  document.addEventListener("visibilitychange", function () {
+    if (document.hidden) {
+      cancelAnimationFrame(raf);
+      raf = 0;
+    } else if (!raf) {
+      lastT = null;
+      raf = requestAnimationFrame(step);
+    }
+  });
+
+  resize();
+  raf = requestAnimationFrame(step);
+})();