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

Every wall socket in your home delivers electricity that completely reverses its direction dozens of times each second. Why don't our appliances flicker out of control?

The answer lies in the smooth, continuous geometry of the **sine wave**, which allows voltage and current to oscillate without sudden destructive jolts.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive Oscilloscope - AC Waveform</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      min-height: 100vh;
      background: #f8fafc;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      user-select: none;
      padding: 12px 8px;
    }
    .main-wrapper {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .scope-container {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 10;
      min-height: 220px;
      max-height: 380px;
      background: #0f172a;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.7);
      cursor: crosshair;
      touch-action: none;
    }
    canvas {
      width: 100%;
      height: 100%;
      display: block;
    }
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: 8px;
      flex-wrap: wrap;
    }
    .btn {
      background: #ffffff;
      color: #1e2945;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 7px 14px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.15s, border-color 0.15s;
    }
    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .btn:active {
      background: #e2e8f0;
    }
    .status-pill {
      font-size: 12px;
      font-weight: 600;
      color: #0284c7;
      background: #e0f2fe;
      padding: 6px 12px;
      border-radius: 20px;
      border: 1px solid #bae6fd;
      white-space: nowrap;
      text-align: right;
    }
    .tooltip {
      position: absolute;
      display: none;
      background: rgba(15, 23, 42, 0.95);
      border: 1px solid #0284c7;
      color: #f8fafc;
      font-size: 11px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      padding: 4px 8px;
      border-radius: 4px;
      pointer-events: none;
      transform: translate(-50%, -130%);
      white-space: nowrap;
      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
      z-index: 10;
    }
    @media (max-width: 380px) {
      .btn {
        padding: 5px 10px;
        font-size: 12px;
      }
      .status-pill {
        font-size: 11px;
        padding: 5px 8px;
      }
    }
  </style>
