Aurora Borealis

// Aurora borealis. Multiple vertical "curtains" — bands of low-alpha vertical
// lines whose heights vary smoothly along x via a value-noise field. Each
// curtain drifts horizontally at its own speed; its color blends greens and
// magentas modulated by a second noise channel. A slow starfield drifts
// behind everything.

const NUM_CURTAINS = 5;
const STARS = 220;
const NOISE_SIZE = 256;          // 1-D hashed gradient table for value noise
const COL_STEP = 2;              // px between vertical lines in a curtain
const TAU = 6.283185307179586;

let W, H;
let perm;                        // Uint8Array(NOISE_SIZE*2): permutation table
let curtains;                    // Array of curtain descriptors
let stars;                       // Float32Array: [x, y, depth] per star
let starColor;                   // Uint8Array color for each star (0..255)

// --- noise --- value-noise in 1-D with cosine interpolation; layered into fBM.
function fade(t) { return t * t * (3 - 2 * t); }
function valnoise(x, seed) {
  const i0 = Math.floor(x) | 0;
  const t = x - i0;
  const a = perm[((i0 + seed) & 0xff)];
  const b = perm[((i0 + 1 + seed) & 0xff)];
  const u = fade(t);
  // map perm bytes (0..255) to (-1..1)
  const av = a / 127.5 - 1;
  const bv = b / 127.5 - 1;
  return av * (1 - u) + bv * u;
}
function fbm(x, seed) {
  let amp = 1, freq = 1, sum = 0, norm = 0;
  for (let o = 0; o < 4; o++) {
    sum += amp * valnoise(x * freq, seed + o * 17);
    norm += amp;
    amp *= 0.5;
    freq *= 2.0;
  }
  return sum / norm;
}

function init({ width, height, ctx }) {
  W = width; H = height;

  // hashed permutation (no Math.random dependence on init order beyond this)
  perm = new Uint8Array(NOISE_SIZE * 2);
  const tmp = new Uint8Array(NOISE_SIZE);
  for (let i = 0; i < NOISE_SIZE; i++) tmp[i] = i;
  for (let i = NOISE_SIZE - 1; i > 0; i--) {
    const j = (Math.random() * (i + 1)) | 0;
    const t = tmp[i]; tmp[i] = tmp[j]; tmp[j] = t;
  }
  for (let i = 0; i < NOISE_SIZE * 2; i++) perm[i] = tmp[i & (NOISE_SIZE - 1)];

  curtains = [];
  for (let c = 0; c < NUM_CURTAINS; c++) {
    curtains.push({
      seed: (c * 37 + 11) & 0xff,
      hueSeed: (c * 53 + 29) & 0xff,
      // horizontal drift speed (px/s); some left, some right
      drift: (Math.random() * 18 + 6) * (c % 2 === 0 ? 1 : -1),
      // base y for the bottom of the curtain (drape from upper sky)
      baseY: H * (0.55 + 0.08 * Math.sin(c * 1.3)),
      // peak height in px
      height: H * (0.45 + 0.18 * Math.random()),
      // spatial frequency along x in screen units
      freq: 0.0035 + 0.0018 * c,
      // x-offset accumulator
      off: Math.random() * 4000,
      // overall opacity multiplier
      alpha: 0.10 + 0.06 * (NUM_CURTAINS - c) / NUM_CURTAINS,
      // hue bias (-1 green, +1 magenta) wanders during the run
      hueBias: 0,
    });
  }

  // starfield: depth in (0.3..1.0); slower drift for far stars
  stars = new Float32Array(STARS * 3);
  starColor = new Uint8Array(STARS);
  for (let i = 0; i < STARS; i++) {
    stars[i * 3 + 0] = Math.random() * W;
    stars[i * 3 + 1] = Math.random() * H * 0.7;
    stars[i * 3 + 2] = 0.3 + Math.random() * 0.7;
    starColor[i] = 200 + ((Math.random() * 55) | 0);
  }

  // initial sky
  ctx.fillStyle = '#03060d';
  ctx.fillRect(0, 0, W, H);
}

