CIR Short Rate & Yield Curve

let r, history, W, H, lastClickReset;
const KAPPA = 0.5, THETA = 0.04, SIGMA = 0.1, R0 = 0.03;
const TENORS = [0.25, 0.5, 1, 2, 3, 5, 7, 10, 15, 20, 25, 30];
const HIST_MAX = 480;
const DT = 1 / 60;

function gauss() {
  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 cirStep(rate) {
  const drift = KAPPA * (THETA - rate) * DT;
  const diff = SIGMA * Math.sqrt(Math.max(rate, 0)) * Math.sqrt(DT) * gauss();
  return Math.max(rate + drift + diff, 1e-6);
}

function bondPrice(T, rate) {
  const g = Math.sqrt(KAPPA * KAPPA + 2 * SIGMA * SIGMA);
  const eG = Math.exp(g * T);
  const denom = (g + KAPPA) * (eG - 1) + 2 * g;
  const B = 2 * (eG - 1) / denom;
  const A = Math.pow(2 * g * Math.exp((KAPPA + g) * T / 2) / denom, 2 * KAPPA * THETA / (SIGMA * SIGMA));
  return A * Math.exp(-B * rate);
}

function yieldAt(T, rate) {
  return -Math.log(bondPrice(T, rate)) / T;
}

function init({ width, height }) {
  r = R0;
  history = [];
  W = width;
  H = height;
  lastClickReset = -1e9;
}

function drawGrid(ctx, x, y, w, h) {
  ctx.strokeStyle = "rgba(120,150,200,0.12)";
  ctx.lineWidth = 1;
  for (let i = 1; i < 5; i++) {
    const yy = y + (h * i) / 5;
    ctx.beginPath();
    ctx.moveTo(x, yy);
    ctx.lineTo(x + w, yy);
    ctx.stroke();
  }
  for (let i = 1; i < 6; i++) {
    const xx = x + (w * i) / 6;
    ctx.beginPath();
    ctx.moveTo(xx, y);
    ctx.lineTo(xx, y + h);
    ctx.stroke();
  }
  ctx.strokeStyle = "rgba(180,200,240,0.4)";
  ctx.strokeRect(x, y, w, h);
}

function tick({ ctx, frame, time, width, height, input }) {
  W = width; H = height;
  const clicks = input.consumeClicks();
  if (clicks && clicks.length) {
    r = R0;
    history.length = 0;
    lastClickReset = time;
  }

  r = cirStep(r);
  history.push(r);
  if (history.length > HIST_MAX) history.shift();

  const grad = ctx.createLinearGradient(0, 0, 0, H);
  grad.addColorStop(0, "#070b14");
  grad.addColorStop(1, "#0d1426");
  ctx.fillStyle = grad;
  ctx.fillRect(0, 0, W, H);

  const pad = 36;
  const topH = (H - pad * 3) * 0.45;
  const botH = (H - pad * 3) * 0.55;
  const x0 = pad, y0 = pad;
  const y1 = y0 + topH + pad;
  const plotW = W - pad * 2;

  drawGrid(ctx, x0, y0, plotW, topH);

  const rMin = 0, rMax = 0.10;
  ctx.strokeStyle = "rgba(180,210,255,0.25)";
  ctx.setLineDash([4, 4]);
  const thetaY = y0 + topH - ((THETA - rMin) / (rMax - rMin)) * topH;
  ctx.beginPath(); ctx.moveTo(x0, thetaY); ctx.lineTo(x0 + plotW, thetaY); ctx.stroke();
  ctx.setLineDash([]);
  ctx.fillStyle = "rgba(180,210,255,0.5)";
  ctx.font = "10px monospace";
  ctx.fillText("θ = 4%", x0 + plotW - 50, thetaY - 4);

  const grad2 = ctx.createLinearGradient(0, y0, 0, y0 + topH);
  grad2.addColorStop(0, "rgba(120,220,255,0.5)");
  grad2.addColorStop(1, "rgba(120,220,255,0.02)");
  ctx.fillStyle = grad2;
  ctx.beginPath();
  ctx.moveTo(x0, y0 + topH);
  history.forEach((v, i) => {
    const px = x0 + (i / (HIST_MAX - 1)) * plotW;
    const py = y0 + topH - ((v - rMin) / (rMax - rMin)) * topH;
    ctx.lineTo(px, py);
  });
  ctx.lineTo(x0 + ((history.length - 1) / (HIST_MAX - 1)) * plotW, y0 + topH);
  ctx.closePath();
  ctx.fill();

  ctx.strokeStyle = "#7fe3ff";
  ctx.lineWidth = 2;
  ctx.beginPath();
  history.forEach((v, i) => {
    const px = x0 + (i / (HIST_MAX - 1)) * plotW;
    const py = y0 + topH - ((v - rMin) / (rMax - rMin)) * topH;
    if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
  });
  ctx.stroke();

  ctx.fillStyle = "rgba(200,220,255,0.7)";
  ctx.font = "11px monospace";
  ctx.fillText("r(t) — short rate", x0 + 6, y0 + 14);

  drawGrid(ctx, x0, y1, plotW, botH);

  const ys = TENORS.map(T => yieldAt(T, r));
  const yMin = 0.005, yMax = 0.08;

  ctx.strokeStyle = "rgba(255,180,120,0.15)";
  ctx.lineWidth = 8;
  ctx.beginPath();
  TENORS.forEach((T, i) => {
    const px = x0 + (Math.log(T / 0.25) / Math.log(30 / 0.25)) * plotW;
    const py = y1 + botH - ((ys[i] - yMin) / (yMax - yMin)) * botH;
    if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
  });
  ctx.stroke();

  ctx.strokeStyle = "#ffb070";
  ctx.lineWidth = 2.2;
  ctx.beginPath();
  TENORS.forEach((T, i) => {
    const px = x0 + (Math.log(T / 0.25) / Math.log(30 / 0.25)) * plotW;
    const py = y1 + botH - ((ys[i] - yMin) / (yMax - yMin)) * botH;
    if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
  });
  ctx.stroke();

  TENORS.forEach((T, i) => {
    const px = x0 + (Math.log(T / 0.25) / Math.log(30 / 0.25)) * plotW;
    const py = y1 + botH - ((ys[i] - yMin) / (yMax - yMin)) * botH;
    ctx.fillStyle = "#ffd9a8";
    ctx.beginPath(); ctx.arc(px, py, 3, 0, Math.PI * 2); ctx.fill();
    ctx.fillStyle = "rgba(200,220,255,0.55)";
    ctx.font = "9px monospace";
    const label = T < 1 ? (T * 12) + "M" : T + "Y";
    ctx.fillText(label, px - 8, y1 + botH + 12);
  });

  ctx.fillStyle = "rgba(200,220,255,0.7)";
  ctx.font = "11px monospace";
  ctx.fillText("y(T) — zero-coupon yield curve", x0 + 6, y1 + 14);

  ctx.fillStyle = "rgba(10,16,30,0.7)";
  ctx.fillRect(W - 150, 10, 140, 46);
  ctx.strokeStyle = "rgba(180,210,255,0.3)";
  ctx.strokeRect(W - 150, 10, 140, 46);
  ctx.fillStyle = "#7fe3ff";
  ctx.font = "12px monospace";
  ctx.fillText("r    = " + (r * 100).toFixed(2) + "%", W - 142, 28);
  ctx.fillStyle = "#ffb070";
  ctx.fillText("10Y  = " + (yieldAt(10, r) * 100).toFixed(2) + "%", W - 142, 46);

  if (time - lastClickReset < 0.4) {
    const a = 1 - (time - lastClickReset) / 0.4;
    ctx.fillStyle = "rgba(255,255,255," + (a * 0.15) + ")";
    ctx.fillRect(0, 0, W, H);
  }

  ctx.fillStyle = "rgba(180,200,240,0.4)";
  ctx.font = "10px monospace";
  ctx.fillText("click to reset r → r₀", 10, H - 10);
}