Series RLC Resonance: Sweeping the Drive Frequency

// Driven series RLC. Sweep f, show |I(f)| Bode-style curve and moving operating point.
// |I(omega)| = V0 / sqrt(R^2 + (omega L - 1/(omega C))^2)
// omega_0 = 1/sqrt(LC)  ; Q = (1/R) sqrt(L/C)

const V0 = 1.0;       // V (drive amplitude)
let R = 10;           // ohms
let L = 0.01;         // H
let C = 1e-6;         // F
let freq = 1000;      // Hz, user-controllable
const F_MIN = 50, F_MAX = 50000; // log range
let W, H;
let lastDown = false;

// slider rect set in drawSlider
let sliderBox = { x: 0, y: 0, w: 0, h: 0 };
let dragSlider = false;

// on-canvas tap buttons for mobile — laid out in drawButtons()
// each entry: { x, y, w, h, label, action }
let buttons = [];
// transient highlight (frames remaining) per button label, for tap feedback
const btnFlash = {};

// animated phase for showing AC current
let phaseAcc = 0;

function init({ canvas, ctx, width, height }) {
  W = width; H = height;
}

function omega0() { return 1 / Math.sqrt(L * C); }
function f0() { return omega0() / (2 * Math.PI); }
function Qfactor() { return (1 / R) * Math.sqrt(L / C); }

function impedance(f) {
  const w = 2 * Math.PI * f;
  const X = w * L - 1 / (w * C);
  const Z = Math.sqrt(R * R + X * X);
  return { Z, X, phase: Math.atan2(X, R) };
}
function currentMag(f) { return V0 / impedance(f).Z; }

function fmtR(r) {
  if (r >= 1000) return (r / 1000).toFixed(2) + ' kΩ';
  return r.toFixed(1) + ' Ω';
}
function fmtL(l) {
  if (l >= 1) return l.toFixed(2) + ' H';
  if (l >= 1e-3) return (l * 1e3).toFixed(2) + ' mH';
  return (l * 1e6).toFixed(1) + ' µH';
}
function fmtC(c) {
  if (c >= 1e-3) return (c * 1e3).toFixed(2) + ' mF';
  if (c >= 1e-6) return (c * 1e6).toFixed(2) + ' µF';
  return (c * 1e9).toFixed(1) + ' nF';
}
function fmtF(f) {
  if (f >= 1000) return (f / 1000).toFixed(2) + ' kHz';
  return f.toFixed(1) + ' Hz';
}

function drawResistor(ctx, x1, y, x2) {
  const segs = 8, amp = 6;
  const dx = (x2 - x1) / segs;
  ctx.strokeStyle = '#9aa3b8'; ctx.lineWidth = 2;
  ctx.beginPath(); ctx.moveTo(x1, y);
  for (let i = 0; i < segs; i++) {
    ctx.lineTo(x1 + dx * (i + 0.5), y + (i % 2 === 0 ? -amp : amp));
  }
  ctx.lineTo(x2, y); ctx.stroke();
}
function drawInductor(ctx, x1, y, x2) {
  const loops = 4;
  const dx = (x2 - x1) / loops;
  ctx.strokeStyle = '#9aa3b8'; ctx.lineWidth = 2;
  ctx.beginPath(); ctx.moveTo(x1, y);
  for (let i = 0; i < loops; i++) {
    const cx = x1 + dx * (i + 0.5);
    ctx.arc(cx, y, dx / 2, Math.PI, 0, false);
  }
  ctx.stroke();
}
function drawCapacitor(ctx, x, y) {
  const gap = 4;
  ctx.strokeStyle = '#9aa3b8'; ctx.lineWidth = 2;
  ctx.beginPath(); ctx.moveTo(x - 12 - gap, y - 10); ctx.lineTo(x - 12 - gap, y + 10); ctx.stroke();
  ctx.beginPath(); ctx.moveTo(x - 12 + gap, y - 10); ctx.lineTo(x - 12 + gap, y + 10); ctx.stroke();
}
function drawACSource(ctx, x, y) {
  ctx.strokeStyle = '#9aa3b8'; ctx.lineWidth = 2;
  ctx.beginPath(); ctx.arc(x, y, 16, 0, Math.PI * 2); ctx.stroke();
  ctx.beginPath();
  for (let i = -10; i <= 10; i++) {
    const t = i / 10;
    const xx = x + t * 10;
    const yy = y - Math.sin(t * Math.PI) * 5;
    if (i === -10) ctx.moveTo(xx, yy); else ctx.lineTo(xx, yy);
  }
  ctx.stroke();
  ctx.fillStyle = '#9aa3b8'; ctx.font = '10px monospace'; ctx.textAlign = 'center';
  ctx.fillText('~', x, y - 22);
}

