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

    .controls {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 600px;
      margin-bottom: 8px;
    }

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

    .step-btn.active {
      background: #3b82f6;
      border-color: #2563eb;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(59, 130, 246, 0.35);
    }

    .canvas-container {
      position: relative;
      width: 100%;
      max-width: 600px;
      height: 190px;
      background: #f8fafc;
      overflow: hidden;
    }

    canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    .legend {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-top: 8px;
      font-size: 12px;
      font-weight: 600;
      flex-wrap: wrap;
    }

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

    .line-indicator {
      width: 18px;
      height: 3px;
      border-radius: 2px;
    }

    .bottom-bar {
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      margin-top: 6px;
    }

    .math-box {
      font-family: "Cambria Math", "Times New Roman", "DejaVu Serif", serif;
      font-size: 15px;
      min-height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1e2945;
      text-align: center;
      width: 100%;
      overflow-x: auto;
      padding: 2px 6px;
      white-space: nowrap;
    }

    .math-box i {
      font-style: italic;
      font-family: inherit;
    }

    .action-row {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .action-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

    .action-btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }

    @media (max-width: 480px) {
      .step-btn {
        font-size: 11px;
        padding: 4px 8px;
      }
      .math-box {
        font-size: 13px;
      }
      .canvas-container {
        height: 170px;
      }
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="step-btn active" data-step="0">1. Fundamental</button>
    <button class="step-btn" data-step="1">2. + 3rd Harmonic</button>
    <button class="step-btn" data-step="2">3. + 5th Harmonic</button>
    <button class="step-btn" data-step="3">4. Square Wave</button>
  </div>

  <div class="canvas-container">
    <canvas id="waveCanvas"></canvas>
  </div>

  <div class="legend">
    <div class="legend-item" id="compLegend">
      <span class="line-indicator" style="background: #94a3b8; border-top: 2px dashed #64748b; height: 0;"></span>
      <span style="color: #64748b;">Harmonic component</span>
    </div>
    <div class="legend-item">
      <span class="line-indicator" style="background: #2563eb;"></span>
      <span style="color: #1d4ed8;">Synthesized wave <i>f</i>(<i>t</i>)</span>
    </div>
  </div>

  <div class="bottom-bar">
    <div class="math-box" id="equation"></div>
    <div class="action-row">
      <button class="action-btn" id="playBtn">⏸ Pause</button>
      <button class="action-btn" id="soundBtn">🔊 Listen (440 Hz)</button>
    </div>
  </div>

  <script>
    const canvas = document.getElementById('waveCanvas');
    const ctx = canvas.getContext('2d');
    const stepBtns = document.querySelectorAll('.step-btn');
    const eqDiv = document.getElementById('equation');
    const playBtn = document.getElementById('playBtn');
    const soundBtn = document.getElementById('soundBtn');
    const compLegend = document.getElementById('compLegend');

    let currentStep = 0;
    let autoPlaying = true;
    let timeOffset = 0;
    let stepTimer = 0;
    const STEP_DURATION = 3500;

    // Harmonic configurations with clean HTML math notation
    const stepsConfig = [
      {
        harmonics: [1],
        activeHarmonic: 1,
        html: "<i>f</i>(<i>t</i>) = sin(ω<i>t</i>)"
      },
      {
        harmonics: [1, 3],
        activeHarmonic: 3,
        html: "<i>f</i>(<i>t</i>) = sin(ω<i>t</i>) + ⅓ sin(3ω<i>t</i>)"
      },
      {
        harmonics: [1, 3, 5],
        activeHarmonic: 5,
        html: "<i>f</i>(<i>t</i>) = sin(ω<i>t</i>) + ⅓ sin(3ω<i>t</i>) + ⅕ sin(5ω<i>t</i>)"
      },
      {
        harmonics: [1, 3, 5, 7, 9, 11, 13, 15, 17, 19],
        activeHarmonic: null,
        html: "<i>f</i>(<i>t</i>) = sin(ω<i>t</i>) + ⅓ sin(3ω<i>t</i>) + ⅕ sin(5ω<i>t</i>) + ⅐ sin(7ω<i>t</i>) + … ≈ Square Wave"
      }
    ];

    function setStep(index) {
      currentStep = index % stepsConfig.length;
      stepBtns.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === currentStep);
      });

      eqDiv.innerHTML = stepsConfig[currentStep].html;
      compLegend.style.visibility = stepsConfig[currentStep].activeHarmonic ? 'visible' : 'hidden';
      stepTimer = 0;
    }

    stepBtns.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        setStep(idx);
        autoPlaying = false;
        playBtn.textContent = '▶ Play';
      });
    });

    playBtn.addEventListener('click', () => {
      autoPlaying = !autoPlaying;
      playBtn.textContent = autoPlaying ? '⏸ Pause' : '▶ Play';
      if (autoPlaying) stepTimer = 0;
    });

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

    // Sound generation
    let audioCtx = null;
    let activeNodes = [];
    let isPlayingSound = false;

    function stopSound() {
      activeNodes.forEach(node => {
        try { node.stop(); } catch(e) {}
        try { node.disconnect(); } catch(e) {}
      });
      activeNodes = [];
      isPlayingSound = false;
      soundBtn.textContent = '🔊 Listen (440 Hz)';
    }

    soundBtn.addEventListener('click', () => {
      if (isPlayingSound) {
        stopSound();
        return;
      }

      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }

      stopSound();
      const baseFreq = 440;
      const masterGain = audioCtx.createGain();
      masterGain.gain.setValueAtTime(0.18, audioCtx.currentTime);
      masterGain.connect(audioCtx.destination);
      activeNodes.push(masterGain);

      const config = stepsConfig[currentStep];
      config.harmonics.forEach(n => {
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = 'sine';
        osc.frequency.value = baseFreq * n;
        gain.gain.value = 1 / n;
        osc.connect(gain);
        gain.connect(masterGain);
        osc.start();
        activeNodes.push(osc, gain);
      });

      isPlayingSound = true;
      soundBtn.textContent = '⏹ Stop Tone';
    });

    // Main Draw Loop
    let lastTime = performance.now();

    function draw(now) {
      const dt = now - lastTime;
      lastTime = now;

      if (autoPlaying) {
        stepTimer += dt;
        if (stepTimer >= STEP_DURATION) {
          stepTimer = 0;
          setStep((currentStep + 1) % stepsConfig.length);
          if (isPlayingSound) {
            soundBtn.click();
            soundBtn.click();
          }
        }
      }

      timeOffset += dt * 0.0022;

      const w = canvas.parentElement.clientWidth;
      const h = canvas.parentElement.clientHeight;
      const centerY = h / 2;
      const amplitude = h * 0.32;

      ctx.clearRect(0, 0, w, h);

      // Grid / Axes
      ctx.strokeStyle = '#e2e8f0';
      ctx.lineWidth = 1;

      // Horizontal center axis
      ctx.beginPath();
      ctx.moveTo(0, centerY);
      ctx.lineTo(w, centerY);
      ctx.stroke();

      // Dotted envelope limits (square wave bounds ±1)
      ctx.strokeStyle = '#e2e8f0';
      ctx.setLineDash([4, 4]);
      ctx.beginPath();
      ctx.moveTo(0, centerY - amplitude * (4 / Math.PI));
      ctx.lineTo(w, centerY - amplitude * (4 / Math.PI));
      ctx.moveTo(0, centerY + amplitude * (4 / Math.PI));
      ctx.lineTo(w, centerY + amplitude * (4 / Math.PI));
      ctx.stroke();
      ctx.setLineDash([]);

      const config = stepsConfig[currentStep];

      // Draw single active harmonic component if applicable
      if (config.activeHarmonic && config.activeHarmonic > 1) {
        const n = config.activeHarmonic;
        ctx.strokeStyle = '#94a3b8';
        ctx.lineWidth = 1.5;
        ctx.setLineDash([4, 4]);
        ctx.beginPath();
        for (let x = 0; x <= w; x++) {
          const theta = (x / w) * Math.PI * 4 + timeOffset;
          const y = centerY - (Math.sin(n * theta) / n) * amplitude * (4 / Math.PI);
          if (x === 0) ctx.moveTo(x, y);
          else ctx.lineTo(x, y);
        }
        ctx.stroke();
        ctx.setLineDash([]);
      }

      // Draw synthesized sum wave
      ctx.strokeStyle = '#2563eb';
      ctx.lineWidth = 3;
      ctx.lineJoin = 'round';
      ctx.lineCap = 'round';
      ctx.beginPath();

      const numPoints = w;
      for (let x = 0; x <= numPoints; x++) {
        const theta = (x / w) * Math.PI * 4 + timeOffset;
        let sum = 0;
        for (let i = 0; i < config.harmonics.length; i++) {
          const n = config.harmonics[i];
          sum += Math.sin(n * theta) / n;
        }
        const y = centerY - sum * amplitude * (4 / Math.PI);
        if (x === 0) ctx.moveTo(x, y);
        else ctx.lineTo(x, y);
      }
      ctx.stroke();

      requestAnimationFrame(draw);
    }

    // Initialize
    setStep(0);
    requestAnimationFrame(draw);
  </script>
