Cointegrated Pairs: Spread & Z-Score

const N = 600;
const WIN = 60;
const BETA = 1.2;
const A = new Float32Array(N);
const B = new Float32Array(N);
const S = new Float32Array(N);
const Z = new Float32Array(N);
let F = 100, idA = 0, idB = 0;
let head = 0, filled = 0;
let sumS = 0, sumS2 = 0;

function randn() {
  let u = 0, v = 0;
  while (u === 0) u = Math.random();
  while (v === 0) v = Math.random();
  return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);
}

function step() {
  F += 0.05 * randn();
  idA = 0.92 * idA + 0.6 * randn();
  idB = 0.92 * idB + 0.5 * randn();
  const a = F + idA + 20;
  const b = BETA * F + idB - 15;
  const s = a - BETA * b;

  if (filled === N) {
    const old = S[head];
    sumS -= old;
    sumS2 -= old * old;
  } else {
    filled++;
  }
  A[head] = a;
  B[head] = b;
  S[head] = s;
  sumS += s;
  sumS2 += s * s;

  let mu = 0, varr = 0, n = 0;
  for (let k = 0; k < WIN && k < filled; k++) {
    const idx = (head - k + N) % N;
    mu += S[idx];
    n++;
  }
  mu /= Math.max(1, n);
  for (let k = 0; k < WIN && k < filled; k++) {
    const idx = (head - k + N) % N;
    const d = S[idx] - mu;
    varr += d * d;
  }
  varr = varr / Math.max(1, n - 1);
  const sd = Math.sqrt(Math.max(varr, 1e-6));
  Z[head] = (s - mu) / sd;
  head = (head + 1) % N;
}

function init() {
  for (let i = 0; i < 250; i++) step();
}

function drawPanel(ctx, x, y, w, h, title) {
  ctx.fillStyle = "#0e1320";
  ctx.fillRect(x, y, w, h);
  ctx.strokeStyle = "#2a3550";
  ctx.lineWidth = 1;
  ctx.strokeRect(x + 0.5, y + 0.5, w - 1, h - 1);
  ctx.fillStyle = "#9fb0d6";
  ctx.font = "12px monospace";
  ctx.fillText(title, x + 8, y + 14);
}

function seriesRange(arr) {
  let lo = Infinity, hi = -Infinity;
  for (let i = 0; i < filled; i++) {
    const v = arr[i];
    if (v < lo) lo = v;
    if (v > hi) hi = v;
  }
  if (lo === hi) { lo -= 1; hi += 1; }
  return [lo, hi];
}

function plot(ctx, arr, x, y, w, h, lo, hi, color) {
  ctx.strokeStyle = color;
  ctx.lineWidth = 1.4;
  ctx.beginPath();
  for (let i = 0; i < filled; i++) {
    const idx = (head - filled + i + N) % N;
    const px = x + (i / (filled - 1 || 1)) * w;
    const py = y + h - ((arr[idx] - lo) / (hi - lo)) * h;
    if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
  }
  ctx.stroke();
}

function tick({ ctx, dt, width, height }) {
  for (let i = 0; i < 2; i++) step();

  ctx.fillStyle = "#070a13";
  ctx.fillRect(0, 0, width, height);

  const pad = 10;
  const panelH = (height - pad * 4) / 3;
  const x = pad, w = width - pad * 2;
  const y1 = pad, y2 = y1 + panelH + pad, y3 = y2 + panelH + pad;

  drawPanel(ctx, x, y1, w, panelH, "Prices  A (cyan)  B (orange)");
  drawPanel(ctx, x, y2, w, panelH, "Spread  S = A - beta*B");
  drawPanel(ctx, x, y3, w, panelH, "Z-score  (window=60)");

  let lo = Infinity, hi = -Infinity;
  for (let i = 0; i < filled; i++) {
    if (A[i] < lo) lo = A[i]; if (A[i] > hi) hi = A[i];
    if (B[i] < lo) lo = B[i]; if (B[i] > hi) hi = B[i];
  }
  plot(ctx, A, x, y1, w, panelH, lo, hi, "#3fd8ff");
  plot(ctx, B, x, y1, w, panelH, lo, hi, "#ffae3f");

  const [sl, sh] = seriesRange(S);
  plot(ctx, S, x, y2, w, panelH, sl, sh, "#c8d4f0");

  const zLo = -3.5, zHi = 3.5;
  const zY = (v) => y3 + panelH - ((v - zLo) / (zHi - zLo)) * panelH;
  ctx.strokeStyle = "#3a4a70";
  ctx.setLineDash([4, 4]);
  for (const lvl of [-2, -1, 0, 1, 2]) {
    ctx.beginPath();
    ctx.moveTo(x, zY(lvl));
    ctx.lineTo(x + w, zY(lvl));
    ctx.stroke();
  }
  ctx.setLineDash([]);

  for (let i = 0; i < filled; i++) {
    const idx = (head - filled + i + N) % N;
    const z = Z[idx];
    if (Math.abs(z) > 2) {
      const px = x + (i / (filled - 1 || 1)) * w;
      ctx.fillStyle = z > 0 ? "rgba(255,70,90,0.35)" : "rgba(70,230,140,0.35)";
      ctx.fillRect(px - 1, y3 + 1, 2, panelH - 2);
    }
  }
  plot(ctx, Z, x, y3, w, panelH, zLo, zHi, "#f8f8f8");

  ctx.fillStyle = "#7a8bb0";
  ctx.font = "10px monospace";
  for (const lvl of [-2, -1, 1, 2]) {
    ctx.fillText(lvl > 0 ? "+" + lvl + "s" : lvl + "s", x + w - 28, zY(lvl) - 2);
  }
}