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

Ever wonder how a synthesizer creates a shimmering vibrato, a pulsing bass tremolo, or a rhythmic dubstep filter wobble without anyone touching a knob?

Behind the scenes, a dedicated helper called a **low-frequency oscillator (LFO)** acts like an invisible hand turning that knob back and forth automatically.

The human ear detects sound vibrations between roughly $20\text{ Hz}$ and $20{,}000\text{ Hz}$. When an oscillator vibrates slower than $20\text{ Hz}$, our ears stop hearing a continuous musical pitch and instead perceive individual rhythmic pulses.

An **LFO** operates in this **sub-audio range** (typically from $0.1\text{ Hz}$ to $20\text{ Hz}$). Instead of sending sound to your headphones, it sends a repeating **control signal** to modulate parameters like pitch, volume, or filter cutoff.

<!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">
  <title>LFO Fundamentals</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
    body {
      background: #f8fafc;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-grid {
      width: 100%;
      max-width: 640px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    /* Waveform Selectors */
    .controls-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
    }

    .tab-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all 0.2s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .tab-btn:hover {
      border-color: #0284c7;
      color: #0284c7;
    }
    .tab-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    /* Visualizer Container */
    .display-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 14px;
      align-items: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    }

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

    /* Waveform Canvas Area */
    .lfo-panel {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .badge-subaudio {
      background: #e0f2fe;
      color: #0369a1;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 11px;
    }

    .canvas-box {
      position: relative;
      width: 100%;
      height: 120px;
      background: #f1f5f9;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #e2e8f0;
    }
    canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    /* Destination Target */
    .dest-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px;
      gap: 8px;
    }

    .dest-selector {
      display: flex;
      gap: 4px;
      background: #e2e8f0;
      padding: 2px;
      border-radius: 6px;
      width: 100%;
    }
    .dest-btn {
      flex: 1;
      text-align: center;
      font-size: 11px;
      font-weight: 600;
      padding: 4px 0;
      border: none;
      background: transparent;
      color: #475569;
      cursor: pointer;
      border-radius: 4px;
      transition: all 0.2s ease;
    }
    .dest-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* Modulated Meter / Dial */
    .meter-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      margin-top: 4px;
    }

    .dial-outer {
      position: relative;
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: #ffffff;
      border: 3px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
    }
    .dial-pointer {
      position: absolute;
      width: 3px;
      height: 30px;
      background: #fb7185;
      bottom: 50%;
      transform-origin: bottom center;
      border-radius: 2px;
      transform: rotate(0deg);
      transition: transform 0.05s linear;
    }
    .dial-center {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #1e2945;
      z-index: 2;
    }

    .meter-bar-track {
      width: 100%;
      height: 10px;
      background: #e2e8f0;
      border-radius: 5px;
      overflow: hidden;
      position: relative;
    }
    .meter-bar-fill {
      height: 100%;
      width: 50%;
      background: #38bdf8;
      border-radius: 5px;
      transition: width 0.05s linear;
    }

    .param-label {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      min-height: 18px;
    }

    /* Bottom Toolbar */
    .toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 12px;
    }
    .rate-control {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
    }
    input[type="range"] {
      accent-color: #0284c7;
      cursor: pointer;
      width: 90px;
    }
    .audio-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 700;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }
    .audio-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }
  </style>
</head>
<body>

<div class="main-grid">
  
  <div class="controls-row">
    <button class="tab-btn active" data-shape="sine">∿ Sine</button>
    <button class="tab-btn" data-shape="triangle">⋀ Triangle</button>
    <button class="tab-btn" data-shape="sawtooth">⧸ Sawtooth</button>
    <button class="tab-btn" data-shape="square">⊓ Square</button>
    <button class="tab-btn" data-shape="sh">⚄ S&amp;H</button>
  </div>

  
  <div class="display-card">
    
    <div class="lfo-panel">
      <div class="panel-header">
        <span>LFO Signal</span>
        <span class="badge-subaudio" id="freqBadge">2.0 Hz (Sub-Audio)</span>
      </div>
      <div class="canvas-box">
        <canvas id="scopeCanvas" width="300" height="120"></canvas>
      </div>
    </div>

    
    <div class="dest-panel">
      <div class="dest-selector">
        <button class="dest-btn active" data-dest="pitch">Pitch</button>
        <button class="dest-btn" data-dest="volume">Volume</button>
        <button class="dest-btn" data-dest="filter">Cutoff</button>
      </div>

      <div class="meter-container">
        <div class="dial-outer">
          <div class="dial-pointer" id="dialPointer"></div>
          <div class="dial-center"></div>
        </div>
        <div class="meter-bar-track">
          <div class="meter-bar-fill" id="meterFill"></div>
        </div>
        <div class="param-label" id="paramLabel">Pitch (Vibrato)</div>
      </div>
    </div>
  </div>

  
  <div class="toolbar">
    <div class="rate-control">
      <span>Rate:</span>
      <input type="range" id="rateSlider" min="0.2" max="10.0" step="0.2" value="2.0">
      <span id="rateVal" style="min-width: 40px; font-variant-numeric: tabular-nums;">2.0 Hz</span>
    </div>

    <button class="audio-btn" id="audioToggle">
      <span id="audioIcon">🔊</span> Listen Tone
    </button>
  </div>
