Clifford Drift

let W, H, img, data, dens, cx, cy, scale, x, y;

function init({ canvas, ctx, width, height }) {
  W = width; H = height;
  img = ctx.createImageData(W, H);
  data = img.data;
  dens = new Float32Array(W * H);
  cx = W * 0.5;
  cy = H * 0.5;
  scale = Math.min(W, H) * 0.22;
  x = 0.1;
  y = 0.0;
  for (let i = 3; i < data.length; i += 4) data[i] = 255;
}

function tick({ ctx, time, width, height }) {
  if (width !== W || height !== H) {
    W = width; H = height;
    img = ctx.createImageData(W, H);
    data = img.data;
    dens = new Float32Array(W * H);
    cx = W * 0.5;
    cy = H * 0.5;
    scale = Math.min(W, H) * 0.22;
    for (let i = 3; i < data.length; i += 4) data[i] = 255;
  }

  const t = time * 0.001;
  const a = -1.7 + 0.6 * Math.sin(t * 0.13);
  const b = 1.3 + 0.7 * Math.cos(t * 0.11);
  const c = -0.1 + 1.2 * Math.sin(t * 0.07 + 1.3);
  const d = -1.2 + 0.8 * Math.cos(t * 0.09 + 0.7);

  const fade = 0.92;
  for (let i = 0; i < dens.length; i++) dens[i] *= fade;

  let px = x, py = y;
  const N = 100000;
  let maxD = 0.0001;

  for (let i = 0; i < N; i++) {
    const nx = Math.sin(a * py) + c * Math.cos(a * px);
    const ny = Math.sin(b * px) + d * Math.cos(b * py);
    px = nx; py = ny;

    const sx = (px * scale + cx) | 0;
    const sy = (py * scale + cy) | 0;
    if (sx >= 0 && sx < W && sy >= 0 && sy < H) {
      const idx = sy * W + sx;
      const v = dens[idx] + 1;
      dens[idx] = v;
      if (v > maxD) maxD = v;
    }
  }
  x = px; y = py;

  const invLogMax = 1 / Math.log(1 + maxD);

  for (let i = 0, j = 0; i < dens.length; i++, j += 4) {
    const v = dens[i];
    if (v <= 0.001) {
      data[j] = 4;
      data[j + 1] = 6;
      data[j + 2] = 24;
      continue;
    }
    let n = Math.log(1 + v) * invLogMax;
    if (n > 1) n = 1;

    let r, g, bl;
    if (n < 0.25) {
      const k = n / 0.25;
      r = 4 + (40 - 4) * k;
      g = 6 + (10 - 6) * k;
      bl = 24 + (90 - 24) * k;
    } else if (n < 0.55) {
      const k = (n - 0.25) / 0.30;
      r = 40 + (200 - 40) * k;
      g = 10 + (30 - 10) * k;
      bl = 90 + (160 - 90) * k;
    } else if (n < 0.80) {
      const k = (n - 0.55) / 0.25;
      r = 200 + (90 - 200) * k;
      g = 30 + (180 - 30) * k;
      bl = 160 + (230 - 160) * k;
    } else {
      const k = (n - 0.80) / 0.20;
      r = 90 + (180 - 90) * k;
      g = 180 + (255 - 180) * k;
      bl = 230 + (255 - 230) * k;
    }

    data[j] = r | 0;
    data[j + 1] = g | 0;
    data[j + 2] = bl | 0;
  }

  ctx.putImageData(img, 0, 0);
}