Chaos Game Fractals

let W, H, density, maxD, vertices, px, py, ratio, frameCount;

function setRatio() {
  const n = vertices.length;
  if (n <= 3) ratio = 0.5;
  else if (n === 4) ratio = 0.5;
  else if (n === 5) ratio = 1 - 1 / (1 + (1 + Math.sqrt(5)) / 2);
  else ratio = 1 - 1 / (2 * Math.cos(Math.PI / n));
}

function regularPolygon(n, cx, cy, r) {
  const v = [];
  for (let i = 0; i < n; i++) {
    const a = -Math.PI / 2 + (i * 2 * Math.PI) / n;
    v.push({ x: cx + Math.cos(a) * r, y: cy + Math.sin(a) * r });
  }
  return v;
}

function resetDensity() {
  density = new Float32Array(W * H);
  maxD = 1;
  if (vertices.length) {
    px = vertices[0].x;
    py = vertices[0].y;
  } else {
    px = W / 2;
    py = H / 2;
  }
  frameCount = 0;
}

function init({ canvas, ctx, width, height, input }) {
  W = width | 0;
  H = height | 0;
  const r = Math.min(W, H) * 0.42;
  vertices = regularPolygon(3, W / 2, H / 2 + r * 0.15, r);
  setRatio();
  resetDensity();
}

function addVertex(x, y) {
  if (vertices.length >= 7) {
    vertices.shift();
  }
  vertices.push({ x, y });
  setRatio();
  resetDensity();
}

function plot(x, y) {
  const xi = x | 0, yi = y | 0;
  if (xi < 0 || yi < 0 || xi >= W || yi >= H) return;
  const idx = yi * W + xi;
  density[idx] += 1;
  if (density[idx] > maxD) maxD = density[idx];
}

function colormap(t, out, o) {
  t = Math.max(0, Math.min(1, t));
  const r = Math.min(255, Math.max(0, 255 * (0.05 + 1.6 * t - 0.7 * t * t)));
  const g = Math.min(255, Math.max(0, 255 * (-0.1 + 0.3 * t + 0.9 * t * t)));
  const b = Math.min(255, Math.max(0, 255 * (0.3 + 0.9 * t - 1.4 * t * t + 0.4 * Math.pow(t, 4))));
  out[o] = r; out[o + 1] = g; out[o + 2] = b; out[o + 3] = 255;
}

function tick({ ctx, dt, frame, time, width, height, input }) {
  if ((width | 0) !== W || (height | 0) !== H) {
    W = width | 0; H = height | 0;
    const r = Math.min(W, H) * 0.42;
    vertices = regularPolygon(vertices.length || 3, W / 2, H / 2 + r * 0.15, r);
    setRatio();
    resetDensity();
  }

  const clicks = input.consumeClicks();
  for (const c of clicks) addVertex(c.x, c.y);

  const ITER = 5000;
  const nV = vertices.length;
  let x = px, y = py;
  for (let i = 0; i < ITER; i++) {
    const v = vertices[(Math.random() * nV) | 0];
    x = x + (v.x - x) * ratio;
    y = y + (v.y - y) * ratio;
    plot(x, y);
  }
  px = x; py = y;
  frameCount++;

  const img = ctx.createImageData(W, H);
  const data = img.data;
  const logMax = Math.log(1 + maxD);
  const pulse = 0.5 + 0.5 * Math.sin(time * 0.0008);
  for (let i = 0; i < density.length; i++) {
    const d = density[i];
    let t = d > 0 ? Math.log(1 + d) / logMax : 0;
    t = Math.pow(t, 0.55);
    if (t > 0) {
      const o = i * 4;
      colormap(t * (0.85 + 0.15 * pulse), data, o);
    } else {
      const o = i * 4;
      data[o] = 6; data[o + 1] = 4; data[o + 2] = 18; data[o + 3] = 255;
    }
  }
  ctx.putImageData(img, 0, 0);

  for (let i = 0; i < nV; i++) {
    const v = vertices[i];
    ctx.beginPath();
    ctx.arc(v.x, v.y, 6, 0, Math.PI * 2);
    ctx.fillStyle = "rgba(255,255,255,0.9)";
    ctx.fill();
    ctx.strokeStyle = "rgba(0,0,0,0.7)";
    ctx.lineWidth = 2;
    ctx.stroke();
  }

  ctx.fillStyle = "rgba(0,0,0,0.55)";
  ctx.fillRect(10, 10, 220, 54);
  ctx.fillStyle = "#fff";
  ctx.font = "13px ui-monospace, monospace";
  ctx.fillText("vertices: " + nV + "  ratio: " + ratio.toFixed(3), 18, 30);
  ctx.fillText("iters: " + (frameCount * ITER).toLocaleString(), 18, 50);
}