De Jong Drift

const ITERS = 60000;
const FADE = 0.985;
let W = 0, H = 0;
let density, img, palette;
let x = 0.1, y = 0.0;

function buildPalette() {
  palette = new Uint8Array(1024 * 4);
  const stops = [
    [0, 0, 0, 0],
    [0.08, 8, 4, 28],
    [0.22, 48, 12, 78],
    [0.4, 128, 28, 118],
    [0.58, 212, 72, 92],
    [0.74, 248, 148, 58],
    [0.88, 252, 220, 148],
    [1.0, 255, 250, 230],
  ];
  for (let i = 0; i < 1024; i++) {
    const t = i / 1023;
    let A = stops[0], B = stops[stops.length - 1];
    for (let k = 0; k < stops.length - 1; k++) {
      if (t >= stops[k][0] && t <= stops[k + 1][0]) { A = stops[k]; B = stops[k + 1]; break; }
    }
    const u = (t - A[0]) / (B[0] - A[0] || 1);
    palette[i * 4] = (A[1] + (B[1] - A[1]) * u) | 0;
    palette[i * 4 + 1] = (A[2] + (B[2] - A[2]) * u) | 0;
    palette[i * 4 + 2] = (A[3] + (B[3] - A[3]) * u) | 0;
    palette[i * 4 + 3] = 255;
  }
}

function ensureBuffers(width, height) {
  if (W !== width || H !== height) {
    W = width; H = height;
    density = new Float32Array(W * H);
    img = new ImageData(W, H);
  }
}

function tick({ ctx, time, width, height }) {
  if (!palette) buildPalette();
  ensureBuffers(width, height);

  const t = time;
  const a = 2.01 * Math.sin(t * 0.13) + 0.5 * Math.cos(t * 0.041);
  const b = -2.53 * Math.cos(t * 0.097) + 0.4 * Math.sin(t * 0.071);
  const c1 = 1.61 * Math.sin(t * 0.083 + 1.3) + 0.6 * Math.cos(t * 0.053);
  const d = -0.33 * Math.cos(t * 0.111 + 0.7) + 1.7 * Math.sin(t * 0.029);

  for (let i = 0; i < density.length; i++) density[i] *= FADE;

  const s = Math.min(W, H) * 0.18;
  const cx = W * 0.5, cy = H * 0.5;

  let lx = x, ly = y;
  for (let i = 0; i < ITERS; i++) {
    const nx = Math.sin(a * ly) - Math.cos(b * lx);
    const ny = Math.sin(c1 * lx) - Math.cos(d * ly);
    lx = nx; ly = ny;
    const px = (cx + lx * s) | 0;
    const py = (cy + ly * s) | 0;
    if (px >= 0 && px < W && py >= 0 && py < H) density[py * W + px] += 1.0;
  }
  x = lx; y = ly;

  let max = 0;
  const stride = Math.max(1, ((W * H) / 8000) | 0);
  for (let i = 0; i < density.length; i += stride) {
    const v = density[i];
    if (v > max) max = v;
  }
  if (max < 1) max = 1;
  const invLog = 1 / Math.log1p(max);

  const d8 = img.data;
  for (let i = 0; i < density.length; i++) {
    const v = density[i];
    const o = i * 4;
    if (v <= 0) {
      d8[o] = 4; d8[o + 1] = 2; d8[o + 2] = 10; d8[o + 3] = 255;
      continue;
    }
    let t2 = Math.log1p(v) * invLog;
    if (t2 > 1) t2 = 1;
    t2 = Math.pow(t2, 0.55);
    const idx = (t2 * 1023) | 0;
    const p = idx * 4;
    d8[o] = palette[p];
    d8[o + 1] = palette[p + 1];
    d8[o + 2] = palette[p + 2];
    d8[o + 3] = 255;
  }
  ctx.putImageData(img, 0, 0);
}