Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

A smartphone camera flash needs around 10 watts of power to illuminate a dark room, yet its tiny battery can only safely deliver a fraction of that in a millisecond burst.

To solve this, circuits trickle-charge a **capacitor** over several seconds, storing electrostatic potential energy and dumping it all in a microsecond flash.

How much energy does that electric field actually hold, and how do we calculate it?

**Capacitance** ($C$) measures how much electric charge ($Q$) a component stores for every volt ($V$) of electrical potential across it, defined by $C = \frac{Q}{V}$.

When you push the first tiny bit of charge onto an uncharged capacitor, it encounters zero opposing voltage. But as charge builds up, the voltage rises linearly, making each subsequent charge harder to push.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
      user-select: none;
    }

    .main-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 12px;
      width: 100%;
      max-width: 580px;
      align-items: center;
    }

    @media (max-width: 480px) {
      .main-grid {
        grid-template-columns: 1fr;
      }
    }

    .card-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    .controls {
      width: 100%;
      max-width: 580px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      gap: 12px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 14px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .slider-container {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    input[type="range"] {
      flex: 1;
      accent-color: #22b7ff;
      cursor: pointer;
      height: 6px;
    }

    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .btn:active {
      background: #e2e8f0;
    }

    .stat-badge {
      font-size: 13px;
      font-weight: 700;
      color: #0284c7;
      background: #e0f2fe;
      padding: 3px 8px;
      border-radius: 6px;
      white-space: nowrap;
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="card-panel">
      <svg viewBox="0 0 220 180" id="graphSvg">
        
        <line x1="35" y1="145" x2="205" y2="145" stroke="#94a3b8" stroke-width="1.5" />
        <line x1="35" y1="145" x2="35" y2="15" stroke="#94a3b8" stroke-width="1.5" />
        
        
        <polygon points="205,142 210,145 205,148" fill="#94a3b8" />
        <polygon points="32,15 35,10 38,15" fill="#94a3b8" />

        
        <text x="205" y="160" font-size="11" fill="#64748b" text-anchor="end" font-weight="600">Charge (Q)</text>
        <text x="30" y="14" font-size="11" fill="#64748b" text-anchor="end" font-weight="600">V</text>

        
        <rect id="fullBox" x="35" y="145" width="0" height="0" fill="none" stroke="#cbd5e1" stroke-dasharray="3,3" stroke-width="1.2" />

        
        <polygon id="energyArea" points="35,145 35,145 35,145" fill="rgba(34, 183, 255, 0.28)" stroke="#22b7ff" stroke-width="2" />

        
        <rect id="strip" x="35" y="145" width="6" height="0" fill="#0284c7" opacity="0.6" />

        
        <text id="areaLabel" x="75" y="125" font-size="11" fill="#0369a1" font-weight="700" opacity="0">Area = ½QV</text>

        
        <line id="vDash" x1="35" y1="145" x2="35" y2="145" stroke="#64748b" stroke-dasharray="2,2" stroke-width="1" />
        <circle id="graphPoint" cx="35" cy="145" r="4" fill="#0284c7" />
      </svg>
    </div>

    
    <div class="card-panel">
      <svg viewBox="0 0 160 180" id="capSvg">
        
        <rect x="30" y="35" width="100" height="14" rx="4" fill="#ef4444" opacity="0.9" />
        <text x="80" y="46" font-size="10" fill="#ffffff" font-weight="bold" text-anchor="middle">+ Q</text>

        
        <rect x="30" y="125" width="100" height="14" rx="4" fill="#3b82f6" opacity="0.9" />
        <text x="80" y="136" font-size="10" fill="#ffffff" font-weight="bold" text-anchor="middle">- Q</text>

        
        <g id="fieldLines" stroke="#94a3b8" stroke-width="1.2" opacity="0.2">
          <path d="M 45 49 L 45 125" stroke-dasharray="3,3" />
          <path d="M 62 49 L 62 125" stroke-dasharray="3,3" />
          <path d="M 80 49 L 80 125" stroke-dasharray="3,3" />
          <path d="M 98 49 L 98 125" stroke-dasharray="3,3" />
          <path d="M 115 49 L 115 125" stroke-dasharray="3,3" />
          
          <polygon points="42,88 45,94 48,88" fill="#94a3b8" />
          <polygon points="59,88 62,94 65,88" fill="#94a3b8" />
          <polygon points="77,88 80,94 83,88" fill="#94a3b8" />
          <polygon points="95,88 98,94 101,88" fill="#94a3b8" />
          <polygon points="112,88 115,94 118,88" fill="#94a3b8" />
        </g>

        
        <text x="80" y="165" font-size="11" fill="#475569" font-weight="700" text-anchor="middle" id="capVoltsText">0.0 V</text>
      </svg>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="playBtn">▶ Auto</button>
    <div class="slider-container">
      <input type="range" id="qSlider" min="0" max="100" value="0" />
    </div>
    <div class="stat-badge" id="energyBadge">E = 0.00 J</div>
  </div>

  <script>
    const slider = document.getElementById('qSlider');
    const playBtn = document.getElementById('playBtn');
    const energyArea = document.getElementById('energyArea');
    const fullBox = document.getElementById('fullBox');
    const strip = document.getElementById('strip');
    const graphPoint = document.getElementById('graphPoint');
    const vDash = document.getElementById('vDash');
    const areaLabel = document.getElementById('areaLabel');
    const capVoltsText = document.getElementById('capVoltsText');
    const energyBadge = document.getElementById('energyBadge');
    const fieldLines = document.getElementById('fieldLines');

    const originX = 35;
    const originY = 145;
    const maxGraphW = 150;
    const maxGraphH = 120;

    let playing = false;
    let animId = null;

    function update(val) {
      const qNorm = val / 100;
      const curX = originX + qNorm * maxGraphW;
      const curY = originY - qNorm * maxGraphH;

      // Triangle area: (originX, originY) -> (curX, originY) -> (curX, curY)
      energyArea.setAttribute('points', `${originX},${originY} ${curX},${originY} ${curX},${curY}`);

      // Dashed full QV box
      fullBox.setAttribute('x', originX);
      fullBox.setAttribute('y', curY);
      fullBox.setAttribute('width', curX - originX);
      fullBox.setAttribute('height', originY - curY);

      // Point marker & horizontal dash to V-axis
      graphPoint.setAttribute('cx', curX);
      graphPoint.setAttribute('cy', curY);
      vDash.setAttribute('x1', originX);
      vDash.setAttribute('y1', curY);
      vDash.setAttribute('x2', curX);
      vDash.setAttribute('y2', curY);

      // Incremental strip at current Q
      const stripW = Math.min(6, curX - originX);
      strip.setAttribute('x', Math.max(originX, curX - stripW));
      strip.setAttribute('y', curY);
      strip.setAttribute('width', stripW);
      strip.setAttribute('height', originY - curY);

      // Label visibility
      if (qNorm > 0.45) {
        areaLabel.setAttribute('opacity', '1');
        areaLabel.setAttribute('x', originX + (curX - originX) * 0.4);
        areaLabel.setAttribute('y', originY - (originY - curY) * 0.25);
      } else {
        areaLabel.setAttribute('opacity', '0');
      }

      // Capacitor electric field lines opacity
      fieldLines.setAttribute('opacity', 0.15 + qNorm * 0.85);

      // Math calculations for display
      const volts = (qNorm * 12).toFixed(1);
      const energy = (0.5 * qNorm * (qNorm * 12) * 0.5).toFixed(2);

      capVoltsText.textContent = `${volts} V`;
      energyBadge.textContent = `E = ½QV = ${energy} J`;
    }

    slider.addEventListener('input', (e) => {
      if (playing) stopPlay();
      update(parseFloat(e.target.value));
    });

    function stopPlay() {
      playing = false;
      playBtn.textContent = '▶ Auto';
      if (animId) cancelAnimationFrame(animId);
    }

    function startPlay() {
      playing = true;
      playBtn.textContent = '⏸ Pause';
      let dir = 1;

      function step() {
        if (!playing) return;
        let v = parseFloat(slider.value) + dir * 0.6;
        if (v >= 100) {
          v = 100;
          dir = -1;
        } else if (v <= 0) {
          v = 0;
          dir = 1;
        }
        slider.value = v;
        update(v);
        animId = requestAnimationFrame(step);
      }
      animId = requestAnimationFrame(step);
    }

    playBtn.addEventListener('click', () => {
      if (playing) stopPlay();
      else startPlay();
    });

    // Initial state
    update(0);
    // Auto-advance slowly once for initial comprehension
    setTimeout(startPlay, 600);
  </script>
</body>
</html>

Because the voltage increases linearly from $0$ to $V$, the average potential during charging is simply $\frac{1}{2}V$. The total **stored energy** ($E$) is the work done: $E = \frac{1}{2}QV$.

Substituting $Q = CV$ gives the standard design formula: $$E = \frac{1}{2}CV^2 = \frac{Q^2}{2C}$$

What happens to the stored energy when you double the operating voltage of a power supply capacitor?

Suppose a studio strobe flash uses a $470\text{ }\mu\text{F}$ capacitor charged to $300\text{ V}$. Let's calculate the total stored energy delivered to the flash tube.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css" />
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
    body {
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      user-select: none;
    }
    .controls-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      justify-content: space-between;
    }
    .preset-btns {
      display: flex;
      gap: 6px;
    }
    .btn-preset {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 5px 10px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, box-shadow 0.2s;
    }
    .btn-preset.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #0ea5e9;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }
    .slider-group {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #f8fafc;
      padding: 4px 10px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      font-size: 13px;
      font-weight: 600;
    }
    .slider-group input[type="range"] {
      width: 100px;
      accent-color: #22b7ff;
      cursor: pointer;
    }
    .main-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 12px;
      align-items: stretch;
    }
    @media (max-width: 500px) {
      .main-grid {
        grid-template-columns: 1fr;
      }
    }
    .graph-panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }
    .stats-panel {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 8px;
    }
    .calc-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .energy-display {
      background: linear-gradient(135deg, #0284c7, #22b7ff);
      color: #ffffff;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.25);
    }
    .energy-val {
      font-size: 26px;
      font-weight: 800;
      letter-spacing: -0.5px;
    }
    .energy-label {
      font-size: 12px;
      font-weight: 600;
      opacity: 0.9;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .scaling-pill {
      font-size: 12px;
      font-weight: 700;
      background: #ffffff;
      color: #0284c7;
      padding: 3px 8px;
      border-radius: 20px;
      margin-top: 4px;
    }
    .sub-math {
      font-size: 13px;
      color: #475569;
    }
  </style>
</head>
<body>

  <div class="controls-row">
    <div class="preset-btns">
      <button class="btn-preset" id="p150" onclick="setV(150)">150 V</button>
      <button class="btn-preset active" id="p300" onclick="setV(300)">300 V</button>
      <button class="btn-preset" id="p450" onclick="setV(450)">450 V</button>
    </div>
    <div class="slider-group">
      <span id="vLabel">V = 300 V</span>
      <input type="range" id="vSlider" min="50" max="500" step="10" value="300" oninput="onSlide(this.value)">
    </div>
  </div>

  <div class="main-grid">
    <div class="graph-panel">
      <svg viewBox="0 0 240 180" id="graphSvg">
        
        <line x1="35" y1="145" x2="225" y2="145" stroke="#cbd5e1" stroke-width="1.5" />
        <line x1="35" y1="15" x2="35" y2="145" stroke="#cbd5e1" stroke-width="1.5" />
        
        
        <polygon points="35,145 220,145 220,25" fill="none" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="3,3" />

        
        <polygon id="energyArea" points="35,145 146,145 146,73" fill="rgba(34, 183, 255, 0.3)" stroke="#0284c7" stroke-width="2" />
        
        
        <line id="vProj" x1="146" y1="145" x2="146" y2="73" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="3,3" />
        <line id="qProj" x1="35" y1="73" x2="146" y2="73" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="3,3" />

        
        <circle id="dot" cx="146" cy="73" r="4" fill="#0284c7" />

        
        <text x="225" y="160" font-size="11" font-weight="700" fill="#64748b" text-anchor="end">V (Volts)</text>
        <text x="30" y="18" font-size="11" font-weight="700" fill="#64748b" text-anchor="end">Q (C)</text>

        
        <text id="vText" x="146" y="158" font-size="10" font-weight="600" fill="#0284c7" text-anchor="middle">300V</text>
        <text id="qText" x="30" y="76" font-size="10" font-weight="600" fill="#0284c7" text-anchor="end">0.14 C</text>

        
        <text id="areaLabel" x="90" y="125" font-size="11" font-weight="800" fill="#0284c7">Area = E</text>
      </svg>
    </div>

    <div class="stats-panel">
      <div class="calc-card">
        <div id="formulaKaTeX"></div>
        <div class="sub-math" id="subKaTeX"></div>
      </div>

      <div class="energy-display">
        <span class="energy-label">Stored Energy</span>
        <span class="energy-val" id="eVal">21.15 J</span>
        <span class="scaling-pill" id="scaleRatio">4.0× vs 150 V</span>
      </div>
    </div>
  </div>

  <script>
    const C = 470e-6; // 470 uF
    const vSlider = document.getElementById('vSlider');
    const vLabel = document.getElementById('vLabel');
    const energyArea = document.getElementById('energyArea');
    const vProj = document.getElementById('vProj');
    const qProj = document.getElementById('qProj');
    const dot = document.getElementById('dot');
    const vText = document.getElementById('vText');
    const qText = document.getElementById('qText');
    const areaLabel = document.getElementById('areaLabel');
    const eVal = document.getElementById('eVal');
    const scaleRatio = document.getElementById('scaleRatio');

    function update(V) {
      V = Number(V);
      vSlider.value = V;
      vLabel.textContent = `V = ${V} V`;

      // Preset buttons active state
      [150, 300, 450].forEach(p => {
        const btn = document.getElementById(`p${p}`);
        if (btn) btn.classList.toggle('active', V === p);
      });

      const Q = C * V;
      const E = 0.5 * C * V * V;

      // Coordinate mapping
      // V: 0 -> 500V maps to x: 35 -> 220 (width = 185)
      // Q: 0 -> 0.235C (500V*C) maps to y: 145 -> 25 (height = 120)
      const x = 35 + (V / 500) * 185;
      const y = 145 - (V / 500) * 120;

      energyArea.setAttribute('points', `35,145 ${x},145 ${x},${y}`);
      vProj.setAttribute('x1', x);
      vProj.setAttribute('x2', x);
      vProj.setAttribute('y2', y);

      qProj.setAttribute('y1', y);
      qProj.setAttribute('x2', x);
      qProj.setAttribute('y2', y);

      dot.setAttribute('cx', x);
      dot.setAttribute('cy', y);

      vText.setAttribute('x', x);
      vText.textContent = `${V}V`;

      qText.setAttribute('y', Math.min(140, y + 4));
      qText.textContent = `${Q.toFixed(3)}C`;

      // Position area label inside triangle
      const lx = 35 + (x - 35) * 0.55;
      const ly = 145 - (145 - y) * 0.3;
      areaLabel.setAttribute('x', Math.max(45, lx - 20));
      areaLabel.setAttribute('y', Math.min(140, ly));

      // KaTeX formulas
      if (window.katex) {
        katex.render("E = \\frac{1}{2} C V^2", document.getElementById('formulaKaTeX'), { throwOnError: false });
        katex.render(`= \\frac{1}{2}(470\\mu\\text{F})(${V}\\text{V})^2`, document.getElementById('subKaTeX'), { throwOnError: false });
      }

      // Energy result & scaling multiplier
      eVal.textContent = `${E.toFixed(2)} J`;
      const baseE = 0.5 * C * 150 * 150;
      const ratio = (E / baseE).toFixed(1);
      scaleRatio.textContent = `${ratio}× energy vs 150 V`;
    }

    function setV(val) {
      update(val);
    }

    function onSlide(val) {
      update(val);
    }

    window.addEventListener('DOMContentLoaded', () => update(300));
    update(300);
  </script>
</body>
</html>

Notice that doubling voltage quadruples the energy because energy scales with $V^2$, making high-voltage capacitors far more energy-dense than low-voltage ones.

Now for a puzzle: if the capacitor stores $\frac{1}{2}CV^2$, how much energy did the battery actually supply to charge it?

A constant voltage source $V_{\text{supply}}$ moves a total charge $Q = CV$ out of its terminals, expending total energy equal to $E_{\text{battery}} = Q \times V_{\text{supply}} = CV^2$.

Yet the capacitor stores only $\frac{1}{2}CV^2$. Exactly **50% of the energy** supplied by the battery is lost as heat in the circuit resistance or as electromagnetic radiation.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      user-select: none;
    }

    .controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 480px;
      gap: 8px;
    }

    .btn-group {
      display: flex;
      gap: 6px;
    }

    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }

    .btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    .slider-row {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }

    .slider-row input[type="range"] {
      flex: 1;
      accent-color: #0284c7;
      cursor: pointer;
    }

    .svg-container {
      width: 100%;
      max-width: 480px;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
    }

    svg {
      display: block;
      width: 100%;
      height: auto;
    }

    .energy-bar-wrap {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .energy-bar {
      display: flex;
      width: 100%;
      height: 22px;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid #cbd5e1;
      font-size: 11px;
      font-weight: 700;
      color: #ffffff;
      text-align: center;
      line-height: 22px;
    }

    .bar-stored {
      background: #0284c7;
      transition: width 0.1s linear;
    }

    .bar-lost {
      background: #f97316;
      transition: width 0.1s linear;
    }

    .legend {
      display: flex;
      justify-content: space-around;
      width: 100%;
      font-size: 12px;
      font-weight: 600;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 3px;
    }
    .dot-stored { background: #0284c7; }
    .dot-lost { background: #f97316; }
    .dot-total { background: #64748b; }
  </style>
</head>
<body>

  <div class="controls">
    <div class="btn-group">
      <button class="btn active" id="btnPlay">▶ Charge</button>
      <button class="btn" id="btnReset">↺ Reset</button>
    </div>
    <div class="btn-group">
      <button class="btn active" id="btnR1">R = 10 Ω</button>
      <button class="btn" id="btnR2">R = 100 Ω</button>
    </div>
  </div>

  <div class="slider-row">
    <span>0%</span>
    <input type="range" id="chargeSlider" min="0" max="100" value="0" step="0.5">
    <span>100%</span>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 400 270">
      
      <line x1="50" y1="210" x2="360" y2="210" stroke="#94a3b8" stroke-width="1.5" />
      <line x1="50" y1="30" x2="50" y2="210" stroke="#94a3b8" stroke-width="1.5" />

      
      <line x1="330" y1="50" x2="330" y2="210" stroke="#cbd5e1" stroke-dasharray="4,4" />
      <line x1="50" y1="50" x2="330" y2="50" stroke="#cbd5e1" stroke-dasharray="4,4" />

      
      <polygon id="polyLost" points="50,210 50,210 50,210" fill="#fed7aa" stroke="#f97316" stroke-width="1.5" />
      <polygon id="polyStored" points="50,210 50,210 50,210" fill="#bae6fd" stroke="#0284c7" stroke-width="1.5" />

      
      <line x1="50" y1="210" x2="330" y2="50" stroke="#0284c7" stroke-width="2.5" stroke-dasharray="2 0" />

      
      <line id="lineV" x1="50" y1="210" x2="50" y2="210" stroke="#64748b" stroke-dasharray="3,3" />
      <line id="lineQ" x1="50" y1="210" x2="50" y2="210" stroke="#64748b" stroke-dasharray="3,3" />
      <circle id="point" cx="50" cy="210" r="4.5" fill="#0284c7" />

      
      <text x="360" y="225" font-size="12" font-weight="700" fill="#475569" text-anchor="end">Charge Q</text>
      <text x="45" y="24" font-size="12" font-weight="700" fill="#475569" text-anchor="start">Voltage V</text>
      <text x="330" y="225" font-size="11" fill="#64748b" text-anchor="middle">Q_max</text>
      <text x="42" y="54" font-size="11" fill="#64748b" text-anchor="end">V_bat</text>

      
      <text id="txtStored" x="180" y="175" font-size="12" font-weight="700" fill="#0369a1" text-anchor="middle">½QV Stored</text>
      <text id="txtLost" x="120" y="95" font-size="12" font-weight="700" fill="#c2410c" text-anchor="middle">½QV Heat Loss</text>
    </svg>
  </div>

  <div class="energy-bar-wrap">
    <div class="legend">
      <div class="legend-item"><div class="dot dot-stored"></div><span>Capacitor: ½CV² (50%)</span></div>
      <div class="legend-item"><div class="dot dot-lost"></div><span>Resistor Heat: ½CV² (50%)</span></div>
    </div>
    <div class="energy-bar">
      <div id="barStored" class="bar-stored" style="width: 0%;">0%</div>
      <div id="barLost" class="bar-lost" style="width: 0%;">0%</div>
    </div>
  </div>

  <script>
    const slider = document.getElementById('chargeSlider');
    const btnPlay = document.getElementById('btnPlay');
    const btnReset = document.getElementById('btnReset');
    const btnR1 = document.getElementById('btnR1');
    const btnR2 = document.getElementById('btnR2');

    const polyStored = document.getElementById('polyStored');
    const polyLost = document.getElementById('polyLost');
    const lineV = document.getElementById('lineV');
    const lineQ = document.getElementById('lineQ');
    const point = document.getElementById('point');
    const barStored = document.getElementById('barStored');
    const barLost = document.getElementById('barLost');

    let animId = null;
    let rate = 0.8; // charging speed dependent on R

    function updateDiagram(pct) {
      const qNorm = pct / 100;
      const x0 = 50, y0 = 210;
      const xMax = 330, yBat = 50;

      const currX = x0 + qNorm * (xMax - x0);
      const currY = y0 - qNorm * (y0 - yBat);

      // Stored Energy Area: Triangle under V(q) curve
      polyStored.setAttribute('points', `${x0},${y0} ${currX},${y0} ${currX},${currY}`);

      // Dissipated Heat Area: Rectangle (0 to currX, yBat to y0) minus triangle
      // Points: (x0, yBat) -> (currX, yBat) -> (currX, currY) -> (x0, y0) -> (x0, yBat)
      polyLost.setAttribute('points', `${x0},${y0} ${currX},${currY} ${currX},${yBat} ${x0},${yBat}`);

      // Point and guide lines
      point.setAttribute('cx', currX);
      point.setAttribute('cy', currY);

      lineV.setAttribute('x1', x0);
      lineV.setAttribute('y1', yBat);
      lineV.setAttribute('x2', currX);
      lineV.setAttribute('y2', yBat);

      lineQ.setAttribute('x1', currX);
      lineQ.setAttribute('y1', y0);
      lineQ.setAttribute('x2', currX);
      lineQ.setAttribute('y2', yBat);

      // Energy Bar breakdown (Always 50/50 ratio of total supplied so far)
      const storedPct = (pct * 0.5).toFixed(1);
      const lostPct = (pct * 0.5).toFixed(1);

      barStored.style.width = storedPct + '%';
      barLost.style.width = lostPct + '%';

      barStored.textContent = pct > 20 ? `${storedPct}%` : '';
      barLost.textContent = pct > 20 ? `${lostPct}%` : '';
    }

    function animate() {
      let val = parseFloat(slider.value);
      if (val < 100) {
        val = Math.min(100, val + rate);
        slider.value = val;
        updateDiagram(val);
        animId = requestAnimationFrame(animate);
      } else {
        btnPlay.textContent = '▶ Charge';
      }
    }

    btnPlay.addEventListener('click', () => {
      if (animId) {
        cancelAnimationFrame(animId);
        animId = null;
        btnPlay.textContent = '▶ Charge';
      } else {
        if (parseFloat(slider.value) >= 100) slider.value = 0;
        btnPlay.textContent = '⏸ Pause';
        animId = requestAnimationFrame(animate);
      }
    });

    btnReset.addEventListener('click', () => {
      if (animId) cancelAnimationFrame(animId);
      animId = null;
      btnPlay.textContent = '▶ Charge';
      slider.value = 0;
      updateDiagram(0);
    });

    btnR1.addEventListener('click', () => {
      btnR1.classList.add('active');
      btnR2.classList.remove('active');
      rate = 0.8;
    });

    btnR2.addEventListener('click', () => {
      btnR2.classList.add('active');
      btnR1.classList.remove('active');
      rate = 0.25;
    });

    slider.addEventListener('input', (e) => {
      if (animId) {
        cancelAnimationFrame(animId);
        animId = null;
        btnPlay.textContent = '▶ Charge';
      }
      updateDiagram(parseFloat(e.target.value));
    });

    // Initialize
    updateDiagram(0);
  </script>
</body>
</html>

Many designers assume that using a smaller resistor will reduce energy waste. However, integrating the power dissipated in the resistor ($P = I^2 R$) from $t = 0$ to $\infty$ proves that $R$ completely cancels out of the total energy integral.

A smaller resistor allows a higher peak current over a shorter time, while a larger resistor draws a lower current over a longer time — both dissipate precisely $\frac{1}{2}CV^2$ as heat.

In high-efficiency power electronics, engineers bypass this fixed 50% loss by using switched-mode inductor circuits or multi-step voltage charging instead of direct resistive charging.

electronics

Electrostatic Energy Storage in Capacitors. Calculate stored electrical energy in capacitors using E = ½ × C × V² and analyse charging energy loss.

A-Level Physics: Energy Stored in a Capacitor

Capacitor Lab: Basics - Stored Energy and Charge Simulation

Isaac Physics: Capacitors and Energy in Electric Fields

For Year 13 (A2 Level) mastery, deliver this topic by linking macroscopic energy accounting with calculus and graphical integration. Start with a $Q-V$ graph to deduce $E = \frac{1}{2}QV$ via the triangular area beneath the curve. Contrast this directly with the battery's energy output ($W = QV$) to prompt the driving question: 'Where did the other half of the energy go?'. Follow up with an analytic derivation of $E_{\text{loss}} = \int I^2 R\, \mathrm{d}t$ to prove to students that charging energy loss is invariant with respect to $R$. Connect this concept to real-world power electronics and energy efficiency in energy storage buffers and pulsed power systems.

Electrostatic Energy Storage in Capacitors

The Energy in an Electric Field

Worked Example: Energy Scaling