function drawSchematic(ctx) {
  const cx = W * 0.5;
  const yMid = 100;
  const xL = 60, xR = W - 60;
  // outer loop wires
  ctx.strokeStyle = '#9aa3b8'; ctx.lineWidth = 2;
  // top
  ctx.beginPath(); ctx.moveTo(xL, yMid); ctx.lineTo(xL, 50); ctx.lineTo(xR - 40, 50); ctx.stroke();
  // right side down
  ctx.beginPath(); ctx.moveTo(xR - 40, 50); ctx.lineTo(xR - 40, 150); ctx.stroke();
  // bottom return
  ctx.beginPath(); ctx.moveTo(xR - 40, 150); ctx.lineTo(xL, 150); ctx.lineTo(xL, yMid + 16); ctx.stroke();

  drawACSource(ctx, xL, yMid);

  // R, L, C on top wire
  const segW = (xR - 80 - xL) / 3;
  const yTop = 50;
  drawResistor(ctx, xL + 20, yTop, xL + 20 + segW * 0.7);
  drawInductor(ctx, xL + 20 + segW + 10, yTop, xL + 20 + segW * 1.7 + 10);
  drawCapacitor(ctx, xL + segW * 2.5 + 30, yTop);
  // wire patches
  ctx.beginPath();
  ctx.moveTo(xL + 20 + segW * 0.7, yTop); ctx.lineTo(xL + 20 + segW + 10, yTop);
  ctx.moveTo(xL + 20 + segW * 1.7 + 10, yTop); ctx.lineTo(xL + segW * 2.5 + 30 - 16, yTop);
  ctx.moveTo(xL + segW * 2.5 + 30 - 8, yTop); ctx.lineTo(xR - 40, yTop);
  ctx.stroke();

  // labels
  ctx.fillStyle = '#9aa3b8'; ctx.font = '11px monospace'; ctx.textAlign = 'center';
  ctx.fillText(`R = ${fmtR(R)}`, xL + 20 + segW * 0.35, yTop - 14);
  ctx.fillText(`L = ${fmtL(L)}`, xL + 20 + segW * 1.2 + 10, yTop - 14);
  ctx.fillText(`C = ${fmtC(C)}`, xL + segW * 2.5 + 30, yTop - 14);
  ctx.fillText(`V₀ = ${V0.toFixed(2)} V`, xL, yMid + 36);

  // current visualization
  const I = currentMag(freq);
  const ph = impedance(freq).phase;
  ctx.fillStyle = '#e6e8ee'; ctx.font = '12px monospace'; ctx.textAlign = 'left';
  ctx.fillText(`f = ${fmtF(freq)}`, xR - 160, 50);
  ctx.fillText(`|I| = ${(I * 1000).toFixed(3)} mA`, xR - 160, 68);
  ctx.fillText(`Z   = ${impedance(freq).Z.toFixed(2)} Ω`, xR - 160, 86);
  ctx.fillStyle = '#66e0ff';
  ctx.fillText(`φ   = ${(ph * 180 / Math.PI).toFixed(1)}°`, xR - 160, 104);
  ctx.fillStyle = '#ffae66';
  ctx.fillText(`f₀  = ${fmtF(f0())}`, xR - 160, 124);
  ctx.fillText(`Q   = ${Qfactor().toFixed(2)}`, xR - 160, 142);

  // animated current dot traveling around loop, brightness by |I|
  phaseAcc += 0.05;
  const dot = (phaseAcc + Math.sin(phaseAcc) * 0.1) % 1;
  const perim = 2 * (xR - 40 - xL) + 2 * (150 - yTop);
  let target = dot * perim;
  let dx2 = 0, dy2 = 0;
  const w1 = (xR - 40 - xL), w2 = (150 - yTop), w3 = w1, w4 = w2;
  if (target < w1) { dx2 = xL + target; dy2 = yTop; }
  else if (target < w1 + w2) { dx2 = xR - 40; dy2 = yTop + (target - w1); }
  else if (target < w1 + w2 + w3) { dx2 = xR - 40 - (target - w1 - w2); dy2 = 150; }
  else { dx2 = xL; dy2 = 150 - (target - w1 - w2 - w3); }
  const brightness = Math.min(1, I / 0.1);
  ctx.fillStyle = `hsla(${50 + 130 * brightness}, 90%, 60%, ${0.4 + 0.6 * brightness})`;
  ctx.beginPath(); ctx.arc(dx2, dy2, 4, 0, Math.PI * 2); ctx.fill();
}

