Option Payoff Diagrams

const K = 100, sigma = 0.25, r = 0.03, T = 0.25;
let strat = 0;

function erf(x) {
  const s = Math.sign(x);
  x = Math.abs(x);
  const a1 = 0.254829592, a2 = -0.284496736, a3 = 1.421413741, a4 = -1.453152027, a5 = 1.061405429, p = 0.3275911;
  const t = 1 / (1 + p * x);
  const y = 1 - (((((a5 * t + a4) * t) + a3) * t + a2) * t + a1) * t * Math.exp(-x * x);
  return s * y;
}
function N(x) { return 0.5 * (1 + erf(x / Math.SQRT2)); }
function bs(S, Kk, type) {
  const d1 = (Math.log(S / Kk) + (r + 0.5 * sigma * sigma) * T) / (sigma * Math.sqrt(T));
  const d2 = d1 - sigma * Math.sqrt(T);
  if (type === "C") return S * N(d1) - Kk * Math.exp(-r * T) * N(d2);
  return Kk * Math.exp(-r * T) * N(-d2) - S * N(-d1);
}

const cC = bs(K, K, "C"), cP = bs(K, K, "P");
const cC95 = bs(K, 95, "C"), cC105 = bs(K, 105, "C"), cC110 = bs(K, 110, "C");
const cP90 = bs(K, 90, "P"), cP95 = bs(K, 95, "P"), cP105 = bs(K, 105, "P");

function payoff(strategy, S) {
  switch (strategy) {
    case 0: return Math.max(S - K, 0) - cC;
    case 1: return Math.max(K - S, 0) - cP;
    case 2: return (S - K) - Math.max(S - K, 0) + cC;
    case 3: return (S - K) + Math.max(K - S, 0) - cP;
    case 4: return Math.max(S - 95, 0) - Math.max(S - 105, 0) - (cC95 - cC105);
    case 5: return Math.max(105 - S, 0) - Math.max(95 - S, 0) - (cP105 - cP95);
    case 6: return Math.max(S - K, 0) + Math.max(K - S, 0) - cC - cP;
    case 7: return Math.max(S - 105, 0) + Math.max(95 - S, 0) - cC105 - cP95;
    case 8: return Math.max(S - 95, 0) - 2 * Math.max(S - 100, 0) + Math.max(S - 105, 0) - (cC95 - 2 * cC + cC105);
    case 9: {
      const net = -cP90 + cP95 + cC105 - cC110;
      return -Math.max(90 - S, 0) + Math.max(95 - S, 0) + Math.max(S - 105, 0) - Math.max(S - 110, 0) + net;
    }
  }
  return 0;
}
const names = ["Long Call", "Long Put", "Covered Call", "Protective Put", "Bull Call Spread", "Bear Put Spread", "Long Straddle", "Long Strangle", "Butterfly", "Iron Condor"];

const Smin = 70, Smax = 130, steps = 600;

function stats() {
  const pts = [];
  let mn = Infinity, mx = -Infinity;
  const br = [];
  let prev = null;
  for (let i = 0; i <= steps; i++) {
    const S = Smin + (Smax - Smin) * i / steps;
    const p = payoff(strat, S);
    pts.push([S, p]);
    if (p < mn) mn = p;
    if (p > mx) mx = p;
    if (prev !== null && ((prev < 0 && p >= 0) || (prev > 0 && p <= 0))) {
      const S0 = Smin + (Smax - Smin) * (i - 1) / steps;
      const t = Math.abs(prev) / (Math.abs(prev) + Math.abs(p));
      br.push(S0 + (S - S0) * t);
    }
    prev = p;
  }
  return { pts, mn, mx, br };
}

function init() {}