</div>

<script>
  let currentShape = 'sine';
  let currentDest = 'pitch';
  let lfoRate = 2.0;
  let isAudioOn = false;

  const canvas = document.getElementById('scopeCanvas');
  const ctx = canvas.getContext('2d');
  const dialPointer = document.getElementById('dialPointer');
  const meterFill = document.getElementById('meterFill');
  const paramLabel = document.getElementById('paramLabel');
  const rateSlider = document.getElementById('rateSlider');
  const rateVal = document.getElementById('rateVal');
  const freqBadge = document.getElementById('freqBadge');
  const audioToggle = document.getElementById('audioToggle');
  const audioIcon = document.getElementById('audioIcon');

  // Web Audio Context (Opt-in only)
  let audioCtx = null;
  let carrierOsc = null;
  let filterNode = null;
  let gainNode = null;
  let lfoOsc = null;
  let lfoGain = null;

  function initAudio() {
    if (audioCtx) return;
    audioCtx = new (window.AudioContext || window.webkitAudioContext)();

    carrierOsc = audioCtx.createOscillator();
    carrierOsc.type = 'sawtooth';
    carrierOsc.frequency.setValueAtTime(220, audioCtx.currentTime); // A3

    filterNode = audioCtx.createBiquadFilter();
    filterNode.type = 'lowpass';
    filterNode.frequency.setValueAtTime(1000, audioCtx.currentTime);

    gainNode = audioCtx.createGain();
    gainNode.gain.setValueAtTime(0.3, audioCtx.currentTime);

    carrierOsc.connect(filterNode);
    filterNode.connect(gainNode);
    gainNode.connect(audioCtx.destination);
    carrierOsc.start();
  }

  function updateAudioParams(val) {
    if (!audioCtx || !isAudioOn) return;
    const now = audioCtx.currentTime;
    // val is [-1, 1]
    if (currentDest === 'pitch') {
      carrierOsc.frequency.setValueAtTime(220 + val * 55, now); // vibrato +- 55Hz
      gainNode.gain.setValueAtTime(0.3, now);
      filterNode.frequency.setValueAtTime(2000, now);
    } else if (currentDest === 'volume') {
      carrierOsc.frequency.setValueAtTime(220, now);
      filterNode.frequency.setValueAtTime(2000, now);
      const tremoloGain = Math.max(0, 0.3 + val * 0.28);
      gainNode.gain.setValueAtTime(tremoloGain, now);
    } else if (currentDest === 'filter') {
      carrierOsc.frequency.setValueAtTime(130, now); // C3
      gainNode.gain.setValueAtTime(0.35, now);
      const cutoff = 1000 + val * 850;
      filterNode.frequency.setValueAtTime(Math.max(100, cutoff), now);
    }
  }

  // S&H random generator state
  let lastShCycle = -1;
  let shValue = 0;

  function getLFOValue(phase) {
    // phase in [0, 1)
    switch (currentShape) {
      case 'sine':
        return Math.sin(phase * Math.PI * 2);
      case 'triangle':
        return phase < 0.25 ? phase * 4 : phase < 0.75 ? 2 - phase * 4 : -4 + phase * 4;
      case 'sawtooth':
        return 2 * phase - 1;
      case 'square':
        return phase < 0.5 ? 1 : -1;
      case 'sh': {
        const cycle = Math.floor(performance.now() * 0.001 * lfoRate);
        if (cycle !== lastShCycle) {
          lastShCycle = cycle;
          shValue = (Math.random() * 2 - 1);
        }
        return shValue;
      }
      default:
        return 0;
    }
  }

  function getStaticLFOValue(phase, shape) {
    switch (shape) {
      case 'sine':
        return Math.sin(phase * Math.PI * 2);
      case 'triangle':
        return phase < 0.25 ? phase * 4 : phase < 0.75 ? 2 - phase * 4 : -4 + phase * 4;
      case 'sawtooth':
        return 2 * phase - 1;
      case 'square':
        return phase < 0.5 ? 1 : -1;
      case 'sh':
        return Math.sin(Math.floor(phase * 4) * 2.3);
    }
  }

  function render(time) {
    const t = time * 0.001;
    const phase = (t * lfoRate) % 1;
    const val = getLFOValue(phase); // [-1, 1]

    // Canvas plotting
    const w = canvas.width;
    const h = canvas.height;
    ctx.clearRect(0, 0, w, h);

    // Center baseline
    ctx.strokeStyle = '#cbd5e1';
    ctx.lineWidth = 1;
    ctx.setLineDash([4, 4]);
    ctx.beginPath();
    ctx.moveTo(0, h / 2);
    ctx.lineTo(w, h / 2);
    ctx.stroke();
    ctx.setLineDash([]);

    // Waveform curve (2 full cycles across canvas width)
    ctx.strokeStyle = '#0284c7';
    ctx.lineWidth = 3;
    ctx.beginPath();

    const cycles = 2;
    for (let x = 0; x < w; x++) {
      const p = (x / w) * cycles;
      const wavePhase = p % 1;
      let yVal = 0;

      if (currentShape === 'sine') {
        yVal = Math.sin(wavePhase * Math.PI * 2);
      } else if (currentShape === 'triangle') {
        yVal = wavePhase < 0.25 ? wavePhase * 4 : wavePhase < 0.75 ? 2 - wavePhase * 4 : -4 + wavePhase * 4;
      } else if (currentShape === 'sawtooth') {
        yVal = 2 * wavePhase - 1;
      } else if (currentShape === 'square') {
        yVal = wavePhase < 0.5 ? 0.9 : -0.9;
      } else if (currentShape === 'sh') {
        const step = Math.floor(p * 3);
        yVal = Math.sin(step * 4.2);
      }

      const y = (h / 2) - yVal * (h * 0.38);
      if (x === 0) ctx.moveTo(x, y);
      else ctx.lineTo(x, y);
    }
    ctx.stroke();

    // Moving playhead / probe dot
    const probeX = (phase / cycles) * w;
    const probeY = (h / 2) - val * (h * 0.38);

    // Vertical sweep indicator
    ctx.fillStyle = 'rgba(56, 189, 248, 0.15)';
    ctx.fillRect(0, 0, probeX, h);

    // Playhead dot
    ctx.fillStyle = '#fb7185';
    ctx.beginPath();
    ctx.arc(probeX, probeY, 6, 0, Math.PI * 2);
    ctx.fill();
    ctx.strokeStyle = '#ffffff';
    ctx.lineWidth = 2;
    ctx.stroke();

    // Destination Visual Update
    const deg = val * 65; // -65 to +65 degrees
    dialPointer.style.transform = `rotate(${deg}deg)`;

    const norm = (val + 1) / 2; // 0 to 1
    meterFill.style.width = `${norm * 100}%`;

    updateAudioParams(val);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);

  // Shape Tab Handlers
  document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      currentShape = btn.dataset.shape;
    });
  });

  // Destination Tab Handlers
  const destLabels = {
    pitch: 'Pitch (Vibrato)',
    volume: 'Volume (Tremolo)',
    filter: 'Cutoff (Filter Sweep)'
  };

  document.querySelectorAll('.dest-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('.dest-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      currentDest = btn.dataset.dest;
      paramLabel.textContent = destLabels[currentDest];
    });
  });

  // Rate Slider
  rateSlider.addEventListener('input', (e) => {
    lfoRate = parseFloat(e.target.value);
    rateVal.textContent = lfoRate.toFixed(1) + ' Hz';
    freqBadge.textContent = lfoRate.toFixed(1) + ' Hz (Sub-Audio)';
  });

  // Audio Toggle
  audioToggle.addEventListener('click', () => {
    initAudio();
    if (audioCtx.state === 'suspended') {
      audioCtx.resume();
    }
    isAudioOn = !isAudioOn;
    if (isAudioOn) {
      audioToggle.classList.add('active');
      audioIcon.textContent = '⏸';
      audioToggle.innerHTML = `<span>⏸</span> Stop Tone`;
    } else {
      audioToggle.classList.remove('active');
      audioToggle.innerHTML = `<span>🔊</span> Listen Tone`;
      gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
    }
  });
