Drawdown Reality

const mu = 0.08, sig = 0.25, dt = 1 / 252, N = 1260;
let eq = [], peak = [], dd = [], maxDD = 0, maxDDStart = 0, maxDDEnd = 0;

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 gen() {
  eq = [1]; peak = [1]; dd = [0];
  maxDD = 0; maxDDStart = 0; maxDDEnd = 0;
  let p = 1, pk = 1, curStart = 0, bestStart = 0, bestEnd = 0, bestDD = 0;
  for (let i = 1; i < N; i++) {
    const r = (mu - 0.5 * sig * sig) * dt + sig * Math.sqrt(dt) * gauss();
    p = p * Math.exp(r);
    if (p >= pk) { pk = p; curStart = i; }
    const d = p / pk - 1;
    if (d < bestDD) { bestDD = d; bestStart = curStart; bestEnd = i; }
    eq.push(p); peak.push(pk); dd.push(d);
  }
  maxDD = bestDD; maxDDStart = bestStart; maxDDEnd = bestEnd;
}

function init() { gen(); }

function tick({ ctx, width: W, height: H, input }) {
  if (input.consumeClicks().length) gen();

  const PAD = 40;
  const topH = (H - PAD * 3) * 0.62;
  const botH = (H - PAD * 3) * 0.38;
  const topY = PAD;
  const botY = PAD * 2 + topH;

  ctx.fillStyle = "#0a0a0f";
  ctx.fillRect(0, 0, W, H);

  let eMin = Infinity, eMax = -Infinity;
  for (const v of eq) { if (v < eMin) eMin = v; if (v > eMax) eMax = v; }
  const ePad = (eMax - eMin) * 0.08;
  eMin -= ePad; eMax += ePad;
  const px = (i) => PAD + (i / (N - 1)) * (W - PAD * 2);
  const ey = (v) => topY + topH - ((v - eMin) / (eMax - eMin)) * topH;

  ctx.strokeStyle = "#222";
  ctx.lineWidth = 1;
  for (let k = 0; k <= 4; k++) {
    const y = topY + (k / 4) * topH;
    ctx.beginPath();
    ctx.moveTo(PAD, y);
    ctx.lineTo(W - PAD, y);
    ctx.stroke();
  }

  // green shaded at-high segments
  ctx.fillStyle = "rgba(60,200,120,0.18)";
  let seg = null;
  for (let i = 0; i < N; i++) {
    const atHigh = eq[i] >= peak[i] - 1e-12;
    if (atHigh && seg === null) seg = i;
    if ((!atHigh || i === N - 1) && seg !== null) {
      const a = seg, b = atHigh ? i : i - 1;
      ctx.beginPath();
      ctx.moveTo(px(a), topY + topH);
      for (let j = a; j <= b; j++) ctx.lineTo(px(j), ey(eq[j]));
      ctx.lineTo(px(b), topY + topH);
      ctx.closePath();
      ctx.fill();
      seg = null;
    }
  }

  // peak watermark
  ctx.strokeStyle = "rgba(180,180,90,0.55)";
  ctx.setLineDash([4, 4]);
  ctx.beginPath();
  for (let i = 0; i < N; i++) {
    const X = px(i), Y = ey(peak[i]);
    if (i === 0) ctx.moveTo(X, Y); else ctx.lineTo(X, Y);
  }
  ctx.stroke();
  ctx.setLineDash([]);

  // equity curve
  ctx.strokeStyle = "#eaeaea";
  ctx.lineWidth = 1.5;
  ctx.beginPath();
  for (let i = 0; i < N; i++) {
    const X = px(i), Y = ey(eq[i]);
    if (i === 0) ctx.moveTo(X, Y); else ctx.lineTo(X, Y);
  }
  ctx.stroke();

  // drawdown panel
  let dMin = 0;
  for (const v of dd) if (v < dMin) dMin = v;
  dMin = Math.min(dMin, -0.05) * 1.1;
  const dy = (v) => botY + (-v / -dMin) * botH;

  ctx.strokeStyle = "#222";
  for (let k = 0; k <= 3; k++) {
    const y = botY + (k / 3) * botH;
    ctx.beginPath();
    ctx.moveTo(PAD, y);
    ctx.lineTo(W - PAD, y);
    ctx.stroke();
  }
  ctx.strokeStyle = "#666";
  ctx.beginPath();
  ctx.moveTo(PAD, botY);
  ctx.lineTo(W - PAD, botY);
  ctx.stroke();

  ctx.fillStyle = "rgba(230,70,70,0.35)";
  ctx.beginPath();
  ctx.moveTo(px(0), botY);
  for (let i = 0; i < N; i++) ctx.lineTo(px(i), dy(dd[i]));
  ctx.lineTo(px(N - 1), botY);
  ctx.closePath();
  ctx.fill();

  ctx.strokeStyle = "#e64646";
  ctx.lineWidth = 1.2;
  ctx.beginPath();
  for (let i = 0; i < N; i++) {
    const X = px(i), Y = dy(dd[i]);
    if (i === 0) ctx.moveTo(X, Y); else ctx.lineTo(X, Y);
  }
  ctx.stroke();

  // max DD highlight
  const X1 = px(maxDDStart), X2 = px(maxDDEnd);
  ctx.fillStyle = "rgba(255,210,90,0.10)";
  ctx.fillRect(X1, botY, X2 - X1, botH);
  ctx.strokeStyle = "rgba(255,210,90,0.6)";
  ctx.setLineDash([3, 3]);
  ctx.beginPath();
  ctx.moveTo(X1, botY); ctx.lineTo(X1, botY + botH);
  ctx.moveTo(X2, botY); ctx.lineTo(X2, botY + botH);
  ctx.stroke();
  ctx.setLineDash([]);

  // HUD
  ctx.fillStyle = "rgba(0,0,0,0.55)";
  ctx.fillRect(10, 10, 250, 58);
  ctx.strokeStyle = "#333";
  ctx.strokeRect(10, 10, 250, 58);
  ctx.fillStyle = "#ff8a8a";
  ctx.font = "bold 14px monospace";
  const ddPct = (maxDD * 100).toFixed(1);
  ctx.fillText(`MAX DD: ${ddPct}%  over  ${maxDDEnd - maxDDStart}d`, 20, 32);
  ctx.fillStyle = "#bbb";
  ctx.font = "11px monospace";
  ctx.fillText("mu=0.08  sigma=0.25  click=reset", 20, 52);

  ctx.fillStyle = "#888";
  ctx.font = "10px monospace";
  ctx.fillText("equity", PAD, topY - 6);
  ctx.fillText("drawdown", PAD, botY - 6);
}