Lyapunov Fractal

// Lyapunov fractal for the logistic map with periodic forcing of (a,b).
// Each pixel maps to a parameter pair (a,b) in [A0,A1]x[B0,B1].
// We iterate x_{n+1} = r_n * x_n * (1 - x_n) where r_n cycles through
// the active sequence (e.g. "AB" -> a,b,a,b,...). The Lyapunov exponent
//   lambda = lim (1/N) sum_n log|r_n (1 - 2 x_n)|
// is colored: lambda < 0 stable (blue/green by depth), lambda > 0 chaotic
// (red/orange by intensity), lambda ~ 0 boundary (bright).
//
// The active sequence rotates every 8 seconds across SEQS, redrawing
// the fractal each time so the user can compare regimes.

const A0 = 2.5, A1 = 4.0, B0 = 2.5, B1 = 4.0;
const WARMUP = 80;
const SAMPLES = 200;
const SEQS = ["AB", "ABBA", "AABA", "ABAB", "AABAB", "ABBAB"];
const SWITCH_SEC = 8;

let W = 0, H = 0;
let img = null;
let row = 0;
let pass = 0;
let seqIdx = 0;
let switchAt = 0;
let bgCanvas = null, bgCtx = null;

function init({ ctx, width, height, time }) {
  W = width; H = height;
  img = ctx.createImageData(W, H);
  bgCanvas = new OffscreenCanvas(W, H);
  bgCtx = bgCanvas.getContext("2d");
  bgCtx.fillStyle = "#000";
  bgCtx.fillRect(0, 0, W, H);
  row = 0; pass = 0;
  seqIdx = 0;
  switchAt = (time || 0) + SWITCH_SEC;
}

function colorFor(lambda) {
  // lambda in roughly [-4, 1]
  if (!isFinite(lambda)) return [0, 0, 0];
  if (lambda < 0) {
    // Stable: deep blue -> teal -> bright green as lambda -> 0
    const t = Math.min(1, -lambda / 2.5); // 0 at boundary, 1 deep stable
    const u = 1 - t; // 0 deep stable, 1 at boundary
    // Mix from navy (10,20,60) -> teal (30,180,180) -> green (140,255,140)
    let r, g, b;
    if (u < 0.5) {
      const k = u * 2;
      r = 10 + k * 20;
      g = 20 + k * 160;
      b = 60 + k * 120;
    } else {
      const k = (u - 0.5) * 2;
      r = 30 + k * 110;
      g = 180 + k * 75;
      b = 180 - k * 40;
    }
    return [r | 0, g | 0, b | 0];
  } else {
    // Chaotic: red/orange. lambda 0 -> dark red, larger -> bright orange/yellow
    const t = Math.min(1, lambda / 0.9);
    const r = 90 + t * 165;
    const g = 10 + t * 140;
    const b = 10 + t * 30;
    return [r | 0, g | 0, b | 0];
  }
}

function parseSeq(s) {
  // Returns array of 0/1 (0=a, 1=b)
  const out = new Uint8Array(s.length);
  for (let i = 0; i < s.length; i++) out[i] = s.charCodeAt(i) === 66 ? 1 : 0; // 'B'=66
  return out;
}

let curSeq = parseSeq(SEQS[0]);

function lyapunov(a, b) {
  const L = curSeq.length;
  let x = 0.5;
  // warmup
  for (let n = 0; n < WARMUP; n++) {
    const r = curSeq[n % L] ? b : a;
    x = r * x * (1 - x);
  }
  let sum = 0;
  let count = 0;
  for (let n = 0; n < SAMPLES; n++) {
    const r = curSeq[n % L] ? b : a;
    x = r * x * (1 - x);
    const d = r * (1 - 2 * x);
    const ad = Math.abs(d);
    if (ad > 1e-12) { sum += Math.log(ad); count++; }
  }
  return count > 0 ? sum / count : -10;
}

function renderRow(y, bs) {
  const data = img.data;
  // Map y -> b (top = B1, bottom = B0)
  const bVal = B1 - (y / H) * (B1 - B0);
  for (let x = 0; x < W; x += bs) {
    const aVal = A0 + (x / W) * (A1 - A0);
    const lam = lyapunov(aVal, bVal);
    const [r, g, b] = colorFor(lam);
    for (let dy = 0; dy < bs; dy++) {
      const yy = y + dy; if (yy >= H) break;
      for (let dx = 0; dx < bs; dx++) {
        const xx = x + dx; if (xx >= W) break;
        const i = (yy * W + xx) * 4;
        data[i] = r; data[i + 1] = g; data[i + 2] = b; data[i + 3] = 255;
      }
    }
  }
}

function resetRender(seq) {
  curSeq = parseSeq(seq);
  row = 0; pass = 0;
}

function tick({ ctx, width, height, time }) {
  if (width !== W || height !== H) {
    W = width; H = height;
    img = ctx.createImageData(W, H);
    bgCanvas = new OffscreenCanvas(W, H);
    bgCtx = bgCanvas.getContext("2d");
    bgCtx.fillStyle = "#000";
    bgCtx.fillRect(0, 0, W, H);
    row = 0; pass = 0;
  }

  if (time >= switchAt) {
    seqIdx = (seqIdx + 1) % SEQS.length;
    resetRender(SEQS[seqIdx]);
    switchAt = time + SWITCH_SEC;
  }

  // Progressive refinement: 8 -> 4 -> 2 px blocks.
  // (1px pass dropped: ~20-40s of compute that's visually indistinguishable
  // from 2px at scroll-feed dwell. Hold the 2px result until the next
  // sequence rotation.)
  const blocks = [8, 4, 2];
  const budget = 14;
  const t0 = performance.now();
  while (pass < blocks.length && performance.now() - t0 < budget) {
    const bs = blocks[pass];
    if (row >= H) { pass++; row = 0; continue; }
    renderRow(row, bs);
    row += bs;
  }

  // Composite: if any rendering progress, push to bgCanvas, then blit
  bgCtx.putImageData(img, 0, 0);
  ctx.drawImage(bgCanvas, 0, 0);

  // HUD
  const seqStr = SEQS[seqIdx];
  const remain = Math.max(0, switchAt - time);
  ctx.fillStyle = "rgba(0,0,0,0.6)";
  ctx.fillRect(8, 8, 220, 66);
  ctx.fillStyle = "#fff";
  ctx.font = "13px monospace";
  ctx.fillText(`sequence: ${seqStr}`, 16, 26);
  ctx.font = "11px monospace";
  ctx.fillStyle = "#cfd";
  ctx.fillText(`a-axis: [${A0}, ${A1}]   b-axis: [${B0}, ${B1}]`, 16, 44);
  ctx.fillStyle = "#fda";
  ctx.fillText(`next in ${remain.toFixed(1)}s  (${seqIdx + 1}/${SEQS.length})`, 16, 60);

  // Legend strip bottom-left
  const lw = 160, lh = 10, lx = 12, ly = H - 28;
  for (let i = 0; i < lw; i++) {
    const lam = -3 + (i / lw) * 4; // -3 .. 1
    const [r, g, b] = colorFor(lam);
    ctx.fillStyle = `rgb(${r},${g},${b})`;
    ctx.fillRect(lx + i, ly, 1, lh);
  }
  ctx.strokeStyle = "rgba(255,255,255,0.5)";
  ctx.strokeRect(lx - 0.5, ly - 0.5, lw + 1, lh + 1);
  ctx.fillStyle = "#fff";
  ctx.font = "10px monospace";
  ctx.fillText("λ<0 stable", lx, ly - 4);
  ctx.fillText("λ>0 chaos", lx + lw - 60, ly - 4);
}