function tick({ ctx, width: W, height: H, input }) {
  if (input.consumeClicks().length) strat = (strat + 1) % names.length;

  const { pts, mn, mx, br } = stats();
  const narrow = W < 520;
  const panelH = 92; // height of bottom panel in narrow mode
  const padL = 60, padT = 40;
  const padR = narrow ? 20 : 260;
  const padB = narrow ? 50 + panelH : 50;
  const pw = W - padL - padR, ph = H - padT - padB;
  const yRange = Math.max(Math.abs(mn), Math.abs(mx)) * 1.3 + 1;
  const y0 = -yRange, y1 = yRange;
  const xs = (S) => padL + (S - Smin) / (Smax - Smin) * pw;
  const ys = (p) => padT + (1 - (p - y0) / (y1 - y0)) * ph;

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

  ctx.strokeStyle = "#1e2630";
  ctx.lineWidth = 1;
  for (let i = 0; i <= 6; i++) {
    const x = padL + pw * i / 6;
    ctx.beginPath();
    ctx.moveTo(x, padT);
    ctx.lineTo(x, padT + ph);
    ctx.stroke();
    const S = Smin + (Smax - Smin) * i / 6;
    ctx.fillStyle = "#5a6878";
    ctx.font = "11px monospace";
    ctx.fillText(S.toFixed(0), x - 8, padT + ph + 16);
  }
  for (let i = 0; i <= 6; i++) {
    const y = padT + ph * i / 6;
    ctx.beginPath();
    ctx.moveTo(padL, y);
    ctx.lineTo(padL + pw, y);
    ctx.stroke();
    const v = y1 - (y1 - y0) * i / 6;
    ctx.fillStyle = "#5a6878";
    ctx.fillText(v.toFixed(1), 4, y + 4);
  }

  const yz = ys(0);
  ctx.strokeStyle = "#3a4654";
  ctx.beginPath();
  ctx.moveTo(padL, yz);
  ctx.lineTo(padL + pw, yz);
  ctx.stroke();

  // shaded regions
  ctx.beginPath();
  ctx.moveTo(xs(pts[0][0]), yz);
  for (const [S, p] of pts) ctx.lineTo(xs(S), ys(Math.max(p, 0)));
  ctx.lineTo(xs(pts[pts.length - 1][0]), yz);
  ctx.closePath();
  ctx.fillStyle = "rgba(80,200,120,0.18)";
  ctx.fill();

  ctx.beginPath();
  ctx.moveTo(xs(pts[0][0]), yz);
  for (const [S, p] of pts) ctx.lineTo(xs(S), ys(Math.min(p, 0)));
  ctx.lineTo(xs(pts[pts.length - 1][0]), yz);
  ctx.closePath();
  ctx.fillStyle = "rgba(220,80,80,0.18)";
  ctx.fill();

  // main payoff line
  ctx.lineWidth = 2;
  ctx.beginPath();
  for (let i = 0; i < pts.length; i++) {
    const [S, p] = pts[i];
    if (i === 0) ctx.moveTo(xs(S), ys(p));
    else ctx.lineTo(xs(S), ys(p));
  }
  ctx.strokeStyle = "#e8eef6";
  ctx.stroke();

  for (const b of br) {
    ctx.fillStyle = "#f5c542";
    ctx.beginPath();
    ctx.arc(xs(b), yz, 4, 0, Math.PI * 2);
    ctx.fill();
  }

  if (!narrow) {
    // side panel (wide layout)
    const px = W - padR + 20, py = padT + 10;
    ctx.fillStyle = "#10161e";
    ctx.fillRect(px - 10, py - 5, padR - 30, 260);
    ctx.strokeStyle = "#2a3340";
    ctx.strokeRect(px - 10, py - 5, padR - 30, 260);

    ctx.fillStyle = "#e8eef6";
    ctx.font = "bold 16px monospace";
    ctx.fillText(names[strat], px, py + 18);

    ctx.font = "12px monospace";
    ctx.fillStyle = "#9aa8b8";
    let ly = py + 44;
    ctx.fillText("K = 100  sigma = 0.25", px, ly); ly += 16;
    ctx.fillText("r = 0.03  T = 0.25", px, ly); ly += 24;

    ctx.fillStyle = "#50c878";
    ctx.fillText("Max profit: " + (mx > 1e6 ? "inf" : mx.toFixed(2)), px, ly); ly += 18;
    ctx.fillStyle = "#dc5050";
    ctx.fillText("Max loss:   " + (mn < -1e6 ? "-inf" : mn.toFixed(2)), px, ly); ly += 22;

    ctx.fillStyle = "#f5c542";
    ctx.fillText("Breakevens:", px, ly); ly += 16;
    ctx.fillStyle = "#e8eef6";
    if (br.length === 0) { ctx.fillText("  none", px, ly); ly += 14; }
    else for (const b of br) { ctx.fillText("  S_T = " + b.toFixed(2), px, ly); ly += 14; }
    ly += 10;

    ctx.fillStyle = "#5a6878";
    ctx.fillText(`click to cycle (${strat + 1}/${names.length})`, px, ly);
  } else {
    // bottom panel (narrow layout)
    const bx = 8, by = padT + ph + 30, bw = W - 16, bh = panelH - 8;
    ctx.fillStyle = "#10161e";
    ctx.fillRect(bx, by, bw, bh);
    ctx.strokeStyle = "#2a3340";
    ctx.strokeRect(bx, by, bw, bh);

    const px = bx + 8;
    ctx.fillStyle = "#e8eef6";
    ctx.font = "bold 14px monospace";
    ctx.fillText(names[strat], px, by + 16);

    ctx.font = "11px monospace";
    ctx.fillStyle = "#50c878";
    ctx.fillText("Max +: " + (mx > 1e6 ? "inf" : mx.toFixed(2)), px, by + 32);
    ctx.fillStyle = "#dc5050";
    ctx.fillText("Max -: " + (mn < -1e6 ? "-inf" : mn.toFixed(2)), px, by + 46);

    // right column: breakevens
    const cx = bx + Math.floor(bw / 2) + 4;
    ctx.fillStyle = "#f5c542";
    ctx.fillText("Breakevens:", cx, by + 16);
    ctx.fillStyle = "#e8eef6";
    if (br.length === 0) {
      ctx.fillText("none", cx, by + 32);
    } else {
      const labels = br.map((b) => b.toFixed(2));
      ctx.fillText(labels.slice(0, 2).join("  "), cx, by + 32);
      if (labels.length > 2) ctx.fillText(labels.slice(2, 4).join("  "), cx, by + 46);
    }

    ctx.fillStyle = "#5a6878";
    ctx.fillText(`tap to cycle (${strat + 1}/${names.length})`, px, by + bh - 8);
  }

  ctx.fillStyle = "#9aa8b8";
  ctx.font = "12px monospace";
  ctx.fillText("P&L at expiry vs S_T", padL, padT - 12);
}