function logF(t) { return F_MIN * Math.pow(F_MAX / F_MIN, t); }
function fToT(f) { return Math.log(f / F_MIN) / Math.log(F_MAX / F_MIN); }

function drawPlot(ctx) {
  const px = 60, py = 200, pw = W - 90, ph = H - py - 80;
  ctx.fillStyle = '#0a0d14';
  ctx.fillRect(px, py, pw, ph);
  ctx.strokeStyle = '#1a2030'; ctx.lineWidth = 1;
  ctx.strokeRect(px + 0.5, py + 0.5, pw - 1, ph - 1);

  // sample the curve
  const N = 240;
  let maxI = 0;
  const samples = [];
  for (let i = 0; i < N; i++) {
    const t = i / (N - 1);
    const f = logF(t);
    const I = currentMag(f);
    if (I > maxI) maxI = I;
    samples.push({ t, f, I });
  }
  // gridlines (log decades)
  ctx.strokeStyle = '#15202e';
  for (let dec = 100; dec <= F_MAX; dec *= 10) {
    if (dec < F_MIN) continue;
    const tt = fToT(dec);
    const gx = px + tt * pw;
    ctx.beginPath(); ctx.moveTo(gx, py); ctx.lineTo(gx, py + ph); ctx.stroke();
    ctx.fillStyle = '#5a6478'; ctx.font = '10px monospace'; ctx.textAlign = 'center';
    ctx.fillText(fmtF(dec), gx, py + ph + 12);
  }

  // resonant frequency dashed
  const tres = fToT(f0());
  if (tres > 0 && tres < 1) {
    const gx = px + tres * pw;
    ctx.strokeStyle = '#ffae66'; ctx.setLineDash([4, 3]);
    ctx.beginPath(); ctx.moveTo(gx, py); ctx.lineTo(gx, py + ph); ctx.stroke();
    ctx.setLineDash([]);
    ctx.fillStyle = '#ffae66'; ctx.font = '10px monospace'; ctx.textAlign = 'center';
    ctx.fillText('f₀', gx, py - 4);
  }

  // curve
  ctx.strokeStyle = '#66e0ff'; ctx.lineWidth = 1.8;
  ctx.beginPath();
  for (let i = 0; i < N; i++) {
    const x = px + samples[i].t * pw;
    const y = py + ph - (ph * samples[i].I / maxI) * 0.95;
    if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
  }
  ctx.stroke();

  // operating point
  const tcur = fToT(freq);
  if (tcur >= 0 && tcur <= 1) {
    const opx = px + tcur * pw;
    const opy = py + ph - (ph * currentMag(freq) / maxI) * 0.95;
    ctx.strokeStyle = '#ffcf66'; ctx.lineWidth = 1;
    ctx.beginPath(); ctx.moveTo(opx, py); ctx.lineTo(opx, py + ph); ctx.stroke();
    ctx.fillStyle = '#ffcf66';
    ctx.beginPath(); ctx.arc(opx, opy, 4.5, 0, Math.PI * 2); ctx.fill();
  }

  // y axis labels
  ctx.fillStyle = '#5a6478'; ctx.font = '10px monospace';
  ctx.textAlign = 'right';
  ctx.fillText(`${(maxI * 1000).toFixed(1)} mA`, px - 4, py + 8);
  ctx.fillText('0', px - 4, py + ph);
  ctx.textAlign = 'left';
  ctx.fillStyle = '#e6e8ee'; ctx.font = '12px monospace';
  ctx.fillText('|I(f)|  — driven series RLC amplitude response', px + 4, py - 6);
}

function drawSlider(ctx) {
  const sx = 60, sw = W - 90;
  const sy = H - 40;
  sliderBox = { x: sx, y: sy - 8, w: sw, h: 22 };
  ctx.fillStyle = '#15202e';
  ctx.fillRect(sx, sy, sw, 6);
  // tick at f0
  const tres = fToT(f0());
  if (tres > 0 && tres < 1) {
    const tx = sx + tres * sw;
    ctx.strokeStyle = '#ffae66'; ctx.lineWidth = 1.5;
    ctx.beginPath(); ctx.moveTo(tx, sy - 5); ctx.lineTo(tx, sy + 11); ctx.stroke();
  }
  const t = fToT(freq);
  const hx = sx + Math.max(0, Math.min(1, t)) * sw;
  ctx.fillStyle = '#ffcf66';
  ctx.beginPath(); ctx.arc(hx, sy + 3, 8, 0, Math.PI * 2); ctx.fill();
  ctx.fillStyle = '#5a6478'; ctx.font = '10px monospace'; ctx.textAlign = 'left';
  ctx.fillText('drag slider to sweep f  ·  tap R/L/C buttons or keys [ ] ; \' , .', sx, sy - 12);
}

