Logistic Map Bifurcation

const R0 = 2.5, R1 = 4.0;
let col = 0;
let done = false;
let W = 0, H = 0;
let bg, bctx;
let lastWidth = 0, lastHeight = 0;

const annots = [
  [3.0, "r=3.0 period 2"],
  [3.449, "3.449 period 4"],
  [3.544, "3.544 period 8"],
  [3.5699, "r∞ ≈ 3.5699"],
  [3.8284, "3.828 period 3"],
];

function ensureBuffer(width, height) {
  if (width === lastWidth && height === lastHeight && bg) return;
  lastWidth = width; lastHeight = height;
  bg = new OffscreenCanvas(width, height);
  bctx = bg.getContext("2d");
  bctx.fillStyle = "#0a0a12";
  bctx.fillRect(0, 0, width, height);
  drawAxes(bctx, width, height);
  col = 0; done = false;
}

function drawAxes(ctx, w, h) {
  ctx.strokeStyle = "#2a2a3a";
  ctx.lineWidth = 1;
  ctx.font = "11px monospace";
  ctx.fillStyle = "#7a7a92";
  for (let i = 0; i <= 6; i++) {
    const r = R0 + (R1 - R0) * i / 6;
    const x = i / 6 * w;
    ctx.beginPath();
    ctx.moveTo(x, h - 20);
    ctx.lineTo(x, h - 15);
    ctx.stroke();
    ctx.fillText(r.toFixed(2), x + 3, h - 6);
  }
  for (let i = 0; i <= 4; i++) {
    const v = i / 4;
    const y = h - 20 - (h - 30) * v;
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(8, y);
    ctx.stroke();
    ctx.fillText(v.toFixed(2), 10, y - 2);
  }
}

function plotCol(ctx, px, w, h) {
  const r = R0 + (R1 - R0) * px / w;
  let x = Math.random() * 0.8 + 0.1;
  for (let i = 0; i < 500; i++) x = r * x * (1 - x);
  ctx.fillStyle = "rgba(180,220,255,0.18)";
  for (let i = 0; i < 300; i++) {
    x = r * x * (1 - x);
    const py = h - 20 - (h - 30) * x;
    ctx.fillRect(px, py, 1, 1);
  }
}

function init({ width, height }) { ensureBuffer(width, height); }

function tick({ ctx, width, height, input }) {
  ensureBuffer(width, height);
  W = width; H = height;

  if (!done) {
    const perFrame = Math.max(4, Math.ceil(W / 120));
    for (let k = 0; k < perFrame && col < W; k++, col++) plotCol(bctx, col, W, H);
    if (col >= W) done = true;
  }

  ctx.drawImage(bg, 0, 0);

  ctx.fillStyle = "rgba(10,10,18,0.7)";
  ctx.fillRect(0, 0, W, 20);
  ctx.fillStyle = "rgba(200,200,220,0.85)";
  ctx.font = "12px monospace";
  ctx.fillText("Logistic map  x → r x(1 − x)", 12, 14);

  ctx.font = "10px monospace";
  for (const [r, lbl] of annots) {
    if (r > R0 + (R1 - R0) * col / W) continue;
    const x = (r - R0) / (R1 - R0) * W;
    ctx.strokeStyle = "rgba(255,180,90,0.45)";
    ctx.beginPath();
    ctx.moveTo(x, 22);
    ctx.lineTo(x, H - 22);
    ctx.stroke();
    ctx.fillStyle = "rgba(255,210,140,0.95)";
    ctx.fillText(lbl, x + 3, 34);
  }

  // tooltip
  if (input.mouseX >= 0 && input.mouseX <= W && input.mouseY >= 0 && input.mouseY <= H) {
    const r = R0 + (R1 - R0) * input.mouseX / W;
    const bx = Math.min(input.mouseX + 14, W - 220);
    const by = Math.min(input.mouseY + 14, H - 130);
    ctx.fillStyle = "rgba(15,15,25,0.92)";
    ctx.strokeStyle = "#4a5a8a";
    ctx.lineWidth = 1;
    ctx.fillRect(bx, by, 210, 120);
    ctx.strokeRect(bx, by, 210, 120);
    ctx.fillStyle = "#cfd6ff";
    ctx.font = "11px monospace";
    ctx.fillText(`r = ${r.toFixed(4)}`, bx + 8, by + 14);
    ctx.fillText("x_n iteration", bx + 8, by + 28);
    let xv = Math.random() * 0.8 + 0.1;
    for (let i = 0; i < 500; i++) xv = r * xv * (1 - xv);
    const px0 = bx + 8, py0 = by + 38, pw = 194, ph = 74;
    ctx.strokeStyle = "#2a2a3a";
    ctx.strokeRect(px0, py0, pw, ph);
    ctx.strokeStyle = "#9ad0ff";
    ctx.beginPath();
    for (let i = 0; i < 80; i++) {
      xv = r * xv * (1 - xv);
      const xx = px0 + i / 79 * pw, yy = py0 + ph - xv * ph;
      if (i === 0) ctx.moveTo(xx, yy); else ctx.lineTo(xx, yy);
    }
    ctx.stroke();
  }
}