Brownian Bridge

// Brownian bridge: W(0)=a, W(T)=b. Pinned at both ends.
// Generated as W_t = a + (b-a)(t/T) + (B_t - (t/T) B_T), B standard BM.
// 50 faint sample paths + 1 highlighted; live mean / +/- std band.
// Click left half to set 'a' endpoint, right half to set 'b' endpoint.

const N = 200, PATHS = 50, SIGMA = 1.0, REDRAW_HZ = 6;
let W = 0, H = 0;
let a = 0, b = 0;
let domainLo = -2, domainHi = 2;
let paths, highlight, mean, stdev, tmp;
let acc = 0;
let frame = 0;
let aPx = 0, bPx = 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 genBridge(out, off) {
  const dt = 1 / (N - 1), sd = SIGMA * Math.sqrt(dt);
  let bm = 0;
  tmp[0] = 0;
  for (let i = 1; i < N; i++) { bm += sd * randn(); tmp[i] = bm; }
  const BT = tmp[N - 1];
  for (let i = 0; i < N; i++) {
    const ti = i / (N - 1);
    out[off + i] = a + (b - a) * ti + (tmp[i] - ti * BT);
  }
}

function regenerate() {
  for (let p = 0; p < PATHS; p++) genBridge(paths, p * N);
  genBridge(highlight, 0);
  for (let i = 0; i < N; i++) {
    let s = 0, s2 = 0;
    for (let p = 0; p < PATHS; p++) {
      const v = paths[p * N + i]; s += v; s2 += v * v;
    }
    const m = s / PATHS;
    mean[i] = m;
    stdev[i] = Math.sqrt(Math.max(0, s2 / PATHS - m * m));
  }
  let lo = Math.min(a, b), hi = Math.max(a, b);
  for (let i = 0; i < N; i++) {
    const m = mean[i], s = stdev[i];
    if (m - 3 * s < lo) lo = m - 3 * s;
    if (m + 3 * s > hi) hi = m + 3 * s;
  }
  domainLo = domainLo * 0.7 + (lo - 0.2) * 0.3;
  domainHi = domainHi * 0.7 + (hi + 0.2) * 0.3;
}

function yToPx(y) {
  const pad = 40;
  const top = 28, bot = H - 24;
  return top + (bot - top) * (1 - (y - domainLo) / (domainHi - domainLo));
}
function xToPx(i) {
  const left = 44, right = W - 16;
  return left + (right - left) * (i / (N - 1));
}
function pxToY(py) {
  const top = 28, bot = H - 24;
  return domainLo + (1 - (py - top) / (bot - top)) * (domainHi - domainLo);
}

function init({ width, height }) {
  W = width; H = height;
  a = 0.5; b = -0.5;
  domainLo = -2; domainHi = 2;
  paths = new Float32Array(PATHS * N);
  highlight = new Float32Array(N);
  mean = new Float32Array(N);
  stdev = new Float32Array(N);
  tmp = new Float32Array(N);
  frame = 0; acc = 0;
  regenerate();
}

function tick({ ctx, dt, width, height, input }) {
  W = width; H = height;

  const clicks = input.consumeClicks();
  for (const c of clicks) {
    // left half = set 'a' (start), right half = set 'b' (end)
    const y = pxToY(c.y);
    if (c.x < W / 2) a = y; else b = y;
    regenerate();
  }

  acc += dt;
  if (acc > 1 / REDRAW_HZ) {
    acc = 0;
    regenerate();
  }
  frame++;

  // background
  ctx.fillStyle = '#0a0d14';
  ctx.fillRect(0, 0, W, H);

  // axes
  const left = 44, right = W - 16, top = 28, bot = H - 24;
  ctx.strokeStyle = 'rgba(255,255,255,0.12)';
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(left, top); ctx.lineTo(left, bot); ctx.lineTo(right, bot);
  ctx.stroke();
  // zero line
  if (domainLo < 0 && domainHi > 0) {
    const y0 = yToPx(0);
    ctx.strokeStyle = 'rgba(255,255,255,0.08)';
    ctx.setLineDash([3, 3]);
    ctx.beginPath(); ctx.moveTo(left, y0); ctx.lineTo(right, y0); ctx.stroke();
    ctx.setLineDash([]);
  }
  // y-tick labels
  ctx.fillStyle = 'rgba(205,217,229,0.55)';
  ctx.font = '10px monospace';
  for (let k = 0; k <= 4; k++) {
    const v = domainLo + (domainHi - domainLo) * (k / 4);
    const py = top + (bot - top) * (1 - k / 4);
    ctx.fillText(v.toFixed(2), 4, py + 3);
  }

  // +/- std band
  ctx.fillStyle = 'rgba(126,231,135,0.10)';
  ctx.beginPath();
  for (let i = 0; i < N; i++) {
    const px = xToPx(i), py = yToPx(mean[i] + stdev[i]);
    if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
  }
  for (let i = N - 1; i >= 0; i--) {
    const px = xToPx(i), py = yToPx(mean[i] - stdev[i]);
    ctx.lineTo(px, py);
  }
  ctx.closePath(); ctx.fill();

  // 50 faint sample paths
  ctx.strokeStyle = 'rgba(140,200,255,0.18)';
  ctx.lineWidth = 1;
  for (let p = 0; p < PATHS; p++) {
    ctx.beginPath();
    for (let i = 0; i < N; i++) {
      const px = xToPx(i), py = yToPx(paths[p * N + i]);
      if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
    }
    ctx.stroke();
  }

  // mean curve (theoretical: linear from a to b)
  ctx.strokeStyle = 'rgba(255,255,255,0.45)';
  ctx.setLineDash([4, 4]); ctx.lineWidth = 1.2;
  ctx.beginPath();
  ctx.moveTo(xToPx(0), yToPx(a));
  ctx.lineTo(xToPx(N - 1), yToPx(b));
  ctx.stroke(); ctx.setLineDash([]);

  // highlighted single realization
  ctx.strokeStyle = '#ffd66b';
  ctx.lineWidth = 1.8;
  ctx.beginPath();
  for (let i = 0; i < N; i++) {
    const px = xToPx(i), py = yToPx(highlight[i]);
    if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
  }
  ctx.stroke();

  // endpoint markers
  aPx = yToPx(a); bPx = yToPx(b);
  ctx.fillStyle = '#7ee787';
  ctx.beginPath(); ctx.arc(xToPx(0), aPx, 5, 0, Math.PI * 2); ctx.fill();
  ctx.fillStyle = '#ff7b72';
  ctx.beginPath(); ctx.arc(xToPx(N - 1), bPx, 5, 0, Math.PI * 2); ctx.fill();

  ctx.fillStyle = 'rgba(126,231,135,0.95)';
  ctx.font = '11px monospace';
  ctx.fillText('a=' + a.toFixed(2), xToPx(0) + 8, aPx - 6);
  ctx.fillStyle = 'rgba(255,123,114,0.95)';
  ctx.fillText('b=' + b.toFixed(2), xToPx(N - 1) - 56, bPx - 6);

  // HUD
  ctx.fillStyle = 'rgba(0,0,0,0.55)';
  ctx.fillRect(8, 4, 220, 22);
  ctx.fillStyle = '#e6edf3';
  ctx.font = '12px monospace';
  ctx.fillText('Brownian Bridge  T=1  sigma=1', 14, 19);

  ctx.fillStyle = 'rgba(205,217,229,0.55)';
  ctx.font = '10px monospace';
  ctx.fillText('click left half: move a   |   click right half: move b', 14, H - 6);
}