// Action handlers — same math as the keyboard shortcuts so behavior stays in sync.
const BTN_ACTIONS = {
  'R-': () => { R = Math.max(0.5, R / 1.3); },
  'R+': () => { R = Math.min(1000, R * 1.3); },
  'L-': () => { L = Math.max(1e-6, L / 1.5); },
  'L+': () => { L = Math.min(10, L * 1.5); },
  'C-': () => { C = Math.max(1e-10, C / 1.5); },
  'C+': () => { C = Math.min(1e-3, C * 1.5); },
};

function drawButtons(ctx) {
  // Row of 6 buttons between the schematic (ends ~y=160) and the plot (starts at y=200).
  // 36px tall to satisfy mobile tap ergonomics.
  const labels = ['R-', 'R+', 'L-', 'L+', 'C-', 'C+'];
  const bh = 36;
  const gap = 6;
  const margin = 12;
  const usable = W - margin * 2;
  // Cap button width so the row stays centered on wide canvases.
  const bw = Math.min(64, (usable - gap * (labels.length - 1)) / labels.length);
  const total = bw * labels.length + gap * (labels.length - 1);
  const x0 = (W - total) / 2;
  const y0 = 160;
  buttons = labels.map((label, i) => ({
    x: x0 + i * (bw + gap),
    y: y0,
    w: bw,
    h: bh,
    label,
  }));
  for (const b of buttons) {
    const flash = btnFlash[b.label] || 0;
    // tint: R = red, L = green, C = blue; "+"" slightly brighter than "-".
    const ch = b.label[0];
    const isPlus = b.label[1] === '+';
    const baseFill = ch === 'R' ? '#3a1c20' : ch === 'L' ? '#1c3a22' : '#1c2640';
    const hotFill  = ch === 'R' ? '#7a3a44' : ch === 'L' ? '#3a7a50' : '#3a5aa0';
    const mix = Math.min(1, flash / 6); // fade over 6 frames
    ctx.fillStyle = mix > 0 ? hotFill : baseFill;
    ctx.fillRect(b.x, b.y, b.w, b.h);
    ctx.strokeStyle = isPlus ? '#9aa3b8' : '#5a6478';
    ctx.lineWidth = 1;
    ctx.strokeRect(b.x + 0.5, b.y + 0.5, b.w - 1, b.h - 1);
    ctx.fillStyle = '#e6e8ee';
    ctx.font = 'bold 14px monospace';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(b.label, b.x + b.w / 2, b.y + b.h / 2);
    if (flash > 0) btnFlash[b.label] = flash - 1;
  }
  ctx.textBaseline = 'alphabetic';
}

function handleButtonClicks(clicks) {
  if (!clicks || !clicks.length) return;
  for (const c of clicks) {
    for (const b of buttons) {
      if (c.x >= b.x && c.x <= b.x + b.w && c.y >= b.y && c.y <= b.y + b.h) {
        const act = BTN_ACTIONS[b.label];
        if (act) { act(); btnFlash[b.label] = 6; }
        break;
      }
    }
  }
}

function tick({ ctx, dt, width, height, input }) {
  if (width !== W || height !== H) { W = width; H = height; }

  // Drain and dispatch tap clicks (mobile +/- buttons).
  const clicks = input.consumeClicks ? input.consumeClicks() : [];
  handleButtonClicks(clicks);

  if (input.justPressed('[')) R = Math.max(0.5, R / 1.3);
  if (input.justPressed(']')) R = Math.min(1000, R * 1.3);
  if (input.justPressed(';')) L = Math.max(1e-6, L / 1.5);
  if (input.justPressed("'")) L = Math.min(10, L * 1.5);
  if (input.justPressed(',')) C = Math.max(1e-10, C / 1.5);
  if (input.justPressed('.')) C = Math.min(1e-3, C * 1.5);

  // slider drag
  if (input.mouseDown) {
    const mx = input.mouseX, my = input.mouseY;
    if (!lastDown) {
      if (mx >= sliderBox.x && mx <= sliderBox.x + sliderBox.w &&
          my >= sliderBox.y && my <= sliderBox.y + sliderBox.h) {
        dragSlider = true;
      }
    }
    if (dragSlider) {
      const t = Math.max(0, Math.min(1, (mx - sliderBox.x) / sliderBox.w));
      freq = logF(t);
    }
  } else {
    dragSlider = false;
  }
  lastDown = input.mouseDown;

  ctx.fillStyle = '#0a0d14';
  ctx.fillRect(0, 0, W, H);
  drawSchematic(ctx);
  drawButtons(ctx);
  drawPlot(ctx);
  drawSlider(ctx);
}