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;

function derivs(x, y, z) {
  return [
    SIGMA * (y - x),
    x * (RHO - z) - y,
    x * y - BETA * z,
  ];
}

function rk4Step(s, h) {
  const [x, y, z] = s;
  const k1 = derivs(x, y, z);
  const k2 = derivs(x + 0.5 * h * k1[0], y + 0.5 * h * k1[1], z + 0.5 * h * k1[2]);
  const k3 = derivs(x + 0.5 * h * k2[0], y + 0.5 * h * k2[1], z + 0.5 * h * k2[2]);
  const k4 = derivs(x + h * k3[0], y + h * k3[1], z + h * k3[2]);
  return [
    x + (h / 6) * (k1[0] + 2 * k2[0] + 2 * k3[0] + k4[0]),
    y + (h / 6) * (k1[1] + 2 * k2[1] + 2 * k3[1] + k4[1]),
    z + (h / 6) * (k1[2] + 2 * k2[2] + 2 * k3[2] + k4[2]),
  ];
}

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 = [0.1, 0.0, 0.0];
  trail = new Float32Array(TRAIL_MAX * 2);
  head = 0;
  count = 0;
  hueOffset = 0;

  for (let i = 0; i < 1500; i++) {
    state = 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++) {
    state = 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';
}