</head>
<body>

  <div class="main-wrapper">
    <div class="scope-container" id="scope">
      <canvas id="canvas"></canvas>
      <div class="tooltip" id="tooltip"></div>
    </div>

    <div class="controls">
      <button class="btn" id="playBtn" aria-label="Toggle animation">
        <span id="btnIcon">⏸</span> <span id="btnText">Freeze Wave</span>
      </button>
      <div class="status-pill" id="instantV">v(t) = +0.00 V</div>
    </div>
  </div>

  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const scope = document.getElementById('scope');
    const tooltip = document.getElementById('tooltip');
    const playBtn = document.getElementById('playBtn');
    const btnIcon = document.getElementById('btnIcon');
    const btnText = document.getElementById('btnText');
    const instantV = document.getElementById('instantV');

    let width = 0;
    let height = 0;
    let isPlaying = true;
    let phase = 0;
    let mouseX = null;
    let mouseY = null;
    let isHovering = false;

    const Vp_val = 3.0; // Peak 3.0V for scale

    function resize() {
      const dpr = window.devicePixelRatio || 1;
      const rect = scope.getBoundingClientRect();
      width = rect.width;
      height = rect.height;
      canvas.width = Math.round(width * dpr);
      canvas.height = Math.round(height * dpr);
      ctx.resetTransform();
      ctx.scale(dpr, dpr);
    }

    window.addEventListener('resize', resize);
    resize();

    function drawGrid() {
      const cols = 10;
      const rows = 8;
      const dx = width / cols;
      const dy = height / rows;

      ctx.strokeStyle = '#1e293b';
      ctx.lineWidth = 1;

      // Minor grid lines
      for (let i = 0; i <= cols; i++) {
        const x = Math.round(i * dx) + 0.5;
        ctx.beginPath();
        ctx.moveTo(x, 0);
        ctx.lineTo(x, height);
        ctx.stroke();
      }
      for (let j = 0; j <= rows; j++) {
        const y = Math.round(j * dy) + 0.5;
        ctx.beginPath();
        ctx.moveTo(0, y);
        ctx.lineTo(width, y);
        ctx.stroke();
      }

      // Center crosshairs (t-axis and 0V line)
      ctx.strokeStyle = '#334155';
      ctx.lineWidth = 1.5;

      const midY = Math.round(height / 2) + 0.5;
      const midX = Math.round(width / 2) + 0.5;

      ctx.beginPath();
      ctx.moveTo(0, midY);
      ctx.lineTo(width, midY);
      ctx.stroke();

      // Tick marks on axes
      ctx.strokeStyle = '#475569';
      ctx.lineWidth = 1;
      for (let i = 0; i <= cols * 5; i++) {
        const x = i * (dx / 5);
        ctx.beginPath();
        ctx.moveTo(x, midY - 2.5);
        ctx.lineTo(x, midY + 2.5);
        ctx.stroke();
      }
      for (let j = 0; j <= rows * 5; j++) {
        const y = j * (dy / 5);
        ctx.beginPath();
        ctx.moveTo(midX - 2.5, y);
        ctx.lineTo(midX + 2.5, y);
        ctx.stroke();
      }
    }

    function getWaveParams() {
      // Dynamic scaling for responsiveness
      const curPeriod = Math.min(width * 0.42, 210);
      const curAmp = Math.min(height * 0.28, 70);
      const midY = height / 2;
      return { curPeriod, curAmp, midY };
    }

    function drawWave() {
      const { curPeriod, curAmp, midY } = getWaveParams();

      ctx.save();
      ctx.shadowColor = '#0284c7';
      ctx.shadowBlur = 8;
      ctx.strokeStyle = '#38bdf8';
      ctx.lineWidth = 2.5;

      ctx.beginPath();
      for (let x = 0; x <= width; x++) {
        const angle = ((x / curPeriod) * Math.PI * 2) - phase;
        const y = midY - Math.sin(angle) * curAmp;
        if (x === 0) ctx.moveTo(x, y);
        else ctx.lineTo(x, y);
      }
      ctx.stroke();
      ctx.restore();
    }

    function drawBracket(x1, y1, x2, y2, tickDir, text, subText, textSide = 'right', fontScale = 1) {
      ctx.save();
      ctx.strokeStyle = '#94a3b8';
      ctx.fillStyle = '#f8fafc';
      ctx.lineWidth = 1.25;

      const mainSize = Math.max(9.5, Math.round(11 * fontScale));
      const subSize = Math.max(8, Math.round(9.5 * fontScale));
      const tick = 4.5 * tickDir;

      const isVertical = Math.abs(x1 - x2) < 2;

      ctx.beginPath();
      if (isVertical) {
        // Vertical bracket
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.moveTo(x1 - tick, y1);
        ctx.lineTo(x1 + tick, y1);
        ctx.moveTo(x2 - tick, y2);
        ctx.lineTo(x2 + tick, y2);
        ctx.stroke();

        const my = (y1 + y2) / 2;
        const offset = 6 * fontScale;
        const tx = textSide === 'right' ? x1 + offset : x1 - offset;

        ctx.font = `600 ${mainSize}px system-ui, sans-serif`;
        ctx.textAlign = textSide === 'right' ? 'left' : 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText(text, tx, my - (mainSize * 0.55));

        ctx.font = `400 ${subSize}px system-ui, sans-serif`;
        ctx.fillStyle = '#94a3b8';
        ctx.fillText(subText, tx, my + (subSize * 0.65));
      } else {
        // Horizontal bracket
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.moveTo(x1, y1 - tick);
        ctx.lineTo(x1, y1 + tick);
        ctx.moveTo(x2, y2 - tick);
        ctx.lineTo(x2, y2 + tick);
        ctx.stroke();

        const mx = (x1 + x2) / 2;
        const ty = y1 - 6;

        ctx.font = `600 ${mainSize}px system-ui, sans-serif`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText(text, mx, ty);

        ctx.font = `400 ${subSize}px system-ui, sans-serif`;
        ctx.fillStyle = '#94a3b8';
        ctx.fillText(subText, mx, ty + (subSize * 1.05));
      }
      ctx.restore();
    }

    function drawAnnotations() {
      const { curPeriod, curAmp, midY } = getWaveParams();
      const fontScale = Math.max(0.75, Math.min(1.0, width / 450));

      // 1. Period (T) bracket across 1 full cycle
      const tStartX = Math.max(16, width * 0.06);
      const tEndX = tStartX + curPeriod;
      const tY = Math.max(20, height * 0.15);

      drawBracket(tStartX, tY, tEndX, tY, 1, 'Period (T)', '1 Cycle', 'center', fontScale);

      // Dashed vertical guidelines for Period
      ctx.save();
      ctx.setLineDash([3, 3]);
      ctx.strokeStyle = '#334155';
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(tStartX, tY);
      ctx.lineTo(tStartX, midY + curAmp + 8);
      ctx.moveTo(tEndX, tY);
      ctx.lineTo(tEndX, midY + curAmp + 8);
      ctx.stroke();
      ctx.restore();

      // 2. Peak Voltage (Vp): Baseline to Crest
      const vpX = Math.min(width * 0.50, tEndX + 20);
      drawBracket(vpX, midY, vpX, midY - curAmp, 1, 'Peak (Vp)', '0V to Crest', 'right', fontScale);

      // 3. Peak-to-Peak (Vpp): Trough to Crest
      // Keep inside right edge with safety margin
      const vppX = width - Math.max(12, width * 0.04);
      drawBracket(vppX, midY + curAmp, vppX, midY - curAmp, 1, 'Peak-to-Peak (Vpp)', 'Trough to Crest', 'left', fontScale);
    }

    function drawCursor() {
      if (mouseX === null || !isHovering) return;

      const { curPeriod, curAmp, midY } = getWaveParams();
      const angle = ((mouseX / curPeriod) * Math.PI * 2) - phase;
      const waveY = midY - Math.sin(angle) * curAmp;
      const vInst = (Math.sin(angle) * Vp_val).toFixed(2);
      const sign = Number(vInst) >= 0 ? '+' : '';

      // Indicator circle on the wave
      ctx.save();
      ctx.fillStyle = '#38bdf8';
      ctx.shadowColor = '#38bdf8';
      ctx.shadowBlur = 10;
      ctx.beginPath();
      ctx.arc(mouseX, waveY, 4.5, 0, Math.PI * 2);
      ctx.fill();

      // Vertical tracker guideline
      ctx.setLineDash([2, 2]);
      ctx.strokeStyle = 'rgba(56, 189, 248, 0.45)';
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(mouseX, 0);
      ctx.lineTo(mouseX, height);
      ctx.stroke();
      ctx.restore();

      // Clamp tooltip position horizontally so it never overflows screen edge
      const clampedX = Math.max(55, Math.min(width - 55, mouseX));
      const clampedY = Math.max(35, waveY);

      tooltip.style.display = 'block';
      tooltip.style.left = `${clampedX}px`;
      tooltip.style.top = `${clampedY}px`;
      tooltip.innerHTML = `t: ${(mouseX / 50).toFixed(1)}ms &nbsp;|&nbsp; <b>v(t) = ${sign}${vInst}V</b>`;

      instantV.textContent = `v(t) = ${sign}${vInst} V`;
    }

    function render() {
      ctx.clearRect(0, 0, width, height);

      drawGrid();
      drawWave();
      drawAnnotations();
      drawCursor();

      if (isPlaying) {
        phase += 0.035;
      }
      requestAnimationFrame(render);
    }

    requestAnimationFrame(render);

    // Play / Freeze control
    playBtn.addEventListener('click', () => {
      isPlaying = !isPlaying;
      btnIcon.textContent = isPlaying ? '⏸' : '▶';
      btnText.textContent = isPlaying ? 'Freeze Wave' : 'Resume Wave';
    });

    // Unified pointer tracking (desktop hover & mobile touch)
    function handlePointer(e) {
      const rect = scope.getBoundingClientRect();
      mouseX = Math.max(0, Math.min(width, e.clientX - rect.left));
      mouseY = Math.max(0, Math.min(height, e.clientY - rect.top));
      isHovering = true;
    }

    scope.addEventListener('pointermove', handlePointer);
    scope.addEventListener('pointerenter', handlePointer);
    scope.addEventListener('pointerdown', handlePointer);

    scope.addEventListener('pointerleave', () => {
      isHovering = false;
      tooltip.style.display = 'none';
      instantV.textContent = 'Touch trace to probe v(t)';
    });
  </script>
