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;

// Single accent color used for the operating point + slider handle.
// Everything else is zinc-gray, so the eye lands on one thing.
const ACCENT = '#ffcf66';

// 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 = {};

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';
}

// Small corner glyph: R—L—C strip so viewers know what's being modeled.
// No animated dot, no labels, no AC source. Just a hint.
function drawCornerGlyph(ctx) {
  const x = 12, y = 14, w = 110, h = 18;
  ctx.strokeStyle = '#3a4150'; ctx.lineWidth = 1;
  // baseline wire
  const wy = y + h / 2;
  ctx.beginPath();
  ctx.moveTo(x, wy); ctx.lineTo(x + w, wy); ctx.stroke();
  // tiny resistor zig-zag
  ctx.beginPath();
  ctx.moveTo(x + 6, wy);
  for (let i = 0; i < 6; i++) {
    ctx.lineTo(x + 6 + (i + 0.5) * 3, wy + (i % 2 === 0 ? -3 : 3));
  }
  ctx.lineTo(x + 24, wy);
  ctx.stroke();
  // tiny inductor loops
  ctx.beginPath();
  for (let i = 0; i < 3; i++) {
    const cx = x + 36 + i * 6;
    ctx.arc(cx, wy, 3, Math.PI, 0, false);
  }
  ctx.stroke();
  // tiny capacitor plates
  ctx.beginPath();
  ctx.moveTo(x + 70, wy - 5); ctx.lineTo(x + 70, wy + 5);
  ctx.moveTo(x + 74, wy - 5); ctx.lineTo(x + 74, wy + 5);
  ctx.stroke();
}

// HUD — all numeric readouts live here, monospace, single color.
function drawHUD(ctx) {
  const I = currentMag(freq);
  const ph = impedance(freq).phase;
  ctx.fillStyle = '#9aa3b8';
  ctx.font = '11px monospace';
  ctx.textAlign = 'right';
  ctx.textBaseline = 'alphabetic';
  const xR = W - 12;
  let y = 22;
  const line = (s) => { ctx.fillText(s, xR, y); y += 14; };
  line(`R = ${fmtR(R)}`);
  line(`L = ${fmtL(L)}`);
  line(`C = ${fmtC(C)}`);
  line(`f  = ${fmtF(freq)}`);
  line(`f₀ = ${fmtF(f0())}`);
  line(`|I|= ${(I * 1000).toFixed(3)} mA`);
  line(`φ  = ${(ph * 180 / Math.PI).toFixed(1)}°`);
  line(`Q  = ${Qfactor().toFixed(2)}`);
}

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) {
  // Plot occupies most of the canvas now that schematic + dial are gone.
  const px = 60, py = 64, pw = W - 80, ph = H - py - 96;
  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 — quiet gray, not an accent.
  const tres = fToT(f0());
  if (tres > 0 && tres < 1) {
    const gx = px + tres * pw;
    ctx.strokeStyle = '#5a6478'; ctx.setLineDash([4, 3]);
    ctx.beginPath(); ctx.moveTo(gx, py); ctx.lineTo(gx, py + ph); ctx.stroke();
    ctx.setLineDash([]);
    ctx.fillStyle = '#9aa3b8'; ctx.font = '10px monospace'; ctx.textAlign = 'center';
    ctx.fillText('f₀', gx, py - 4);
  }

  // curve — neutral gray, not cyan.
  ctx.strokeStyle = '#c8cdd8'; 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 — the ONE accent on the canvas.
  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 = ACCENT; ctx.lineWidth = 1;
    ctx.beginPath(); ctx.moveTo(opx, py); ctx.lineTo(opx, py + ph); ctx.stroke();
    ctx.fillStyle = ACCENT;
    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 = '#9aa3b8'; ctx.font = '11px monospace';
  ctx.fillText('|I(f)|  — series RLC amplitude response', px + 4, py - 6);
}

function drawSlider(ctx) {
  const sx = 60, sw = W - 80;
  const sy = H - 32;
  sliderBox = { x: sx, y: sy - 10, w: sw, h: 24 };
  ctx.fillStyle = '#15202e';
  ctx.fillRect(sx, sy, sw, 6);
  // tick at f0 — gray, no longer an accent.
  const tres = fToT(f0());
  if (tres > 0 && tres < 1) {
    const tx = sx + tres * sw;
    ctx.strokeStyle = '#5a6478'; 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 = ACCENT;
  ctx.beginPath(); ctx.arc(hx, sy + 3, 8, 0, Math.PI * 2); ctx.fill();
}

// 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) {
  // Compact strip directly below the Bode plot, above the slider.
  // Smaller than before (28px tall, narrower), monochrome zinc — no per-component tinting.
  const labels = ['R-', 'R+', 'L-', 'L+', 'C-', 'C+'];
  const bh = 28;
  const gap = 4;
  const bw = 44;
  const total = bw * labels.length + gap * (labels.length - 1);
  const x0 = (W - total) / 2;
  const y0 = H - 72;
  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;
    const mix = Math.min(1, flash / 6);
    ctx.fillStyle = mix > 0 ? '#2a3142' : '#15202e';
    ctx.fillRect(b.x, b.y, b.w, b.h);
    ctx.strokeStyle = '#3a4150';
    ctx.lineWidth = 1;
    ctx.strokeRect(b.x + 0.5, b.y + 0.5, b.w - 1, b.h - 1);
    ctx.fillStyle = '#c8cdd8';
    ctx.font = 'bold 12px 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);
  drawCornerGlyph(ctx);
  drawHUD(ctx);
  drawPlot(ctx);
  drawButtons(ctx);
  drawSlider(ctx);
}