Magnetic Monopole Field Lines

let poles = [];
let mouseCharge = 1;
let w = 0, h = 0;
let lineCount = 56;
let maxSteps = 320;
let stepSize = 2.4;
let trailFade = 0.08;

function init({ canvas, ctx, width, height, input }) {
  w = width; h = height;
  ctx.fillStyle = '#05060c';
  ctx.fillRect(0, 0, w, h);
  poles = [
    { x: w * 0.32, y: h * 0.5, q: +1 },
    { x: w * 0.68, y: h * 0.5, q: -1 },
  ];
}

function fieldAt(px, py, mx, my, mq) {
  let bx = 0, by = 0;
  for (let i = 0; i < poles.length; i++) {
    const p = poles[i];
    const dx = px - p.x, dy = py - p.y;
    const r2 = dx * dx + dy * dy + 1;
    const r = Math.sqrt(r2);
    const inv = p.q / (r2 * r);
    bx += dx * inv;
    by += dy * inv;
  }
  if (mq !== 0) {
    const dx = px - mx, dy = py - my;
    const r2 = dx * dx + dy * dy + 1;
    const r = Math.sqrt(r2);
    const inv = (mq * 0.7) / (r2 * r);
    bx += dx * inv;
    by += dy * inv;
  }
  return [bx, by];
}

function traceLine(ctx, sx, sy, dir, mx, my, mq, hue) {
  ctx.beginPath();
  ctx.moveTo(sx, sy);
  let x = sx, y = sy;
  for (let s = 0; s < maxSteps; s++) {
    const [bx, by] = fieldAt(x, y, mx, my, mq);
    const mag = Math.sqrt(bx * bx + by * by);
    if (mag < 1e-9) break;
    const nx = (bx / mag) * dir;
    const ny = (by / mag) * dir;
    x += nx * stepSize;
    y += ny * stepSize;
    if (x < -20 || y < -20 || x > w + 20 || y > h + 20) break;
    let absorbed = false;
    for (let i = 0; i < poles.length; i++) {
      const p = poles[i];
      const dx = x - p.x, dy = y - p.y;
      if (dx * dx + dy * dy < 64) { absorbed = true; break; }
    }
    ctx.lineTo(x, y);
    if (absorbed) break;
  }
  ctx.strokeStyle = hue;
  ctx.stroke();
}

function tick({ ctx, dt, frame, time, width, height, input }) {
  if (width !== w || height !== h) {
    w = width; h = height;
    poles[0].x = w * 0.32; poles[0].y = h * 0.5;
    poles[1].x = w * 0.68; poles[1].y = h * 0.5;
  }
  const clicks = input.consumeClicks();
  for (let i = 0; i < clicks.length; i++) {
    mouseCharge = mouseCharge === 1 ? -1 : mouseCharge === -1 ? 0 : 1;
  }
  const mx = input.mouseX, my = input.mouseY;

  ctx.fillStyle = `rgba(5,6,12,${trailFade})`;
  ctx.fillRect(0, 0, w, h);

  ctx.globalCompositeOperation = 'lighter';
  ctx.lineWidth = 1;

  const wobble = Math.sin(time * 0.4) * 0.15;
  for (let i = 0; i < lineCount; i++) {
    const a = (i / lineCount) * Math.PI * 2 + wobble;
    const r0 = 14;
    const sx = poles[0].x + Math.cos(a) * r0;
    const sy = poles[0].y + Math.sin(a) * r0;
    const hue = `rgba(255,${80 + (i * 3) % 80},${60 + (i * 5) % 60},0.18)`;
    traceLine(ctx, sx, sy, +1, mx, my, mouseCharge, hue);
  }
  for (let i = 0; i < lineCount; i++) {
    const a = (i / lineCount) * Math.PI * 2 - wobble;
    const r0 = 14;
    const sx = poles[1].x + Math.cos(a) * r0;
    const sy = poles[1].y + Math.sin(a) * r0;
    const hue = `rgba(${80 + (i * 3) % 80},${120 + (i * 2) % 60},255,0.16)`;
    traceLine(ctx, sx, sy, -1, mx, my, mouseCharge, hue);
  }

  ctx.globalCompositeOperation = 'source-over';

  const pulse = 1 + 0.18 * Math.sin(time * 3);
  for (let i = 0; i < poles.length; i++) {
    const p = poles[i];
    const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, 26 * pulse);
    if (p.q > 0) {
      grad.addColorStop(0, 'rgba(255,80,80,1)');
      grad.addColorStop(0.4, 'rgba(220,40,40,0.7)');
      grad.addColorStop(1, 'rgba(80,0,0,0)');
    } else {
      grad.addColorStop(0, 'rgba(120,180,255,1)');
      grad.addColorStop(0.4, 'rgba(60,120,240,0.7)');
      grad.addColorStop(1, 'rgba(0,20,80,0)');
    }
    ctx.fillStyle = grad;
    ctx.beginPath();
    ctx.arc(p.x, p.y, 26 * pulse, 0, Math.PI * 2);
    ctx.fill();
    ctx.fillStyle = '#fff';
    ctx.font = 'bold 16px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(p.q > 0 ? 'N' : 'S', p.x, p.y);
  }

  if (mouseCharge !== 0 && mx > 0 && my > 0) {
    const col = mouseCharge > 0 ? 'rgba(255,180,80,0.9)' : 'rgba(180,80,255,0.9)';
    ctx.strokeStyle = col;
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.arc(mx, my, 12, 0, Math.PI * 2);
    ctx.stroke();
    ctx.fillStyle = col;
    ctx.font = 'bold 14px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(mouseCharge > 0 ? '+' : '-', mx, my);
  }

  ctx.fillStyle = 'rgba(200,210,230,0.6)';
  ctx.font = '12px sans-serif';
  ctx.textAlign = 'left';
  const label = mouseCharge === 0 ? 'click: enable probe' : mouseCharge > 0 ? 'probe: + (click to flip)' : 'probe: - (click to disable)';
  ctx.fillText(label, 10, h - 12);
}