</script>

</body>
</html>

If an LFO is completely silent on its own, how does its shape dictate the movement we hear?

The geometric shape of the LFO waveform determines the exact path and speed of the parameter being modulated over time.

- **Sine / Triangle:** Glides smoothly up and down, creating natural vibrato (pitch wobble) and gentle tremolo (volume swell).
- **Square:** Snaps instantly between maximum and minimum values, creating rhythmic octave jumps or alternating on/off effects.
- **Sawtooth / Ramp:** Ramps steadily in one direction and drops instantly, giving a continuous rhythmic sweep or falling laser effect.
- **Sample and Hold (S&H):** Generates stepped, random voltage values at fixed intervals, producing classic retro sci-fi computer bleeps.

<!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">
  <title>LFO Waveform Shapes</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }
    .app {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .btn-group {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
    }
    .wave-btn {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .wave-btn svg {
      width: 32px;
      height: 18px;
      stroke: #64748b;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .wave-btn.active {
      background: #e0f2fe;
      color: #0284c7;
      box-shadow: 0 0 0 2px #0284c7;
    }
    .wave-btn.active svg {
      stroke: #0284c7;
    }
    .scope-box {
      position: relative;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      height: 180px;
      overflow: hidden;
    }
    canvas {
      width: 100%;
      height: 100%;
      display: block;
    }
    .hud {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 14px;
    }
    .ctrl-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
    }
    input[type=range] {
      accent-color: #0284c7;
      cursor: pointer;
      width: 90px;
    }
    .audio-btn {
      background: #0284c7;
      color: #ffffff;
      border: none;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s, opacity 0.2s;
    }
    .audio-btn.playing {
      background: #0f172a;
    }
    .target-meter {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 4px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }
    .meter-bar {
      flex: 1;
      height: 8px;
      background: #e2e8f0;
      border-radius: 4px;
      margin: 0 10px;
      position: relative;
      overflow: visible;
    }
    .meter-dot {
      position: absolute;
      top: -3px;
      left: 50%;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #0284c7;
      box-shadow: 0 0 8px rgba(2, 132, 199, 0.5);
      transform: translateX(-50%);
      transition: left 0.05s linear;
    }
  </style>
</head>
<body>
  <div class="app">
    <div class="btn-group">
      <button class="wave-btn active" data-type="sine">
        <svg viewBox="0 0 40 20"><path d="M 2 10 Q 11 0 20 10 T 38 10"/></svg>
        Sine
      </button>
      <button class="wave-btn" data-type="square">
        <svg viewBox="0 0 40 20"><path d="M 2 16 L 2 4 L 20 4 L 20 16 L 38 16 L 38 4"/></svg>
        Square
      </button>
      <button class="wave-btn" data-type="sawtooth">
        <svg viewBox="0 0 40 20"><path d="M 2 16 L 20 4 L 20 16 L 38 4 L 38 16"/></svg>
        Saw
      </button>
      <button class="wave-btn" data-type="sh">
        <svg viewBox="0 0 40 20"><path d="M 2 14 L 10 14 L 10 6 L 22 6 L 22 17 L 30 17 L 30 9 L 38 9"/></svg>
        S&amp;H
      </button>
    </div>

    <div class="scope-box">
      <canvas id="scopeCanvas"></canvas>
    </div>

    <div class="target-meter">
      <span>-V</span>
      <div class="meter-bar">
        <div id="meterDot" class="meter-dot"></div>
      </div>
      <span>+V</span>
    </div>

    <div class="hud">
      <div class="ctrl-row">
        <span>Rate</span>
        <input type="range" id="rateSlider" min="0.5" max="6.0" step="0.1" value="2.0">
        <span id="rateVal" style="min-width: 38px;">2.0 Hz</span>
      </div>
      <button id="audioToggle" class="audio-btn">
        <span id="audioIcon">▶</span> Audio
      </button>
    </div>
  </div>

  <script>
    const canvas = document.getElementById('scopeCanvas');
    const ctx = canvas.getContext('2d');
    const meterDot = document.getElementById('meterDot');
    const rateSlider = document.getElementById('rateSlider');
    const rateVal = document.getElementById('rateVal');
    const audioToggle = document.getElementById('audioToggle');
    const audioIcon = document.getElementById('audioIcon');
    const waveBtns = document.querySelectorAll('.wave-btn');

    let waveType = 'sine';
    let rate = 2.0;
    let phase = 0;
    let lastTime = performance.now();

    // S&H random state
    let shCurrentVal = 0;
    let shCycleCount = 0;

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

    function getWaveValue(p, type, cycleIndex) {
      const normP = p % 1;
      switch(type) {
        case 'sine':
          return Math.sin(normP * Math.PI * 2);
        case 'square':
          return normP < 0.5 ? 1 : -1;
        case 'sawtooth':
          return 1 - 2 * normP;
        case 'sh':
          const pseudoRandom = Math.sin(cycleIndex * 127.1 + 311.7) * 43758.5453;
          return (pseudoRandom - Math.floor(pseudoRandom)) * 2 - 1;
      }
      return 0;
    }

    function render(now) {
      const dt = (now - lastTime) / 1000;
      lastTime = now;

      phase += rate * dt;
      const currentCycle = Math.floor(phase);
      const currentVal = getWaveValue(phase, waveType, currentCycle);

      // Update Meter
      const meterPercent = ((currentVal + 1) / 2) * 100;
      meterDot.style.left = `${Math.max(0, Math.min(100, meterPercent))}%`;

      // Update Audio Modulation if running
      if (audioCtx && isAudioPlaying && lfoGain) {
        if (waveType === 'sh') {
          carrierOsc.frequency.setValueAtTime(440 + currentVal * 160, audioCtx.currentTime);
        }
      }

      // Draw Oscilloscope
      const w = canvas.getBoundingClientRect().width;
      const h = canvas.getBoundingClientRect().height;
      ctx.clearRect(0, 0, w, h);

      // Grid Lines
      ctx.strokeStyle = '#f1f5f9';
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(0, h * 0.25); ctx.lineTo(w, h * 0.25);
      ctx.moveTo(0, h * 0.5);  ctx.lineTo(w, h * 0.5);
      ctx.moveTo(0, h * 0.75); ctx.lineTo(w, h * 0.75);
      ctx.stroke();

      // Zero-center dashed line
      ctx.strokeStyle = '#e2e8f0';
      ctx.setLineDash([4, 4]);
      ctx.beginPath();
      ctx.moveTo(0, h * 0.5);
      ctx.lineTo(w, h * 0.5);
      ctx.stroke();
      ctx.setLineDash([]);

      // Draw Waveform Track (2 full visible cycles)
      ctx.strokeStyle = '#0284c7';
      ctx.lineWidth = 2.5;
      ctx.beginPath();

      const numPoints = 200;
      const visibleCycles = 2;
      const startCycle = Math.floor(phase);

      for (let i = 0; i <= numPoints; i++) {
        const xRel = i / numPoints;
        const x = xRel * w;
        const ptPhase = phase + (xRel - 0.5) * visibleCycles;
        const ptCycle = Math.floor(ptPhase);
        const yVal = getWaveValue(ptPhase, waveType, ptCycle);
        const y = h * 0.5 - (yVal * (h * 0.36));

        if (i === 0) ctx.moveTo(x, y);
        else ctx.lineTo(x, y);
      }
      ctx.stroke();

      // Center Probe Marker (Current Output Value)
      const probeX = w * 0.5;
      const probeY = h * 0.5 - (currentVal * (h * 0.36));

      ctx.fillStyle = '#0284c7';
      ctx.beginPath();
      ctx.arc(probeX, probeY, 6, 0, Math.PI * 2);
      ctx.fill();

      ctx.strokeStyle = '#ffffff';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.arc(probeX, probeY, 6, 0, Math.PI * 2);
      ctx.stroke();

      requestAnimationFrame(render);
    }
    requestAnimationFrame(render);

    // Waveform selection
    waveBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        waveBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        waveType = btn.dataset.type;
        if (isAudioPlaying) updateAudioGraph();
      });
    });

    // Rate Slider
    rateSlider.addEventListener('input', (e) => {
      rate = parseFloat(e.target.value);
      rateVal.textContent = rate.toFixed(1) + ' Hz';
      if (lfoOsc && audioCtx) {
        lfoOsc.frequency.setValueAtTime(rate, audioCtx.currentTime);
      }
    });

    // Web Audio Synthesizer (Opt-in only)
    let audioCtx = null;
    let carrierOsc = null;
    let lfoOsc = null;
    let lfoGain = null;
    let masterGain = null;
    let isAudioPlaying = false;

    function initAudio() {
      if (audioCtx) return;
      audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    }

    function updateAudioGraph() {
      if (!audioCtx || !isAudioPlaying) return;

      if (lfoOsc) {
        try { lfoOsc.stop(); lfoOsc.disconnect(); } catch (e) {}
      }

      if (waveType !== 'sh') {
        lfoOsc = audioCtx.createOscillator();
        lfoOsc.type = waveType;
        lfoOsc.frequency.setValueAtTime(rate, audioCtx.currentTime);

        lfoGain = audioCtx.createGain();
        lfoGain.gain.setValueAtTime(140, audioCtx.currentTime); // Pitch modulation depth

        lfoOsc.connect(lfoGain);
        lfoGain.connect(carrierOsc.frequency);
        carrierOsc.frequency.setValueAtTime(440, audioCtx.currentTime);
        lfoOsc.start();
      } else {
        lfoGain = audioCtx.createGain();
      }
    }

    function toggleAudio() {
      initAudio();
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }

      if (isAudioPlaying) {
        if (masterGain) {
          masterGain.gain.setTargetAtTime(0, audioCtx.currentTime, 0.03);
          setTimeout(() => {
            if (carrierOsc) { carrierOsc.stop(); carrierOsc.disconnect(); }
            if (lfoOsc) { lfoOsc.stop(); lfoOsc.disconnect(); }
          }, 50);
        }
        isAudioPlaying = false;
        audioToggle.classList.remove('playing');
        audioIcon.textContent = '▶';
      } else {
        carrierOsc = audioCtx.createOscillator();
        carrierOsc.type = 'triangle';
        carrierOsc.frequency.setValueAtTime(440, audioCtx.currentTime);

        masterGain = audioCtx.createGain();
        masterGain.gain.setValueAtTime(0.001, audioCtx.currentTime);
        masterGain.gain.setTargetAtTime(0.2, audioCtx.currentTime, 0.03);

        carrierOsc.connect(masterGain);
        masterGain.connect(audioCtx.destination);
        carrierOsc.start();

        isAudioPlaying = true;
        updateAudioGraph();

        audioToggle.classList.add('playing');
        audioIcon.textContent = '⏸';
      }
    }

    audioToggle.addEventListener('click', toggleAudio);
  </script>