</body>
</html>

How do we measure the time it takes for one full electrical cycle to complete?

The **period** ($T$), measured in seconds (s), is the duration of one complete waveform cycle from crest to crest or zero-crossing to matching zero-crossing.

The **frequency** ($f$), measured in hertz (Hz), counts how many complete cycles occur in one second, linked by the reciprocal rule $f = \frac{1}{T}$.

Once we know how fast the wave repeats in time, how do we quantify its vertical electrical strength?

The **peak voltage** ($V_p$ or $V_0$) is the maximum displacement from the zero-volt baseline to the highest crest.

The **peak-to-peak voltage** ($V_{pp}$) measures the total vertical span from the lowest trough to the highest peak, giving $V_{pp} = 2V_p$ for symmetric waveforms.

Can we write a single mathematical formula that predicts the voltage at any exact microsecond?

Because one complete cycle corresponds to a full circle of $2\pi$ radians, we define **angular frequency** as $\omega = 2\pi f = \frac{2\pi}{T}$ in radians per second ($\text{rad/s}$).

In 1831, Michael Faraday discovered electromagnetic induction, proving that rotating a wire loop through a magnetic field at uniform angular speed naturally generates an output following $v(t) = V_p \sin(\omega t)$.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Phasor and Sine Wave Relationship</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #0f172a;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      min-height: 100%;
      padding: 6px 8px;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 660px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    svg {
      width: 100%;
      height: auto;
      max-width: 100%;
      display: block;
    }
    .controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 10px 14px;
      margin-top: 4px;
      padding: 4px 0;
      width: 100%;
    }
    .btn {
      background: #f8fafc;
      border: 1px solid #94a3b8;
      border-radius: 6px;
      padding: 4px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #0f172a;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.15s ease;
    }
    .btn:hover {
      background: #e2e8f0;
    }
    .slider-group {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .slider-label {
      font-size: 13px;
      font-weight: 600;
      color: #1e293b;
      white-space: nowrap;
    }
    input[type="range"] {
      cursor: pointer;
      accent-color: #0284c7;
      width: 130px;
      height: 6px;
    }
    @media (max-width: 480px) {
      .slider-label { font-size: 12px; }
      input[type="range"] { width: 110px; }
    }
  </style>
</head>
<body>
  <div class="diagram-wrap">
    <svg viewBox="0 0 650 245" aria-label="Phasor and Sine Wave Relationship">
      <defs>
        
        <marker id="arrow-axis" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#475569" />
        </marker>
        <marker id="arrow-blue" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#0284c7" />
        </marker>
        <marker id="arrow-omega" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#0369a1" />
        </marker>
      </defs>

      
      <g id="phasor-domain">
        
        <circle cx="100" cy="125" r="72" fill="none" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="4,4" />

        
        <line x1="16" y1="125" x2="190" y2="125" stroke="#64748b" stroke-width="1.2" marker-end="url(#arrow-axis)" />
        <line x1="100" y1="216" x2="100" y2="28" stroke="#64748b" stroke-width="1.2" marker-end="url(#arrow-axis)" />

        
        <line x1="100" y1="53" x2="30" y2="53" stroke="#94a3b8" stroke-width="1" stroke-dasharray="3,3" />
        <text x="26" y="57" text-anchor="end" font-size="11" font-weight="700" fill="#334155">+Vp</text>

        <line x1="100" y1="197" x2="30" y2="197" stroke="#94a3b8" stroke-width="1" stroke-dasharray="3,3" />
        <text x="26" y="201" text-anchor="end" font-size="11" font-weight="700" fill="#334155">-Vp</text>

        
        <path d="M 158 92 A 64 64 0 0 0 138 68" fill="none" stroke="#0369a1" stroke-width="1.5" marker-end="url(#arrow-omega)" />
        <text x="162" y="82" font-size="13" font-style="italic" font-weight="700" fill="#0369a1">ω</text>

        
        <path id="angle-arc" fill="none" stroke="#ea580c" stroke-width="1.8" />
        <text id="angle-text" x="126" y="117" font-size="11" font-weight="700" fill="#ea580c">θ</text>

        
        <line id="proj-v-axis" x1="100" y1="125" x2="100" y2="125" stroke="#ea580c" stroke-width="3" stroke-linecap="round" />
        <circle id="proj-v-dot" cx="100" cy="125" r="3.5" fill="#ea580c" />

        
        <line id="phasor-vector" x1="100" y1="125" x2="172" y2="125" stroke="#0284c7" stroke-width="2.5" marker-end="url(#arrow-blue)" />

        
        <text id="phasor-vp-label" x="135" y="112" font-size="11" font-weight="700" fill="#0284c7">Peak Vp</text>
      </g>

      
      <line id="connector-line" x1="172" y1="125" x2="240" y2="125" stroke="#ea580c" stroke-width="1.2" stroke-dasharray="3,3" />

      
      <g id="time-domain">
        
        <line x1="240" y1="53" x2="590" y2="53" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,3" />
        <line x1="240" y1="197" x2="590" y2="197" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,3" />

        
        <line x1="230" y1="125" x2="605" y2="125" stroke="#64748b" stroke-width="1.2" marker-end="url(#arrow-axis)" />
        <line x1="240" y1="216" x2="240" y2="28" stroke="#64748b" stroke-width="1.2" marker-end="url(#arrow-axis)" />

        
        <text x="642" y="129" text-anchor="end" font-size="11" font-weight="700" fill="#334155">Time (t)</text>
        <text x="240" y="18" text-anchor="middle" font-size="11" font-weight="700" fill="#334155">Voltage v(t)</text>
        <text x="234" y="57" text-anchor="end" font-size="11" font-weight="700" fill="#334155">+Vp</text>
        <text x="234" y="201" text-anchor="end" font-size="11" font-weight="700" fill="#334155">-Vp</text>

        
        <path id="guide-wave" fill="none" stroke="#cbd5e1" stroke-width="1.8" />

        
        <path id="active-wave" fill="none" stroke="#0284c7" stroke-width="2.5" />

        
        <circle id="wave-dot" cx="240" cy="125" r="5" fill="#ea580c" stroke="#ffffff" stroke-width="1.5" />

        
        <text id="instant-label" x="250" y="115" font-size="11" font-weight="700" fill="#ea580c">v(t) = Vp·sin(θ)</text>
      </g>
    </svg>

    
    <div class="controls">
      <button class="btn" id="playBtn" aria-label="Play or Pause">⏸ Pause</button>
      <div class="slider-group">
        <span class="slider-label">Angle θ = ωt: <strong id="degVal" style="color:#0284c7;">0°</strong></span>
        <input type="range" id="angleSlider" min="0" max="6.28318" step="0.02" value="0" aria-label="Angle in radians">
      </div>
    </div>
  </div>

  <script>
    const R = 72;
    const cx = 100;
    const cy = 125;
    const waveStart = 240;
    const waveLength = 330; // represents 2π period
    const totalWaveAngle = 2 * Math.PI;

    let angle = 0;
    let isPlaying = true;

    const phasorVec = document.getElementById('phasor-vector');
    const phasorVpLabel = document.getElementById('phasor-vp-label');
    const angleArc = document.getElementById('angle-arc');
    const angleText = document.getElementById('angle-text');
    const projAxis = document.getElementById('proj-v-axis');
    const projDot = document.getElementById('proj-v-dot');
    const connector = document.getElementById('connector-line');
    const guideWave = document.getElementById('guide-wave');
    const activeWave = document.getElementById('active-wave');
    const waveDot = document.getElementById('wave-dot');
    const instantLabel = document.getElementById('instant-label');
    const playBtn = document.getElementById('playBtn');
    const slider = document.getElementById('angleSlider');
    const degVal = document.getElementById('degVal');

    // Build static guide wave
    let guidePath = `M ${waveStart} ${cy}`;
    for (let x = 0; x <= waveLength; x += 3) {
      const a = (x / waveLength) * totalWaveAngle;
      const y = cy - R * Math.sin(a);
      guidePath += ` L ${(waveStart + x).toFixed(1)} ${y.toFixed(1)}`;
    }
    guideWave.setAttribute('d', guidePath);

    function updateDiagram(th) {
      const px = cx + R * Math.cos(th);
      const py = cy - R * Math.sin(th);

      // 1. Update Phasor Vector
      phasorVec.setAttribute('x2', px.toFixed(1));
      phasorVec.setAttribute('y2', py.toFixed(1));

      // Phasor Peak Vp text position offset from midpoint
      const midDist = R * 0.52;
      const midX = cx + midDist * Math.cos(th) - 14 * Math.sin(th);
      const midY = cy - midDist * Math.sin(th) - 14 * Math.cos(th);
      phasorVpLabel.setAttribute('x', midX.toFixed(1));
      phasorVpLabel.setAttribute('y', midY.toFixed(1));

      // 2. Dynamic Angle Arc (radius 24) sweeps strictly from 0 to current angle
      const arcR = 24;
      if (th > 0.04) {
        const arcEndX = cx + arcR * Math.cos(th);
        const arcEndY = cy - arcR * Math.sin(th);
        const largeArc = th > Math.PI ? 1 : 0;
        angleArc.setAttribute('d', `M ${cx + arcR} ${cy} A ${arcR} ${arcR} 0 ${largeArc} 0 ${arcEndX.toFixed(1)} ${arcEndY.toFixed(1)}`);
        angleArc.style.display = 'inline';

        const textDist = 34;
        const halfAngle = th * 0.5;
        angleText.setAttribute('x', (cx + textDist * Math.cos(halfAngle)).toFixed(1));
        angleText.setAttribute('y', (cy - textDist * Math.sin(halfAngle) + 4).toFixed(1));
        angleText.style.display = 'inline';
      } else {
        angleArc.setAttribute('d', '');
        angleText.style.display = 'none';
      }

      // 3. Vertical Projection on Phasor Axis
      projAxis.setAttribute('y2', py.toFixed(1));
      projDot.setAttribute('cy', py.toFixed(1));

      // 4. Wave Position & Traced Path
      const activeX = waveStart + (th / totalWaveAngle) * waveLength;
      
      let wavePath = `M ${waveStart} ${cy}`;
      const currentSpan = (th / totalWaveAngle) * waveLength;
      for (let x = 0; x <= currentSpan; x += 3) {
        const a = (x / waveLength) * totalWaveAngle;
        const y = cy - R * Math.sin(a);
        wavePath += ` L ${(waveStart + x).toFixed(1)} ${y.toFixed(1)}`;
      }
      wavePath += ` L ${activeX.toFixed(1)} ${py.toFixed(1)}`;
      activeWave.setAttribute('d', wavePath);

      // Wave Tracker Dot
      waveDot.setAttribute('cx', activeX.toFixed(1));
      waveDot.setAttribute('cy', py.toFixed(1));

      // Connector line across domains
      connector.setAttribute('x1', px.toFixed(1));
      connector.setAttribute('y1', py.toFixed(1));
      connector.setAttribute('x2', activeX.toFixed(1));
      connector.setAttribute('y2', py.toFixed(1));

      // Instantaneous Value label positioning
      const labelX = Math.min(Math.max(activeX - 35, waveStart + 5), 485);
      const labelY = py < cy ? Math.max(py - 9, 38) : Math.min(py + 17, 222);
      instantLabel.setAttribute('x', labelX.toFixed(1));
      instantLabel.setAttribute('y', labelY.toFixed(1));

      // Degree value display & slider sync
      const degrees = Math.round((th * 180) / Math.PI) % 360;
      degVal.textContent = degrees + '°';
      slider.value = th;
    }

    let lastTime = performance.now();
    function animate(now) {
      if (isPlaying) {
        const dt = (now - lastTime) / 1000;
        angle = (angle + dt * 1.1) % (2 * Math.PI);
        updateDiagram(angle);
      }
      lastTime = now;
      requestAnimationFrame(animate);
    }
    requestAnimationFrame(animate);

    // Interaction controls
    playBtn.addEventListener('click', () => {
      isPlaying = !isPlaying;
      playBtn.textContent = isPlaying ? '⏸ Pause' : '▶ Play';
    });

    slider.addEventListener('input', (e) => {
      isPlaying = false;
      playBtn.textContent = '▶ Play';
      angle = parseFloat(e.target.value);
      updateDiagram(angle);
    });

    // Initial render
    updateDiagram(0);
  </script>
</body>
</html>

When a waveform starts offset from zero at time $t=0$, we include a **phase angle** ($\phi$), yielding the complete instantaneous equation $v(t) = V_p \sin(2\pi f t + \phi)$.

Let's put this equation to work with real numbers on a laboratory test signal.

## Worked Example: Calculating Instantaneous Voltage

Suppose a signal generator produces a sine wave with peak voltage $V_p = 12\text{ V}$ and frequency $f = 50\text{ Hz}$, with zero initial phase ($\phi = 0$). Find the period $T$ and the instantaneous voltage at $t = 2.5\text{ ms}$.

First, calculate the period: $T = \frac{1}{f} = \frac{1}{50\text{ Hz}} = 0.020\text{ s} = 20\text{ ms}$.

Next, determine the angular frequency: $\omega = 2\pi (50) = 100\pi\text{ rad/s} \approx 314.16\text{ rad/s}$.

Now evaluate $v(0.0025\text{ s}) = 12 \sin(100\pi \times 0.0025) = 12 \sin\left(\frac{\pi}{4}\right) = 12 \times \frac{\sqrt{2}}{2} \approx 8.49\text{ V}$.

Why do many students calculate $-0.05\text{ V}$ instead of $8.49\text{ V}$ on their exams?

## Common Pitfall: Radian vs. Degree Mode

The argument $\omega t = 2\pi f t$ evaluates in **radians**, not degrees. If your scientific calculator is set to DEG mode, calculating $\sin(0.785)$ gives $\approx 0.0137$ instead of the correct $\sin(0.785\text{ rad}) \approx 0.7071$.

Always switch your calculator to RAD mode before evaluating AC waveform equations, or explicitly convert the angle by multiplying radians by $\frac{180^\circ}{\pi}$.

electronics

Sinusoidal Alternating Current and Voltage Waveforms. Analyse sine wave parameters including period, frequency, peak voltage, and instantaneous voltage equations.

AQA A-Level Physics: Alternating Current & Voltage Revision Notes

Isaac Physics: Alternating Current and RMS Values

Khan Academy: AC Voltage Applied to a Resistor & RMS Values

When delivering this lesson to Year 13 students, begin with the physical rationale for RMS using Joule heating ($P = I^2 R$). Emphasize why simple arithmetic averaging over a period gives zero, leading directly to the necessity of squaring the waveform, finding its mean value, and square-rooting. Utilize oscilloscope simulations to practice converting divisions to voltage and time before transitioning to algebraic problem-solving. Reinforce that $P(t)$ never goes below zero for a pure resistor and oscillates with frequency $2f$.

Sinusoidal Alternating Current and Voltage Waveforms

Period and Frequency

Amplitude and Peak-to-Peak Voltage

The Instantaneous Equation