function tick({ ctx, dt, time, width, height }) {
  if (width !== W || height !== H) {
    W = width; H = height;
    for (let c = 0; c < curtains.length; c++) {
      curtains[c].baseY = H * (0.55 + 0.08 * Math.sin(c * 1.3));
      curtains[c].height = H * (0.45 + 0.18 * ((c * 0.317) % 1));
    }
  }
  if (dt > 0.05) dt = 0.05;

  // night-sky gradient — repaint each frame for clean curtain compositing
  const grad = ctx.createLinearGradient(0, 0, 0, H);
  grad.addColorStop(0, '#02030a');
  grad.addColorStop(0.7, '#04081a');
  grad.addColorStop(1, '#070d22');
  ctx.fillStyle = grad;
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillRect(0, 0, W, H);

  // --- starfield drift ---
  for (let i = 0; i < STARS; i++) {
    const o = i * 3;
    const d = stars[o + 2];
    stars[o] += dt * 3 * d;        // far stars drift slower; right-to-left feel
    if (stars[o] > W + 2) stars[o] -= W + 4;
    const tw = 0.6 + 0.4 * Math.sin(time * (1.2 + d) + i * 0.7);
    const a = 0.35 * d * tw;
    const c = starColor[i];
    ctx.fillStyle = `rgba(${c},${c},${(c + 10) | 0},${a.toFixed(3)})`;
    const r = d > 0.85 ? 1.4 : 1;
    ctx.fillRect(stars[o], stars[o + 1], r, r);
  }

  // --- curtains (back-to-front) ---
  ctx.globalCompositeOperation = 'lighter';
  for (let c = curtains.length - 1; c >= 0; c--) {
    const cu = curtains[c];
    cu.off += cu.drift * dt;
    // slow wander of hue bias along the run
    cu.hueBias = Math.sin(time * 0.07 + c * 1.1) * 0.85;

    const baseY = cu.baseY;
    const peak = cu.height;
    const seed = cu.seed;
    const hseed = cu.hueSeed;
    const freq = cu.freq;
    const off = cu.off;
    const alpha = cu.alpha;
    const hueBias = cu.hueBias;

    for (let x = 0; x < W; x += COL_STEP) {
      const nx = (x + off) * freq;
      // amplitude: fbm in (-1..1) -> shape to a draped curtain
      const n = fbm(nx, seed);
      // raise floor so the curtain rarely fully vanishes, then accentuate peaks
      const shaped = Math.pow(Math.max(0, 0.55 + 0.45 * n), 1.7);
      const h = peak * shaped;
      if (h < 2) continue;

      // hue channel: separate noise, mapped to green<->magenta
      const h2 = fbm(nx * 0.6 + 13.7, hseed);
      const mix = 0.5 + 0.5 * (h2 + hueBias * 0.5);  // 0..1, magenta-ish at 1
      // green (110..150) -> magenta (290..320)
      const hue = mix < 0.5
        ? 110 + mix * 80                 // 110..150
        : 280 + (mix - 0.5) * 80;        // 280..320
      const sat = 80 + 15 * (1 - Math.abs(mix - 0.5) * 2);
      // vertical gradient inside the curtain: bright bottom -> fade up
      const top = baseY - h;
      // single vertical line painted as a tiny gradient via two stops
      const lg = ctx.createLinearGradient(0, top, 0, baseY);
      lg.addColorStop(0, `hsla(${hue.toFixed(0)}, ${sat.toFixed(0)}%, 55%, 0)`);
      lg.addColorStop(0.55, `hsla(${hue.toFixed(0)}, ${sat.toFixed(0)}%, 60%, ${(alpha * 0.55).toFixed(3)})`);
      lg.addColorStop(1, `hsla(${hue.toFixed(0)}, ${sat.toFixed(0)}%, 45%, ${(alpha * 0.95).toFixed(3)})`);
      ctx.fillStyle = lg;
      ctx.fillRect(x, top, COL_STEP, h);
    }
  }

  ctx.globalCompositeOperation = 'source-over';
}