</body>
</html>

How do we calculate the exact speed and cycle duration of these modulation sweeps?

An LFO's speed is defined by its **rate** or **frequency** ($f$), measured in Hertz (cycles per second). The time it takes to complete one single cycle is its **period** ($T$, in seconds), defined by the relationship $T = \frac{1}{f}$.

For example, an LFO running at $0.5\text{ Hz}$ has a period of $T = \frac{1}{0.5} = 2.0\text{ seconds}$ per sweep. If you speed the rate up to $8\text{ Hz}$, each cycle takes just $T = \frac{1}{8} = 0.125\text{ seconds}$ ($125\text{ ms}$).

In the 1960s, synth pioneers Bob Moog and Don Buchla introduced modular **control voltage (CV)** routing, allowing sub-audio oscillators to automate filter cutoffs and pitch sweeps dynamically without tying up a musician's hands.

A common misconception is routing an LFO directly into your mixer track and expecting to hear a bass tone; because an LFO outputs sub-audio control data rather than audible sound, it must be assigned to a **target parameter** (like a filter cutoff or pitch) to be perceived.

music-technology

LFO Fundamentals: Sub-Audio Frequencies and Waveform Shapes. Explain how low-frequency oscillators operating between 0.1 Hz and 20 Hz generate cyclic control signals without producing audible pitch.

Ableton Learning Synths: LFO Playground & Parameter Modulation

Synth Secrets: An Introduction to Modulation and LFOs

A Level Music Technology: 1.3 Synthesisers, LFOs, and Modulators

When teaching Year 13 (A2 Level) students MUSTECH-13.1, anchor conceptual learning around the physical distinction between the audio signal path (sound generation) and the modulation control path (data/voltage instruction). Use real-time graphical software synths (or hardware oscilloscopes) to visualize slow $0.1\text{ Hz} - 20\text{ Hz}$ waveforms while listening to their impact on pitch (vibrato), amplitude (tremolo), and filter cutoffs (wah/sweeps) to cement the mathematical relationship between frequency, period, and musical pacing.

LFO Fundamentals: Sub-Audio Frequencies and Waveform Shapes

Audio vs. Sub-Audio Signals

LFO Waveform Shapes

Rate and Period