Lorenz Attractor Glow

const SIGMA = 10;
const RHO = 28;
const BETA = 8 / 3;

const TRAIL_MAX = 4000;
const SUBSTEPS = 6;
const DT_SIM = 0.005;

let state;
let trail;
let head;
let count;
let hueOffset;
let W;
let H;
let cx;
let cy;
let scale;

// In-place scalar RK4 to avoid per-frame array allocations
// (called ~6× per frame × 60fps; the array-returning version churned the GC).
function rk4Step(s, h) {
  const x = s[0], y = s[1], z = s[2];
  const k1x = SIGMA * (y - x);
  const k1y = x * (RHO - z) - y;
  const k1z = x * y - BETA * z;

  const ax = x + 0.5 * h * k1x;
  const ay = y + 0.5 * h * k1y;
  const az = z + 0.5 * h * k1z;
  const k2x = SIGMA * (ay - ax);
  const k2y = ax * (RHO - az) - ay;
  const k2z = ax * ay - BETA * az;

  const bx = x + 0.5 * h * k2x;
  const by = y + 0.5 * h * k2y;
  const bz = z + 0.5 * h * k2z;
  const k3x = SIGMA * (by - bx);
  const k3y = bx * (RHO - bz) - by;
  const k3z = bx * by - BETA * bz;

  const cx2 = x + h * k3x;
  const cy2 = y + h * k3y;
  const cz2 = z + h * k3z;
  const k4x = SIGMA * (cy2 - cx2);
  const k4y = cx2 * (RHO - cz2) - cy2;
  const k4z = cx2 * cy2 - BETA * cz2;

  s[0] = x + (h / 6) * (k1x + 2 * k2x + 2 * k3x + k4x);
  s[1] = y + (h / 6) * (k1y + 2 * k2y + 2 * k3y + k4y);
  s[2] = z + (h / 6) * (k1z + 2 * k2z + 2 * k3z + k4z);
  return s;
}

function pushPoint(x, z) {
  trail[head * 2] = x;
  trail[head * 2 + 1] = z;
  head = (head + 1) % TRAIL_MAX;
  if (count < TRAIL_MAX) count++;
}

function init({ canvas, ctx, width, height }) {
  W = width;
  H = height;
  cx = W * 0.5;
  cy = H * 0.55;
  scale = Math.min(W, H) / 60;

  state = new Float64Array(3);
  state[0] = 0.1; state[1] = 0.0; state[2] = 0.0;
  trail = new Float32Array(TRAIL_MAX * 2);
  head = 0;
  count = 0;
  hueOffset = 0;

  for (let i = 0; i < 1500; i++) {
    rk4Step(state, DT_SIM);
  }

  ctx.fillStyle = '#05060a';
  ctx.fillRect(0, 0, W, H);
}

function tick({ ctx, dt, frame, width, height }) {
  if (width !== W || height !== H) {
    W = width;
    H = height;
    cx = W * 0.5;
    cy = H * 0.55;
    scale = Math.min(W, H) / 60;
  }

  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = 'rgba(5, 6, 10, 0.18)';
  ctx.fillRect(0, 0, W, H);

  const steps = Math.max(1, Math.min(12, Math.round(SUBSTEPS * (dt / (1 / 60)))));
  for (let i = 0; i < steps; i++) {
    rk4Step(state, DT_SIM);
    pushPoint(state[0], state[2]);
  }

  hueOffset = (hueOffset + dt * 12) % 360;

  ctx.globalCompositeOperation = 'lighter';
  ctx.lineWidth = 1.25;
  ctx.lineCap = 'round';

  const n = count;
  if (n > 1) {
    const startIdx = (head - n + TRAIL_MAX) % TRAIL_MAX;
    let prevX = trail[startIdx * 2];
    let prevZ = trail[startIdx * 2 + 1];
    let prevPX = cx + prevX * scale;
    let prevPY = cy - (prevZ - 25) * scale;

    for (let i = 1; i < n; i++) {
      const idx = (startIdx + i) % TRAIL_MAX;
      const x = trail[idx * 2];
      const z = trail[idx * 2 + 1];
      const px = cx + x * scale;
      const py = cy - (z - 25) * scale;

      const t = i / n;
      const hue = (hueOffset + t * 280) % 360;
      const alpha = 0.05 + t * 0.55;
      ctx.strokeStyle = `hsla(${hue.toFixed(1)}, 95%, 60%, ${alpha.toFixed(3)})`;

      ctx.beginPath();
      ctx.moveTo(prevPX, prevPY);
      ctx.lineTo(px, py);
      ctx.stroke();

      prevPX = px;
      prevPY = py;
    }

    ctx.fillStyle = `hsla(${hueOffset.toFixed(1)}, 100%, 80%, 0.95)`;
    ctx.beginPath();
    ctx.arc(prevPX, prevPY, 2.2, 0, Math.PI * 2);
    ctx.fill();
  }

  ctx.globalCompositeOperation = 'source-over';
}