Monte Carlo paths

let paths = [];
const N = 60, STEPS = 250;
const mu = 0.05, sigma = 0.25;
let step = 0;
function init() { paths = []; for (let i = 0; i < N; i++) paths.push([100]); step = 0; }
function randn() {
  return (Math.random()+Math.random()+Math.random()+Math.random()-2);
}
function tick({ ctx, width, height }) {
  step++;
  if (step >= STEPS) { init(); }
  for (const p of paths) {
    const last = p[p.length - 1];
    const z = randn() * 0.7;
    p.push(last * Math.exp((mu - 0.5*sigma*sigma)*0.01 + sigma*Math.sqrt(0.01)*z));
  }
  ctx.fillStyle = "#0a0a0a"; ctx.fillRect(0, 0, width, height);
  let lo = 100, hi = 100;
  for (const p of paths) for (const v of p) { if (v < lo) lo = v; if (v > hi) hi = v; }
  if (hi - lo < 1) { lo -= 1; hi += 1; }
  const yS = (v) => height*0.95 - ((v-lo)/(hi-lo))*height*0.9;
  ctx.lineWidth = 1;
  for (const p of paths) {
    const last = p[p.length - 1];
    ctx.strokeStyle = last > 100
      ? "rgba(52,211,153,0.45)"
      : "rgba(248,113,113,0.45)";
    ctx.beginPath();
    for (let i = 0; i < p.length; i++) {
      const x = (i / STEPS) * width;
      const y = yS(p[i]);
      if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
    }
    ctx.stroke();
  }
  ctx.strokeStyle = "rgba(255,255,255,0.2)";
  ctx.beginPath(); ctx.moveTo(0, yS(100)); ctx.lineTo(width, yS(100)); ctx.stroke();
  ctx.fillStyle = "#e5e7eb";
  ctx.font = "12px ui-monospace, monospace";
  ctx.fillText("S0 = 100   mu = 5%   sigma = 25%", 12, 22);
}