</body>
</html>

Sound Waves, Harmonics, and Fourier Theory

<!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;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      width: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #0f172a;
      padding: 8px;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
    }
    @media (max-width: 440px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
    }
    .panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 12px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
      user-select: none;
    }
    .panel:hover {
      border-color: #94a3b8;
      background: #f1f5f9;
    }
    .panel.playing {
      border-color: #0284c7;
      background: #f0f9ff;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
    }
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .title-group {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .title {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
    }
    .badge {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 4px;
      background: #e2e8f0;
      color: #334155;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    }
    .panel.playing .badge {
      background: #bae6fd;
      color: #0369a1;
    }
    .play-btn {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #e2e8f0;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      color: #0f172a;
      cursor: pointer;
      pointer-events: none;
      transition: background 0.2s, color 0.2s;
    }
    .panel.playing .play-btn {
      background: #0284c7;
      color: #ffffff;
    }
    .plots {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .wave-svg {
      width: 100%;
      height: 44px;
      background: #ffffff;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      display: block;
    }
    .spectrum-svg {
      width: 100%;
      height: 52px;
      background: #ffffff;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      display: block;
    }
    .grid-line {
      stroke: #f1f5f9;
      stroke-dasharray: 2, 2;
    }
    .center-axis {
      stroke: #e2e8f0;
      stroke-width: 1;
    }
    .wave-path {
      fill: none;
      stroke: #0284c7;
      stroke-width: 2;
      stroke-linejoin: round;
      stroke-linecap: round;
    }
    .panel.playing .wave-path {
      stroke: #0369a1;
    }
    .bar {
      fill: #0284c7;
      rx: 2;
      transition: fill 0.2s ease;
    }
    .panel.playing .bar {
      fill: #0284c7;
      filter: drop-shadow(0 0 2px rgba(2, 132, 199, 0.4));
    }
    .absent-tick {
      stroke: #cbd5e1;
      stroke-width: 1.5;
      stroke-dasharray: 1, 2;
    }
    .axis-label {
      font-size: 8.5px;
      font-weight: 600;
      fill: #64748b;
      text-anchor: middle;
      font-family: system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <div class="grid">
    
    <div class="panel" data-type="sine">
      <div class="header">
        <div class="title-group">
          <span class="title">Sine</span>
          <span class="badge">Pure f₁</span>
        </div>
        <button class="play-btn" aria-label="Play Sine">▶</button>
      </div>
      <div class="plots">
        <svg class="wave-svg" viewBox="0 0 200 44" preserveAspectRatio="none">
          <line x1="0" y1="22" x2="200" y2="22" class="center-axis" />
          <path class="wave-path" id="sine-path" />
        </svg>
        <svg class="spectrum-svg" viewBox="0 0 200 52">
          
          <line x1="10" y1="40" x2="190" y2="40" class="center-axis" />
          
          
          <rect x="20" y="8" width="10" height="32" class="bar" />
          <text x="25" y="49" class="axis-label">f₁</text>

          
          <line x1="55" y1="36" x2="55" y2="40" class="absent-tick" />
          <text x="55" y="49" class="axis-label">2</text>

          <line x1="85" y1="36" x2="85" y2="40" class="absent-tick" />
          <text x="85" y="49" class="axis-label">3</text>

          <line x1="115" y1="36" x2="115" y2="40" class="absent-tick" />
          <text x="115" y="49" class="axis-label">4</text>

          <line x1="145" y1="36" x2="145" y2="40" class="absent-tick" />
          <text x="145" y="49" class="axis-label">5</text>

          <line x1="175" y1="36" x2="175" y2="40" class="absent-tick" />
          <text x="175" y="49" class="axis-label">6</text>
        </svg>
      </div>
    </div>

    
    <div class="panel" data-type="sawtooth">
      <div class="header">
        <div class="title-group">
          <span class="title">Sawtooth</span>
          <span class="badge">All 1/n</span>
        </div>
        <button class="play-btn" aria-label="Play Sawtooth">▶</button>
      </div>
      <div class="plots">
        <svg class="wave-svg" viewBox="0 0 200 44" preserveAspectRatio="none">
          <line x1="0" y1="22" x2="200" y2="22" class="center-axis" />
          <path class="wave-path" id="saw-path" />
        </svg>
        <svg class="spectrum-svg" viewBox="0 0 200 52">
          <line x1="10" y1="40" x2="190" y2="40" class="center-axis" />
          
          <rect x="20" y="8" width="10" height="32" class="bar" />
          <text x="25" y="49" class="axis-label">f₁</text>

          
          <rect x="50" y="24" width="10" height="16" class="bar" />
          <text x="55" y="49" class="axis-label">2</text>

          
          <rect x="80" y="29.3" width="10" height="10.7" class="bar" />
          <text x="85" y="49" class="axis-label">3</text>

          
          <rect x="110" y="32" width="10" height="8" class="bar" />
          <text x="115" y="49" class="axis-label">4</text>

          
          <rect x="140" y="33.6" width="10" height="6.4" class="bar" />
          <text x="145" y="49" class="axis-label">5</text>

          
          <rect x="170" y="34.7" width="10" height="5.3" class="bar" />
          <text x="175" y="49" class="axis-label">6</text>
        </svg>
      </div>
    </div>

    
    <div class="panel" data-type="square">
      <div class="header">
        <div class="title-group">
          <span class="title">Square</span>
          <span class="badge">Odd 1/n</span>
        </div>
        <button class="play-btn" aria-label="Play Square">▶</button>
      </div>
      <div class="plots">
        <svg class="wave-svg" viewBox="0 0 200 44" preserveAspectRatio="none">
          <line x1="0" y1="22" x2="200" y2="22" class="center-axis" />
          <path class="wave-path" id="square-path" />
        </svg>
        <svg class="spectrum-svg" viewBox="0 0 200 52">
          <line x1="10" y1="40" x2="190" y2="40" class="center-axis" />
          
          <rect x="20" y="8" width="10" height="32" class="bar" />
          <text x="25" y="49" class="axis-label">f₁</text>

          
          <line x1="55" y1="36" x2="55" y2="40" class="absent-tick" />
          <text x="55" y="49" class="axis-label">2</text>

          
          <rect x="80" y="29.3" width="10" height="10.7" class="bar" />
          <text x="85" y="49" class="axis-label">3</text>

          
          <line x1="115" y1="36" x2="115" y2="40" class="absent-tick" />
          <text x="115" y="49" class="axis-label">4</text>

          
          <rect x="140" y="33.6" width="10" height="6.4" class="bar" />
          <text x="145" y="49" class="axis-label">5</text>

          
          <line x1="175" y1="36" x2="175" y2="40" class="absent-tick" />
          <text x="175" y="49" class="axis-label">6</text>
        </svg>
      </div>
    </div>

    
    <div class="panel" data-type="triangle">
      <div class="header">
        <div class="title-group">
          <span class="title">Triangle</span>
          <span class="badge">Odd 1/n²</span>
        </div>
        <button class="play-btn" aria-label="Play Triangle">▶</button>
      </div>
      <div class="plots">
        <svg class="wave-svg" viewBox="0 0 200 44" preserveAspectRatio="none">
          <line x1="0" y1="22" x2="200" y2="22" class="center-axis" />
          <path class="wave-path" id="triangle-path" />
        </svg>
        <svg class="spectrum-svg" viewBox="0 0 200 52">
          <line x1="10" y1="40" x2="190" y2="40" class="center-axis" />
          
          <rect x="20" y="8" width="10" height="32" class="bar" />
          <text x="25" y="49" class="axis-label">f₁</text>

          
          <line x1="55" y1="36" x2="55" y2="40" class="absent-tick" />
          <text x="55" y="49" class="axis-label">2</text>

          
          <rect x="80" y="36.4" width="10" height="3.6" class="bar" />
          <text x="85" y="49" class="axis-label">3</text>

          
          <line x1="115" y1="36" x2="115" y2="40" class="absent-tick" />
          <text x="115" y="49" class="axis-label">4</text>

          
          <rect x="140" y="38.7" width="10" height="1.3" class="bar" />
          <text x="145" y="49" class="axis-label">5</text>

          
          <line x1="175" y1="36" x2="175" y2="40" class="absent-tick" />
          <text x="175" y="49" class="axis-label">6</text>
        </svg>
      </div>
    </div>
  </div>

  <script>
    // Exact mathematical SVG waveform generation (2 full cycles across width 200, height 44, amplitude 16, center y=22)
    const W = 200;
    const midY = 22;
    const amp = 16;
    const cycles = 2;

    // 1. Sine wave
    let dSine = `M 0 ${midY}`;
    for (let x = 0; x <= W; x += 1) {
      const angle = (x / W) * cycles * 2 * Math.PI;
      const y = midY - amp * Math.sin(angle);
      dSine += ` L ${x.toFixed(1)} ${y.toFixed(1)}`;
    }
    document.getElementById('sine-path').setAttribute('d', dSine);

    // 2. Sawtooth wave (linear ramp from -amp to +amp per cycle)
    let dSaw = `M 0 ${midY}`;
    const cycleW = W / cycles;
    for (let c = 0; c < cycles; c++) {
      const xStart = c * cycleW;
      const xEnd = (c + 1) * cycleW;
      dSaw += ` L ${xStart} ${midY} L ${xEnd - 0.5} ${midY - amp} L ${xEnd} ${midY + amp}`;
    }
    dSaw += ` L ${W} ${midY}`;
    document.getElementById('saw-path').setAttribute('d', dSaw);

    // 3. Square wave
    const halfCycle = cycleW / 2;
    let dSq = `M 0 ${midY - amp}`;
    for (let c = 0; c < cycles; c++) {
      const x0 = c * cycleW;
      const x1 = x0 + halfCycle;
      const x2 = (c + 1) * cycleW;
      dSq += ` L ${x1} ${midY - amp} L ${x1} ${midY + amp} L ${x2} ${midY + amp} ${c < cycles - 1 ? `L ${x2} ${midY - amp}` : ''}`;
    }
    document.getElementById('square-path').setAttribute('d', dSq);

    // 4. Triangle wave
    let dTri = `M 0 ${midY}`;
    for (let c = 0; c < cycles; c++) {
      const x0 = c * cycleW;
      const xPeak = x0 + cycleW * 0.25;
      const xTrough = x0 + cycleW * 0.75;
      const xEnd = (c + 1) * cycleW;
      dTri += ` L ${xPeak} ${midY - amp} L ${xTrough} ${midY + amp} L ${xEnd} ${midY}`;
    }
    document.getElementById('triangle-path').setAttribute('d', dTri);

    // Audio Synthesis (Web Audio API)
    let audioCtx = null;

    function playWaveform(type, panel) {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }

      const osc = audioCtx.createOscillator();
      const gain = audioCtx.createGain();
      const now = audioCtx.currentTime;
      const duration = 0.6;

      osc.type = type;
      osc.frequency.setValueAtTime(220, now); // A3 (220 Hz)

      // Smooth attack and exponential decay
      gain.gain.setValueAtTime(0.001, now);
      gain.gain.linearRampToValueAtTime(0.2, now + 0.04);
      gain.gain.exponentialRampToValueAtTime(0.0001, now + duration);

      osc.connect(gain);
      gain.connect(audioCtx.destination);

      osc.start(now);
      osc.stop(now + duration);

      // Visual highlight
      document.querySelectorAll('.panel').forEach(p => p.classList.remove('playing'));
      panel.classList.add('playing');
      const btn = panel.querySelector('.play-btn');
      btn.textContent = '■';

      setTimeout(() => {
        panel.classList.remove('playing');
        btn.textContent = '▶';
      }, duration * 1000);
    }

    document.querySelectorAll('.panel').forEach(panel => {
      panel.addEventListener('click', () => {
        playWaveform(panel.dataset.type, panel);
      });
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Harmonic Series</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      padding: 8px;
      user-select: none;
    }
    .diagram-grid {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      max-width: 580px;
      margin: 0 auto;
    }
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .btn {
      font-size: 12px;
      font-weight: 600;
      padding: 6px 11px;
      border-radius: 6px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.3s, border-color 0.3s, color 0.3s;
    }
    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }
    .strings-container {
      display: flex;
      flex-direction: column;
      gap: 4px;
      width: 100%;
    }
    .string-row {
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      padding: 4px 6px;
      border-radius: 6px;
      background: #f8fafc;
      transition: background-color 0.3s, outline-color 0.3s;
      min-width: 0;
    }
    .string-row:hover, .string-row.active {
      background: #eff6ff;
    }
    .string-row.active {
      outline: 1.5px solid #2563eb;
    }
    .string-label {
      font-size: 12px;
      font-weight: 700;
      width: 36px;
      flex-shrink: 0;
      color: #1e2945;
    }
    .string-svg {
      flex: 1 1 auto;
      min-width: 0;
      height: 32px;
      display: block;
    }
    .string-freq {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      width: 48px;
      text-align: right;
      flex-shrink: 0;
    }
    .spectrum-container {
      width: 100%;
      padding-top: 2px;
    }
    .spectrum-svg {
      width: 100%;
      height: auto;
      max-height: 140px;
      display: block;
    }
    .spectrum-group {
      cursor: pointer;
      transition: opacity 0.3s;
    }
    .spectrum-group line,
    .spectrum-group circle {
      transition: stroke 0.3s, fill 0.3s;
    }
  </style>
</head>
<body>
  <div class="diagram-grid">
    <div class="controls">
      <button class="btn active" id="btn-all" onclick="selectHarmonic(0)">All</button>
      <button class="btn" id="btn-1" onclick="selectHarmonic(1)">n = 1</button>
      <button class="btn" id="btn-2" onclick="selectHarmonic(2)">n = 2</button>
      <button class="btn" id="btn-3" onclick="selectHarmonic(3)">n = 3</button>
      <button class="btn" id="btn-4" onclick="selectHarmonic(4)">n = 4</button>
      <button class="btn" id="btn-sound" onclick="toggleSound()">🔊 Tone</button>
    </div>

    <div class="strings-container">
      <div class="string-row active" id="row-1" onclick="selectHarmonic(1)">
        <span class="string-label">n = 1</span>
        <svg class="string-svg" viewBox="0 0 300 32" preserveAspectRatio="none">
          <rect x="0" y="2" width="4" height="28" fill="#94a3b8" rx="1" />
          <rect x="296" y="2" width="4" height="28" fill="#94a3b8" rx="1" />
          <line x1="4" y1="16" x2="296" y2="16" stroke="#e2e8f0" stroke-width="1.5" stroke-dasharray="3 3"/>
          <path id="env-1" stroke="#93c5fd" stroke-width="1.5" stroke-dasharray="3 3" fill="none" opacity="0.6"/>
          <path id="wave-1" stroke="#2563eb" stroke-width="2.5" fill="none"/>
        </svg>
        <span class="string-freq">100 Hz</span>
      </div>

      <div class="string-row active" id="row-2" onclick="selectHarmonic(2)">
        <span class="string-label">n = 2</span>
        <svg class="string-svg" viewBox="0 0 300 32" preserveAspectRatio="none">
          <rect x="0" y="2" width="4" height="28" fill="#94a3b8" rx="1" />
          <rect x="296" y="2" width="4" height="28" fill="#94a3b8" rx="1" />
          <line x1="4" y1="16" x2="296" y2="16" stroke="#e2e8f0" stroke-width="1.5" stroke-dasharray="3 3"/>
          <path id="env-2" stroke="#93c5fd" stroke-width="1.5" stroke-dasharray="3 3" fill="none" opacity="0.6"/>
          <path id="wave-2" stroke="#2563eb" stroke-width="2.5" fill="none"/>
        </svg>
        <span class="string-freq">200 Hz</span>
      </div>

      <div class="string-row active" id="row-3" onclick="selectHarmonic(3)">
        <span class="string-label">n = 3</span>
        <svg class="string-svg" viewBox="0 0 300 32" preserveAspectRatio="none">
          <rect x="0" y="2" width="4" height="28" fill="#94a3b8" rx="1" />
          <rect x="296" y="2" width="4" height="28" fill="#94a3b8" rx="1" />
          <line x1="4" y1="16" x2="296" y2="16" stroke="#e2e8f0" stroke-width="1.5" stroke-dasharray="3 3"/>
          <path id="env-3" stroke="#93c5fd" stroke-width="1.5" stroke-dasharray="3 3" fill="none" opacity="0.6"/>
          <path id="wave-3" stroke="#2563eb" stroke-width="2.5" fill="none"/>
        </svg>
        <span class="string-freq">300 Hz</span>
      </div>

      <div class="string-row active" id="row-4" onclick="selectHarmonic(4)">
        <span class="string-label">n = 4</span>
        <svg class="string-svg" viewBox="0 0 300 32" preserveAspectRatio="none">
          <rect x="0" y="2" width="4" height="28" fill="#94a3b8" rx="1" />
          <rect x="296" y="2" width="4" height="28" fill="#94a3b8" rx="1" />
          <line x1="4" y1="16" x2="296" y2="16" stroke="#e2e8f0" stroke-width="1.5" stroke-dasharray="3 3"/>
          <path id="env-4" stroke="#93c5fd" stroke-width="1.5" stroke-dasharray="3 3" fill="none" opacity="0.6"/>
          <path id="wave-4" stroke="#2563eb" stroke-width="2.5" fill="none"/>
        </svg>
        <span class="string-freq">400 Hz</span>
      </div>
    </div>

    <div class="spectrum-container">
      <svg class="spectrum-svg" viewBox="0 0 380 135" preserveAspectRatio="xMidYMid meet">
        
        <line x1="50" y1="90" x2="365" y2="90" stroke="#94a3b8" stroke-width="1.5"/>
        <line x1="50" y1="16" x2="50" y2="90" stroke="#94a3b8" stroke-width="1.5"/>
        
        
        <line x1="46" y1="28" x2="365" y2="28" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2 2"/>
        <line x1="46" y1="59" x2="365" y2="59" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2 2"/>
        <text x="8" y="18" font-size="10" font-weight="700" fill="#64748b" text-anchor="start">Amplitude</text>

        
        <text x="210" y="126" font-size="11" font-weight="600" fill="#64748b" text-anchor="middle">Frequency (Hz)</text>

        
        
        <g id="spec-group-1" class="spectrum-group" onclick="selectHarmonic(1)">
          <line x1="100" y1="90" x2="100" y2="26" stroke="#2563eb" stroke-width="8" stroke-linecap="round" id="bar-1"/>
          <circle cx="100" cy="26" r="4" fill="#2563eb" id="dot-1"/>
          <line x1="100" y1="90" x2="100" y2="94" stroke="#94a3b8" stroke-width="1"/>
          <text x="100" y="106" font-size="11" font-weight="600" fill="#1e2945" text-anchor="middle">100</text>
        </g>

        
        <g id="spec-group-2" class="spectrum-group" onclick="selectHarmonic(2)">
          <line x1="175" y1="90" x2="175" y2="40" stroke="#2563eb" stroke-width="8" stroke-linecap="round" id="bar-2"/>
          <circle cx="175" cy="40" r="4" fill="#2563eb" id="dot-2"/>
          <line x1="175" y1="90" x2="175" y2="94" stroke="#94a3b8" stroke-width="1"/>
          <text x="175" y="106" font-size="11" font-weight="600" fill="#1e2945" text-anchor="middle">200</text>
        </g>

        
        <g id="spec-group-3" class="spectrum-group" onclick="selectHarmonic(3)">
          <line x1="250" y1="90" x2="250" y2="54" stroke="#2563eb" stroke-width="8" stroke-linecap="round" id="bar-3"/>
          <circle cx="250" cy="54" r="4" fill="#2563eb" id="dot-3"/>
          <line x1="250" y1="90" x2="250" y2="94" stroke="#94a3b8" stroke-width="1"/>
          <text x="250" y="106" font-size="11" font-weight="600" fill="#1e2945" text-anchor="middle">300</text>
        </g>

        
        <g id="spec-group-4" class="spectrum-group" onclick="selectHarmonic(4)">
          <line x1="325" y1="90" x2="325" y2="68" stroke="#2563eb" stroke-width="8" stroke-linecap="round" id="bar-4"/>
          <circle cx="325" cy="68" r="4" fill="#2563eb" id="dot-4"/>
          <line x1="325" y1="90" x2="325" y2="94" stroke="#94a3b8" stroke-width="1"/>
          <text x="325" y="106" font-size="11" font-weight="600" fill="#1e2945" text-anchor="middle">400</text>
        </g>
      </svg>
    </div>
  </div>

  <script>
    let activeMode = 0; // 0 = all, 1..4 = specific harmonic
    let audioCtx = null;
    let isPlayingAudio = false;
    let activeOscillators = [];

    // Wave drawing & animation parameters
    let time = 0;
    const stringLength = 292;
    const startX = 4;
    const midY = 16;
    const maxAmplitude = 12; // Balanced amplitude for clear antinodes across all harmonics

    function renderWaves() {
      time += 0.04;
      for (let n = 1; n <= 4; n++) {
        const path = document.getElementById(`wave-${n}`);
        const env = document.getElementById(`env-${n}`);
        const isActive = (activeMode === 0 || activeMode === n);
        
        const omega = time * (1 + (n - 1) * 0.35);
        const osc = Math.sin(omega);
        const amp = isActive ? maxAmplitude : 0;

        let dMain = `M ${startX} ${midY}`;
        let dEnv = `M ${startX} ${midY}`;
        const steps = 80;
        for (let i = 1; i <= steps; i++) {
          const xRel = i / steps;
          const x = startX + xRel * stringLength;
          const spatialSine = Math.sin(n * Math.PI * xRel);
          const yMain = midY - amp * spatialSine * osc;
          const yEnv = midY + amp * spatialSine * osc;
          dMain += ` L ${x.toFixed(1)} ${yMain.toFixed(1)}`;
          dEnv += ` L ${x.toFixed(1)} ${yEnv.toFixed(1)}`;
        }
        path.setAttribute('d', dMain);
        path.setAttribute('stroke', isActive ? '#2563eb' : '#cbd5e1');
        path.setAttribute('stroke-width', isActive ? '2.5' : '1.5');

        if (env) {
          env.setAttribute('d', dEnv);
          env.setAttribute('stroke', isActive ? '#93c5fd' : 'transparent');
          env.style.opacity = isActive ? '0.6' : '0';
        }
      }
      requestAnimationFrame(renderWaves);
    }
    requestAnimationFrame(renderWaves);

    function selectHarmonic(mode) {
      activeMode = mode;
      
      // Update buttons
      document.querySelectorAll('.controls .btn').forEach(btn => {
        if (btn.id !== 'btn-sound') btn.classList.remove('active');
      });
      if (mode === 0) {
        document.getElementById('btn-all').classList.add('active');
      } else {
        document.getElementById(`btn-${mode}`).classList.add('active');
      }

      // Update rows & spectrum
      for (let n = 1; n <= 4; n++) {
        const row = document.getElementById(`row-${n}`);
        const bar = document.getElementById(`bar-${n}`);
        const dot = document.getElementById(`dot-${n}`);
        const group = document.getElementById(`spec-group-${n}`);

        const isHighlighted = (mode === 0 || mode === n);
        if (isHighlighted) {
          row.classList.add('active');
          bar.setAttribute('stroke', '#2563eb');
          dot.setAttribute('fill', '#2563eb');
          group.style.opacity = '1';
        } else {
          row.classList.remove('active');
          bar.setAttribute('stroke', '#94a3b8');
          dot.setAttribute('fill', '#94a3b8');
          group.style.opacity = '0.3';
        }
      }

      if (isPlayingAudio) {
        startSound();
      }
    }

    function toggleSound() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }

      isPlayingAudio = !isPlayingAudio;
      const soundBtn = document.getElementById('btn-sound');
      if (isPlayingAudio) {
        soundBtn.classList.add('active');
        startSound();
      } else {
        soundBtn.classList.remove('active');
        stopSound();
      }
    }

    function stopSound() {
      activeOscillators.forEach(({ osc, gain }) => {
        try {
          gain.gain.setValueAtTime(gain.gain.value, audioCtx.currentTime);
          gain.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + 0.05);
          setTimeout(() => osc.stop(), 50);
        } catch (e) {}
      });
      activeOscillators = [];
    }

    function startSound() {
      stopSound();
      if (!isPlayingAudio) return;

      const baseFreq = 100;
      const modesToPlay = activeMode === 0 ? [1, 2, 3, 4] : [activeMode];

      modesToPlay.forEach(n => {
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(baseFreq * n, audioCtx.currentTime);

        const targetVol = (0.18 / n) * (activeMode === 0 ? 0.6 : 1.0);
        gain.gain.setValueAtTime(0.001, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(targetVol, audioCtx.currentTime + 0.05);

        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        activeOscillators.push({ osc, gain });
      });
    }
  </script>
</body>
</html>

MUSTECH-25.6

Aligned learning resources

Related diagrams