Möbius Transform

// Möbius transformation f(z) = (a z + b) / (c z + d)
// Animate a complex-plane grid (and the unit circle) under a slowly
// drifting Möbius map. ad − bc kept nonzero so the map stays invertible.

const GRID_N = 13;
const SAMPLES = 200;
const VIEW = 2.6;

let W, H, cx, cy, scale;
let xs, ys;

// Eight real DOFs animated independently so the transform never sits
// in a single mode (translation / rotation / inversion) for long.
const COEF = {
  a: { rx: 1.0, ry: 0.0, ax: 0.45, ay: 0.55, fx: 0.071, fy: 0.043, px: 0.0, py: 1.1 },
  b: { rx: 0.0, ry: 0.0, ax: 0.95, ay: 0.85, fx: 0.063, fy: 0.097, px: 2.0, py: 0.4 },
  c: { rx: 0.0, ry: 0.0, ax: 0.40, ay: 0.50, fx: 0.083, fy: 0.058, px: 1.3, py: 3.2 },
  d: { rx: 1.0, ry: 0.0, ax: 0.50, ay: 0.45, fx: 0.049, fy: 0.077, px: 4.1, py: 2.7 },
};

let A = [1, 0], B = [0, 0], C = [0, 0], D = [1, 0];

function evalCoef(c, t) {
  return [
    c.rx + c.ax * Math.sin(2 * Math.PI * c.fx * t + c.px),
    c.ry + c.ay * Math.sin(2 * Math.PI * c.fy * t + c.py),
  ];
}

function cmul(a, b) {
  return [a[0] * b[0] - a[1] * b[1], a[0] * b[1] + a[1] * b[0]];
}
function cadd(a, b) { return [a[0] + b[0], a[1] + b[1]]; }
function cdiv(a, b) {
  const denom = b[0] * b[0] + b[1] * b[1];
  if (denom < 1e-14) return [0, 0];
  return [
    (a[0] * b[0] + a[1] * b[1]) / denom,
    (a[1] * b[0] - a[0] * b[1]) / denom,
  ];
}

function setView(width, height) {
  W = width;
  H = height;
  cx = W * 0.5;
  cy = H * 0.5;
  scale = Math.min(W, H) / (2 * VIEW);
}

function init({ ctx, width, height }) {
  setView(width, height);
  xs = new Float32Array(GRID_N);
  ys = new Float32Array(GRID_N);
  const step = (2 * VIEW) / (GRID_N - 1);
  for (let i = 0; i < GRID_N; i++) {
    xs[i] = -VIEW + i * step;
    ys[i] = -VIEW + i * step;
  }
  ctx.fillStyle = '#06070d';
  ctx.fillRect(0, 0, W, H);
}

// Map a sampled curve through the current Möbius map and stroke it,
// breaking the path at any jump that suggests we crossed near the pole.
function strokeMapped(ctx, getZ, style, lineWidth) {
  ctx.strokeStyle = style;
  ctx.lineWidth = lineWidth;
  let started = false;
  let prevPX = 0, prevPY = 0;
  for (let s = 0; s < SAMPLES; s++) {
    const t = s / (SAMPLES - 1);
    const z = getZ(t);
    const w = cdiv(cadd(cmul(A, z), B), cadd(cmul(C, z), D));
    const mag2 = w[0] * w[0] + w[1] * w[1];
    if (!isFinite(mag2) || mag2 > 1.0e6) { started = false; continue; }
    const px = cx + w[0] * scale;
    const py = cy - w[1] * scale;
    if (!isFinite(px) || !isFinite(py)
        || px < -W || px > W * 2 || py < -H || py > H * 2) {
      started = false; continue;
    }
    if (!started) { prevPX = px; prevPY = py; started = true; continue; }
    const dx = px - prevPX, dy = py - prevPY;
    if (dx * dx + dy * dy > 40000) { prevPX = px; prevPY = py; continue; }
    ctx.beginPath();
    ctx.moveTo(prevPX, prevPY);
    ctx.lineTo(px, py);
    ctx.stroke();
    prevPX = px;
    prevPY = py;
  }
}

function tick({ ctx, time, width, height }) {
  if (width !== W || height !== H) setView(width, height);

  // Persistence fade.
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = 'rgba(6, 7, 13, 0.32)';
  ctx.fillRect(0, 0, W, H);

  A = evalCoef(COEF.a, time);
  B = evalCoef(COEF.b, time);
  C = evalCoef(COEF.c, time);
  D = evalCoef(COEF.d, time);

  // det = ad − bc; nudge if too close to degenerate.
  const ad = cmul(A, D), bc = cmul(B, C);
  const det = [ad[0] - bc[0], ad[1] - bc[1]];
  if (det[0] * det[0] + det[1] * det[1] < 0.04) {
    D = [D[0] + 0.3, D[1] + 0.2];
  }

  ctx.globalCompositeOperation = 'lighter';
  ctx.lineCap = 'round';

  // Vertical (constant Re) — cool palette.
  for (let i = 0; i < GRID_N; i++) {
    const x = xs[i];
    const hue = 200 + (i / (GRID_N - 1)) * 130;
    const edge = Math.min(i, GRID_N - 1 - i) / ((GRID_N - 1) / 2);
    const alpha = (0.32 + 0.38 * edge).toFixed(3);
    strokeMapped(
      ctx,
      (t) => [x, -VIEW + t * 2 * VIEW],
      `hsla(${hue.toFixed(1)}, 90%, 65%, ${alpha})`,
      1.05,
    );
  }

  // Horizontal (constant Im) — warm palette.
  for (let j = 0; j < GRID_N; j++) {
    const y = ys[j];
    const hue = 30 + (j / (GRID_N - 1)) * 130;
    const edge = Math.min(j, GRID_N - 1 - j) / ((GRID_N - 1) / 2);
    const alpha = (0.32 + 0.38 * edge).toFixed(3);
    strokeMapped(
      ctx,
      (t) => [-VIEW + t * 2 * VIEW, y],
      `hsla(${hue.toFixed(1)}, 90%, 65%, ${alpha})`,
      1.05,
    );
  }

  // Image of the unit circle — Möbius maps circles/lines to circles/lines.
  strokeMapped(
    ctx,
    (t) => {
      const a = t * 2 * Math.PI;
      return [Math.cos(a), Math.sin(a)];
    },
    'rgba(255, 255, 255, 0.9)',
    1.6,
  );

  // HUD.
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = 'rgba(0, 0, 0, 0.55)';
  ctx.fillRect(8, 8, 218, 80);
  ctx.fillStyle = '#dbe2ff';
  ctx.font = '11px ui-monospace, monospace';
  const fmt = (z) => `${z[0].toFixed(2)}${z[1] >= 0 ? '+' : ''}${z[1].toFixed(2)}i`;
  ctx.fillText(`a = ${fmt(A)}`, 14, 23);
  ctx.fillText(`b = ${fmt(B)}`, 14, 37);
  ctx.fillText(`c = ${fmt(C)}`, 14, 51);
  ctx.fillText(`d = ${fmt(D)}`, 14, 65);
  ctx.fillText(`det = ${fmt(det)}`, 14, 80);

  ctx.fillStyle = 'rgba(220, 230, 255, 0.85)';
  ctx.font = '12px ui-sans-serif, system-ui, sans-serif';
  ctx.textAlign = 'right';
  ctx.fillText('f(z) = (a z + b) / (c z + d)', W - 12, 20);
  ctx.textAlign = 'left';
}