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

Why does a real trumpet sound completely different from a static electronic beep, even when they play the exact same pitch?

A real acoustic instrument changes its harmonic brightness continuously from the moment a note begins to the moment it dies away.

How do we recreate this dynamic spectral movement in subtractive synthesis?

In subtractive synthesis, a **VCF** (Voltage-Controlled Filter) removes unwanted frequencies from a harmonic-rich raw waveform.

The **cutoff frequency** is the specific frequency point where the filter begins attenuating higher **harmonics** (the upper overtone frequencies that give a sound its bright, buzzy character).

This shifting cutoff produces **Dynamic Timbral Evolution**: opening the filter ($f_c(t)$ increasing) unmasks higher-order harmonics for brightness and acoustic bite, while closing the filter ($f_c(t)$ decreasing) attenuates upper harmonics, leaving only low harmonics for a darker, warmer timbre.

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

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

    .btn-play {
      background: #2563eb;
      color: #ffffff;
      border: none;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(37,99,235,0.25);
    }
    .btn-play:active { background: #1d4ed8; }

    .stages {
      display: flex;
      gap: 4px;
      background: #e2e8f0;
      padding: 3px;
      border-radius: 8px;
    }

    .stage-btn {
      background: transparent;
      border: none;
      padding: 4px 8px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      border-radius: 6px;
      cursor: pointer;
    }
    .stage-btn.active {
      background: #ffffff;
      color: #2563eb;
      box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    }

    .panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }

    .val-badge {
      font-family: ui-monospace, monospace;
      font-size: 12px;
      color: #2563eb;
      background: #eff6ff;
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid #dbeafe;
    }

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

    .spectrum-grid {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 4px;
      height: 70px;
      align-items: end;
      position: relative;
      padding: 4px 0;
      border-bottom: 1px solid #e2e8f0;
    }

    .harmonic-col {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      position: relative;
    }

    .bar {
      width: 100%;
      max-width: 14px;
      border-radius: 3px 3px 0 0;
      transition: height 0.08s ease, background-color 0.08s ease, opacity 0.08s ease;
    }

    .filter-overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      background: rgba(241, 245, 249, 0.75);
      border-left: 2px dashed #2563eb;
      pointer-events: none;
      transition: left 0.08s ease;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn-play" id="playBtn">▶ Play 🔊</button>
    <div class="stages">
      <button class="stage-btn" data-stage="0">Attack</button>
      <button class="stage-btn" data-stage="1">Decay</button>
      <button class="stage-btn" data-stage="2">Sustain</button>
      <button class="stage-btn" data-stage="3">Release</button>
    </div>
  </div>

  
  <div class="panel">
    <div class="panel-header">
      <span>Cutoff Envelope [ADSR]</span>
      <span class="val-badge" id="cutoffLabel">fc: 200 Hz</span>
    </div>
    <svg viewBox="0 0 320 80">
      
      <line x1="10" y1="70" x2="310" y2="70" stroke="#f1f5f9" stroke-width="1" />
      <line x1="10" y1="40" x2="310" y2="40" stroke="#f1f5f9" stroke-width="1" />
      <line x1="10" y1="10" x2="310" y2="10" stroke="#f1f5f9" stroke-width="1" />

      
      <path d="M 10 70 L 75 10 L 145 42 L 235 42 L 305 70" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="3,3" />

      
      <path id="envProgress" d="M 10 70 L 10 70" fill="none" stroke="#2563eb" stroke-width="3" stroke-linecap="round" />

      
      <circle id="trackerDot" cx="10" cy="70" r="5" fill="#2563eb" stroke="#ffffff" stroke-width="2" />
    </svg>
  </div>

  
  <div class="panel">
    <div class="panel-header">
      <span>Harmonics</span>
      <span class="val-badge" id="timbreLabel">Warm / Dark</span>
    </div>
    <div class="spectrum-grid" id="spectrumGrid">
      <div class="filter-overlay" id="filterCut"></div>
    </div>
  </div>

  <script>
    const STAGES = [
      { name: 'Attack',  t: 0.25, x: 75,  y: 10, fc: 3200, timbre: 'Bright / Bite' },
      { name: 'Decay',   t: 0.50, x: 145, y: 42, fc: 900,  timbre: 'Dynamic' },
      { name: 'Sustain', t: 0.75, x: 235, y: 42, fc: 900,  timbre: 'Sustained' },
      { name: 'Release', t: 1.00, x: 305, y: 70, fc: 200,  timbre: 'Warm / Dark' }
    ];

    const grid = document.getElementById('spectrumGrid');
    const filterCut = document.getElementById('filterCut');
    const cutoffLabel = document.getElementById('cutoffLabel');
    const timbreLabel = document.getElementById('timbreLabel');
    const trackerDot = document.getElementById('trackerDot');
    const envProgress = document.getElementById('envProgress');
    const stageBtns = document.querySelectorAll('.stage-btn');
    const playBtn = document.getElementById('playBtn');

    // Generate 10 harmonic bars with natural sawtooth roll-off (1/n)
    const bars = [];
    const baseFreqs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    baseFreqs.forEach(n => {
      const col = document.createElement('div');
      col.className = 'harmonic-col';
      const b = document.createElement('div');
      b.className = 'bar';
      const naturalHeight = Math.max(10, Math.round((1 / n) * 90));
      b.dataset.baseH = naturalHeight;
      b.dataset.harmonicFreq = n * 220; // 220Hz root
      b.style.height = naturalHeight + '%';
      col.appendChild(b);
      grid.appendChild(col);
      bars.push(b);
    });

    function updateVisuals(progress, fc) {
      let x, y;
      if (progress <= 0.25) {
        const p = progress / 0.25;
        x = 10 + p * (75 - 10);
        y = 70 - p * (70 - 10);
      } else if (progress <= 0.50) {
        const p = (progress - 0.25) / 0.25;
        x = 75 + p * (145 - 75);
        y = 10 + p * (42 - 10);
      } else if (progress <= 0.75) {
        const p = (progress - 0.50) / 0.25;
        x = 145 + p * (235 - 145);
        y = 42;
      } else {
        const p = (progress - 0.75) / 0.25;
        x = 235 + p * (305 - 235);
        y = 42 + p * (70 - 42);
      }

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

      let d = 'M 10 70 ';
      if (x <= 75) d += `L ${x} ${y}`;
      else if (x <= 145) d += `L 75 10 L ${x} ${y}`;
      else if (x <= 235) d += `L 75 10 L 145 42 L ${x} ${y}`;
      else d += `L 75 10 L 145 42 L 235 42 L ${x} ${y}`;
      envProgress.setAttribute('d', d);

      cutoffLabel.textContent = `fc: ${Math.round(fc)} Hz`;
      timbreLabel.textContent = fc > 1800 ? 'Bright / Bite' : (fc > 500 ? 'Dynamic' : 'Warm / Dark');

      // Update Filter Cut on Harmonics
      const normFc = Math.min(Math.max((fc - 200) / 2800, 0), 1);
      const cutPct = 10 + normFc * 88;
      filterCut.style.left = `${cutPct}%`;

      bars.forEach(bar => {
        const hFreq = parseFloat(bar.dataset.harmonicFreq);
        const baseH = parseFloat(bar.dataset.baseH);
        if (hFreq <= fc) {
          bar.style.height = `${baseH}%`;
          bar.style.backgroundColor = '#f59e0b';
          bar.style.opacity = '1';
        } else {
          const falloff = Math.max(0.1, 1 - Math.log2(hFreq / fc) * 0.4);
          bar.style.height = `${baseH * Math.max(0.2, falloff)}%`;
          bar.style.backgroundColor = '#94a3b8';
          bar.style.opacity = '0.35';
        }
      });

      // Highlight corresponding stage button
      const stageIdx = progress < 0.25 ? 0 : (progress < 0.5 ? 1 : (progress < 0.75 ? 2 : 3));
      stageBtns.forEach((b, i) => b.classList.toggle('active', i === stageIdx));
    }

    // Set Initial State
    setStage(0);

    function setStage(idx) {
      const s = STAGES[idx];
      updateVisuals(s.t, s.fc);
    }

    stageBtns.forEach((btn, idx) => {
      btn.addEventListener('click', () => setStage(idx));
    });

    // Web Audio Note Triggering
    let audioCtx = null;
    let animId = null;

    playBtn.addEventListener('click', () => {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }

      const now = audioCtx.currentTime;
      const osc = audioCtx.createOscillator();
      const filter = audioCtx.createBiquadFilter();
      const gain = audioCtx.createGain();

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

      filter.type = 'lowpass';
      filter.Q.setValueAtTime(4, now); // Resonance bite

      // Filter ADSR: 0.3s attack to 3200Hz, 0.4s decay to 900Hz, 0.5s sustain, 0.5s release to 200Hz
      filter.frequency.setValueAtTime(200, now);
      filter.frequency.linearRampToValueAtTime(3200, now + 0.3);
      filter.frequency.exponentialRampToValueAtTime(900, now + 0.7);
      filter.frequency.setValueAtTime(900, now + 1.2);
      filter.frequency.exponentialRampToValueAtTime(200, now + 1.7);

      // Amp Envelope
      gain.gain.setValueAtTime(0.001, now);
      gain.gain.linearRampToValueAtTime(0.25, now + 0.05);
      gain.gain.setValueAtTime(0.25, now + 1.2);
      gain.gain.exponentialRampToValueAtTime(0.001, now + 1.7);

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

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

      // Animate Visuals in sync
      const startTime = performance.now();
      const totalDur = 1700;

      if (animId) cancelAnimationFrame(animId);

      function step(timestamp) {
        const elapsed = timestamp - startTime;
        const p = Math.min(elapsed / totalDur, 1);

        let fc;
        if (p < 0.176) { // Attack: 0.3s / 1.7s
          const ap = p / 0.176;
          fc = 200 + ap * (3200 - 200);
        } else if (p < 0.412) { // Decay: 0.4s / 1.7s
          const dp = (p - 0.176) / 0.236;
          fc = 3200 * Math.pow(900 / 3200, dp);
        } else if (p < 0.706) { // Sustain: 0.5s / 1.7s
          fc = 900;
        } else { // Release: 0.5s / 1.7s
          const rp = (p - 0.706) / 0.294;
          fc = 900 * Math.pow(200 / 900, rp);
        }

        updateVisuals(p, fc);

        if (p < 1) {
          animId = requestAnimationFrame(step);
        }
      }

      animId = requestAnimationFrame(step);
    });
  </script>
</body>
</html>

If the cutoff frequency stays static, the sound feels lifeless and artificial like an organ pipe.

This ongoing spectral shift is called **Dynamic Timbral Evolution**. Opening the filter ($f_c(t)$ increasing) unmasks higher-order harmonics, increasing perceived brightness and acoustic bite; closing the filter ($f_c(t)$ decreasing) attenuates upper harmonics, leaving only the fundamental and low harmonics for a darker or warmer timbre.

To inject natural motion, we need a control signal that opens and closes this cutoff frequency automatically whenever you press a key.

A standard synthesizer provides two separate **envelope generators (EG)**: an amplitude envelope that dictates overall volume, and a dedicated **filter envelope** routed directly to the filter cutoff parameter.

A dedicated **Filter Envelope Generator** (EG2) outputs a unipolar or bipolar control voltage (CV) curve over time, defined by four discrete stages: Attack time ($t_A$), Decay time ($t_D$), Sustain level ($S$, a ratio/voltage level from $0.0$ to $1.0$), and Release time ($t_R$).

<!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>ADSR to Filter Cutoff Mapping</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      user-select: none;
    }

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

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

    .panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 700;
      color: #4f46e5;
      letter-spacing: 0.02em;
    }

    .val-badge {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      background: #f1f5f9;
      padding: 2px 6px;
      border-radius: 6px;
    }

    svg {
      width: 100%;
      height: 120px;
      overflow: visible;
    }

    .stage-btn-group {
      display: flex;
      gap: 6px;
      justify-content: center;
      width: 100%;
    }

    .stage-btn {
      flex: 1;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #475569;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 4px;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .stage-btn.active {
      background: #4f46e5;
      color: #ffffff;
      border-color: #4f46e5;
    }

    .controls-bar {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 12px;
    }

    .btn-action {
      background: #4f46e5;
      color: #ffffff;
      border: none;
      border-radius: 8px;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .btn-action:active {
      opacity: 0.85;
    }

    .key-state {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }

    .gate-indicator {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      margin-right: 4px;
      vertical-align: middle;
      transition: background 0.2s;
    }
    .gate-indicator.on {
      background: #10b981;
      box-shadow: 0 0 6px #10b981;
    }
  </style>
</head>
<body>

  
  <div class="controls-bar">
    <button id="triggerBtn" class="btn-action">
      <span>▶ Play Note</span>
    </button>
    <div class="key-state">
      <span id="gateDot" class="gate-indicator"></span><span id="gateLabel">Gate: Off</span>
    </div>
  </div>

  
  <div class="main-grid">
    
    <div class="panel">
      <div class="panel-header">
        <span>Envelope CV (V)</span>
        <span id="cvVal" class="val-badge">+0.0 V</span>
      </div>
      <svg id="adsrSvg" viewBox="0 0 240 120">
        
        <line x1="20" y1="100" x2="230" y2="100" stroke="#e2e8f0" stroke-width="1.5" />
        <line x1="20" y1="20" x2="230" y2="20" stroke="#f1f5f9" stroke-dasharray="3 3" />
        <line x1="20" y1="20" x2="20" y2="100" stroke="#e2e8f0" stroke-width="1.5" />

        
        <rect id="zoneA" x="20" y="10" width="45" height="90" fill="#e0e7ff" opacity="0.3"/>
        <rect id="zoneD" x="65" y="10" width="45" height="90" fill="#f1f5f9" opacity="0.4"/>
        <rect id="zoneS" x="110" y="10" width="55" height="90" fill="#e0e7ff" opacity="0.3"/>
        <rect id="zoneR" x="165" y="10" width="55" height="90" fill="#f1f5f9" opacity="0.4"/>

        
        <path d="M 20 100 L 65 20 L 110 55 L 165 55 L 220 100" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path id="activePath" d="M 20 100 L 20 100" fill="none" stroke="#4f46e5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>

        
        <circle id="envPlayhead" cx="20" cy="100" r="5" fill="#4f46e5" stroke="#ffffff" stroke-width="2"/>

        
        <text x="42" y="114" font-size="10" fill="#64748b" text-anchor="middle" font-weight="600">A</text>
        <text x="87" y="114" font-size="10" fill="#64748b" text-anchor="middle" font-weight="600">D</text>
        <text x="137" y="114" font-size="10" fill="#64748b" text-anchor="middle" font-weight="600">S</text>
        <text x="192" y="114" font-size="10" fill="#64748b" text-anchor="middle" font-weight="600">R</text>
      </svg>
    </div>

    
    <div class="panel">
      <div class="panel-header">
        <span>VCF Cutoff (Hz)</span>
        <span id="cutoffVal" class="val-badge">300 Hz</span>
      </div>
      <svg id="filterSvg" viewBox="0 0 240 120">
        
        <line x1="20" y1="100" x2="230" y2="100" stroke="#e2e8f0" stroke-width="1.5" />
        
        
        <line x1="35" y1="100" x2="35" y2="35" stroke="#cbd5e1" stroke-width="2" />
        <line x1="55" y1="100" x2="55" y2="45" stroke="#cbd5e1" stroke-width="2" />
        <line x1="75" y1="100" x2="75" y2="55" stroke="#cbd5e1" stroke-width="2" />
        <line x1="95" y1="100" x2="95" y2="65" stroke="#cbd5e1" stroke-width="2" />
        <line x1="115" y1="100" x2="115" y2="72" stroke="#cbd5e1" stroke-width="2" />
        <line x1="135" y1="100" x2="135" y2="78" stroke="#cbd5e1" stroke-width="2" />
        <line x1="155" y1="100" x2="155" y2="83" stroke="#cbd5e1" stroke-width="2" />
        <line x1="175" y1="100" x2="175" y2="87" stroke="#cbd5e1" stroke-width="2" />
        <line x1="195" y1="100" x2="195" y2="91" stroke="#cbd5e1" stroke-width="2" />
        <line x1="215" y1="100" x2="215" y2="94" stroke="#cbd5e1" stroke-width="2" />

        
        <path id="filterCurveFill" d="M 20 100 L 20 25 L 35 25 Q 50 25 70 100 Z" fill="#e0e7ff" opacity="0.55"/>
        <path id="filterCurve" d="M 20 25 L 35 25 Q 50 25 70 100" fill="none" stroke="#4f46e5" stroke-width="2.5"/>

        
        <line id="cutoffLine" x1="42" y1="15" x2="42" y2="100" stroke="#4f46e5" stroke-width="1.5" stroke-dasharray="2 2" />
        <circle id="cutoffDot" cx="42" cy="25" r="4" fill="#4f46e5" />

        
        <text x="25" y="114" font-size="10" fill="#64748b" font-weight="600">Low</text>
        <text x="215" y="114" font-size="10" fill="#64748b" text-anchor="end" font-weight="600">High</text>
      </svg>
    </div>
  </div>

  
  <div class="stage-btn-group">
    <button class="stage-btn" data-stage="0">1. Attack</button>
    <button class="stage-btn" data-stage="1">2. Decay</button>
    <button class="stage-btn" data-stage="2">3. Sustain</button>
    <button class="stage-btn" data-stage="3">4. Release</button>
  </div>

  <script>
    const points = [
      { x: 20, y: 100, cv: 0.0, hz: 300, label: 'Off' },
      { x: 65, y: 20,  cv: 1.0, hz: 6000, label: 'Peak (Attack)' },
      { x: 110, y: 55, cv: 0.55, hz: 2400, label: 'Sustain Level (Decay)' },
      { x: 165, y: 55, cv: 0.55, hz: 2400, label: 'Held (Sustain)' },
      { x: 220, y: 100, cv: 0.0, hz: 300, label: 'Rest (Release)' }
    ];

    let isPlaying = false;
    let animFrame = null;
    let audioCtx = null;
    let oscNode = null;
    let filterNode = null;
    let gainNode = null;

    const cvVal = document.getElementById('cvVal');
    const cutoffVal = document.getElementById('cutoffVal');
    const envPlayhead = document.getElementById('envPlayhead');
    const activePath = document.getElementById('activePath');
    const filterCurve = document.getElementById('filterCurve');
    const filterCurveFill = document.getElementById('filterCurveFill');
    const cutoffLine = document.getElementById('cutoffLine');
    const cutoffDot = document.getElementById('cutoffDot');
    const triggerBtn = document.getElementById('triggerBtn');
    const gateDot = document.getElementById('gateDot');
    const gateLabel = document.getElementById('gateLabel');
    const stageBtns = document.querySelectorAll('.stage-btn');

    function updateVisuals(normX, normY, cv, hz) {
      // Envelope playhead
      envPlayhead.setAttribute('cx', normX);
      envPlayhead.setAttribute('cy', normY);
      
      // Active line trace
      let d = `M 20 100 `;
      if (normX > 20) {
        if (normX <= 65) {
          d += `L ${normX} ${normY}`;
        } else if (normX <= 110) {
          d += `L 65 20 L ${normX} ${normY}`;
        } else if (normX <= 165) {
          d += `L 65 20 L 110 55 L ${normX} ${normY}`;
        } else {
          d += `L 65 20 L 110 55 L 165 55 L ${normX} ${normY}`;
        }
      }
      activePath.setAttribute('d', d);

      // Filter Response Curve update
      // Frequency mapping: 300Hz -> x:35, 6000Hz -> x:200
      const fx = 35 + (cv * 165);
      const kneeX = fx + 25;
      filterCurve.setAttribute('d', `M 20 25 L ${fx} 25 Q ${fx + 15} 25 ${kneeX} 100`);
      filterCurveFill.setAttribute('d', `M 20 100 L 20 25 L ${fx} 25 Q ${fx + 15} 25 ${kneeX} 100 Z`);
      
      cutoffLine.setAttribute('x1', fx);
      cutoffLine.setAttribute('x2', fx);
      cutoffDot.setAttribute('cx', fx);

      // Badges
      cvVal.textContent = `+${cv.toFixed(2)} V`;
      cutoffVal.textContent = `${Math.round(hz)} Hz`;
    }

    function setStageHighlight(stageIdx) {
      stageBtns.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === stageIdx);
      });
    }

    function initAudio() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        oscNode = audioCtx.createOscillator();
        filterNode = audioCtx.createBiquadFilter();
        gainNode = audioCtx.createGain();

        oscNode.type = 'sawtooth';
        oscNode.frequency.value = 110; // A2 note

        filterNode.type = 'lowpass';
        filterNode.Q.value = 4.0;
        filterNode.frequency.value = 300;

        gainNode.gain.value = 0;

        oscNode.connect(filterNode);
        filterNode.connect(gainNode);
        gainNode.connect(audioCtx.destination);
        oscNode.start();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
    }

    function playFullCycle() {
      if (isPlaying) return;
      initAudio();
      isPlaying = true;
      triggerBtn.innerHTML = '<span>⏸ Playing...</span>';
      gateDot.classList.add('on');
      gateLabel.textContent = 'Gate: On';

      const durA = 600;  // Attack
      const durD = 600;  // Decay
      const durS = 900;  // Sustain
      const durR = 800;  // Release
      const totalDur = durA + durD + durS + durR;
      const startTime = performance.now();

      if (gainNode) {
        gainNode.gain.cancelScheduledValues(audioCtx.currentTime);
        gainNode.gain.setValueAtTime(0.2, audioCtx.currentTime);
      }

      function step(now) {
        const elapsed = now - startTime;

        if (elapsed < durA) {
          // Attack: 20 -> 65
          const p = elapsed / durA;
          const x = 20 + p * 45;
          const y = 100 - p * 80;
          const cv = p;
          const hz = 300 + (6000 - 300) * Math.pow(p, 1.2);
          updateVisuals(x, y, cv, hz);
          setStageHighlight(0);
          if (filterNode) filterNode.frequency.setValueAtTime(hz, audioCtx.currentTime);
        } else if (elapsed < durA + durD) {
          // Decay: 65 -> 110
          const p = (elapsed - durA) / durD;
          const x = 65 + p * 45;
          const y = 20 + p * 35;
          const cv = 1.0 - p * 0.45;
          const hz = 6000 - (6000 - 2400) * p;
          updateVisuals(x, y, cv, hz);
          setStageHighlight(1);
          if (filterNode) filterNode.frequency.setValueAtTime(hz, audioCtx.currentTime);
        } else if (elapsed < durA + durD + durS) {
          // Sustain: 110 -> 165
          const p = (elapsed - durA - durD) / durS;
          const x = 110 + p * 55;
          const y = 55;
          const cv = 0.55;
          const hz = 2400;
          updateVisuals(x, y, cv, hz);
          setStageHighlight(2);
          if (filterNode) filterNode.frequency.setValueAtTime(hz, audioCtx.currentTime);
        } else if (elapsed < totalDur) {
          // Gate turns off at start of release
          gateDot.classList.remove('on');
          gateLabel.textContent = 'Gate: Off';

          // Release: 165 -> 220
          const p = (elapsed - durA - durD - durS) / durR;
          const x = 165 + p * 55;
          const y = 55 + p * 45;
          const cv = 0.55 * (1 - p);
          const hz = 2400 - (2400 - 300) * p;
          updateVisuals(x, y, cv, hz);
          setStageHighlight(3);
          if (filterNode) filterNode.frequency.setValueAtTime(hz, audioCtx.currentTime);
          if (gainNode) gainNode.gain.setValueAtTime(0.2 * (1 - p), audioCtx.currentTime);
        } else {
          // Reset
          updateVisuals(20, 100, 0, 300);
          setStageHighlight(-1);
          gateDot.classList.remove('on');
          gateLabel.textContent = 'Gate: Off';
          triggerBtn.innerHTML = '<span>▶ Play Note</span>';
          isPlaying = false;
          if (gainNode) gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
          return;
        }

        animFrame = requestAnimationFrame(step);
      }

      animFrame = requestAnimationFrame(step);
    }

    triggerBtn.addEventListener('click', () => {
      if (!isPlaying) {
        playFullCycle();
      }
    });

    stageBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        if (isPlaying) {
          cancelAnimationFrame(animFrame);
          isPlaying = false;
          triggerBtn.innerHTML = '<span>▶ Play Note</span>';
        }
        const stage = parseInt(btn.dataset.stage);
        setStageHighlight(stage);

        if (stage === 0) {
          // Attack peak
          gateDot.classList.add('on');
          gateLabel.textContent = 'Gate: On';
          updateVisuals(65, 20, 1.0, 6000);
        } else if (stage === 1) {
          // Decay to sustain
          gateDot.classList.add('on');
          gateLabel.textContent = 'Gate: On';
          updateVisuals(110, 55, 0.55, 2400);
        } else if (stage === 2) {
          // Sustain steady
          gateDot.classList.add('on');
          gateLabel.textContent = 'Gate: On';
          updateVisuals(165, 55, 0.55, 2400);
        } else if (stage === 3) {
          // Release complete
          gateDot.classList.remove('on');
          gateLabel.textContent = 'Gate: Off';
          updateVisuals(220, 100, 0.0, 300);
        }
      });
    });

    // Initial render
    updateVisuals(20, 100, 0.0, 300);
  </script>
</body>
</html>

When you route this envelope to the VCF, the cutoff frequency tracks the envelope's rising and falling shape, sweeping the harmonic balance in real time.

How high does the cutoff actually travel when the envelope hits its peak?

The **modulation depth** (often labeled **Env Amount**) determines the total frequency range added on top of your baseline static cutoff setting.

The instantaneous cutoff follows the formula $f(t) = f_{\text{base}} + (\text{Amount} \times V_{\text{ADSR}}(t))$, where $f_{\text{base}}$ is the initial cutoff knob position and $V_{\text{ADSR}}(t)$ is the envelope voltage between $0$ and $1$.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .panel-box {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }
    .label {
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .val-badge {
      font-size: 13px;
      font-weight: 700;
      color: #2563eb;
      background: #eff6ff;
      padding: 2px 8px;
      border-radius: 6px;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      justify-content: space-between;
    }
    .btn {
      appearance: none;
      border: none;
      background: #2563eb;
      color: #ffffff;
      font-size: 14px;
      font-weight: 600;
      padding: 8px 16px;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 4px rgba(37,99,235,0.2);
    }
    .btn:active {
      background: #1d4ed8;
    }
    .slider-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      min-width: 160px;
      justify-content: flex-end;
    }
    input[type=range] {
      accent-color: #2563eb;
      cursor: pointer;
      flex: 1;
      max-width: 140px;
    }
  </style>
</head>
<body>

  
  <div class="panel-box">
    <div class="header-row">
      <span class="label">ADSR Envelope</span>
      <span id="stageLabel" class="val-badge">Rest</span>
    </div>
    <svg viewBox="0 0 320 80">
      <defs>
        <linearGradient id="envGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#2563eb" stop-opacity="0.25" />
          <stop offset="1%" stop-color="#2563eb" stop-opacity="0.0" />
        </linearGradient>
      </defs>
      
      <line x1="20" y1="70" x2="305" y2="70" stroke="#e2e8f0" stroke-width="1.5" />
      <line x1="20" y1="15" x2="305" y2="15" stroke="#f1f5f9" stroke-width="1" stroke-dasharray="3 3" />
      
      
      <line x1="85" y1="10" x2="85" y2="70" stroke="#f1f5f9" stroke-width="1" />
      <line x1="160" y1="10" x2="160" y2="70" stroke="#f1f5f9" stroke-width="1" />
      <line x1="235" y1="10" x2="235" y2="70" stroke="#f1f5f9" stroke-width="1" />

      
      <path d="M 20 70 L 85 15 L 160 45 L 235 45 L 305 70 Z" fill="url(#envGrad)" />
      <path d="M 20 70 L 85 15 L 160 45 L 235 45 L 305 70" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-linejoin="round" />

      
      <text x="52" y="77" fill="#94a3b8" font-size="10" font-weight="600" text-anchor="middle">A</text>
      <text x="122" y="77" fill="#94a3b8" font-size="10" font-weight="600" text-anchor="middle">D</text>
      <text x="197" y="77" fill="#94a3b8" font-size="10" font-weight="600" text-anchor="middle">S</text>
      <text x="270" y="77" fill="#94a3b8" font-size="10" font-weight="600" text-anchor="middle">R</text>

      
      <circle id="envPlayhead" cx="20" cy="70" r="5" fill="#2563eb" stroke="#ffffff" stroke-width="2" />
    </svg>
  </div>

  
  <div class="panel-box">
    <div class="header-row">
      <span class="label">Filter Cutoff (fc)</span>
      <span id="qDisplay" class="val-badge">Resonance Q: High</span>
    </div>
    <svg viewBox="0 0 320 110">
      
      <line x1="20" y1="95" x2="305" y2="95" stroke="#cbd5e1" stroke-width="1.5" />
      <line x1="20" y1="15" x2="20" y2="95" stroke="#cbd5e1" stroke-width="1.5" />

      
      <path id="filterFill" d="M 20 95 L 20 40 L 50 40 Q 60 10 70 40 Q 90 95 120 95 Z" fill="#38bdf8" fill-opacity="0.15" />
      <path id="filterCurve" d="M 20 40 L 50 40 Q 60 10 70 40 Q 90 95 120 95" fill="none" stroke="#0284c7" stroke-width="3" stroke-linecap="round" />

      
      <line id="fcLine" x1="60" y1="15" x2="60" y2="95" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="3 3" />
      <circle id="fcPeak" cx="60" cy="15" r="4" fill="#ef4444" />
      <text id="fcText" x="60" y="102" fill="#ef4444" font-size="11" font-weight="700" text-anchor="middle">fc</text>

      
      <text x="302" y="105" fill="#94a3b8" font-size="10" font-weight="600" text-anchor="end">Freq →</text>
    </svg>
  </div>

  
  <div class="panel-box controls">
    <button id="triggerBtn" class="btn" onclick="triggerSweep()">
      <span>▶ Play Note</span>
    </button>
    <div class="slider-wrap">
      <span class="label" style="font-size: 11px;">Resonance</span>
      <input id="qSlider" type="range" min="1" max="15" value="10" oninput="updateQ(this.value)">
    </div>
  </div>

  <script>
    let audioCtx = null;
    let animId = null;
    let resonanceQ = 10;
    let isPlaying = false;

    const envPoints = [
      { t: 0.0, x: 20, y: 70, stage: 'Rest', fcNorm: 0.05 },
      { t: 0.4, x: 85, y: 15, stage: 'Attack', fcNorm: 0.90 },
      { t: 0.9, x: 160, y: 45, stage: 'Decay', fcNorm: 0.45 },
      { t: 1.5, x: 235, y: 45, stage: 'Sustain', fcNorm: 0.45 },
      { t: 2.0, x: 305, y: 70, stage: 'Release', fcNorm: 0.05 }
    ];

    function updateQ(val) {
      resonanceQ = parseFloat(val);
      const txt = resonanceQ < 4 ? 'Low' : (resonanceQ < 9 ? 'Med' : 'High');
      document.getElementById('qDisplay').textContent = `Resonance Q: ${txt}`;
      if (!isPlaying) renderFilter(0.05);
    }

    function renderFilter(fcNorm) {
      const minX = 35;
      const maxX = 265;
      const fcX = minX + fcNorm * (maxX - minX);

      // Peak height scales with resonance
      const passY = 45;
      const peakBoost = (resonanceQ / 15) * 35;
      const peakY = Math.max(10, passY - peakBoost);

      const qSpread = Math.max(8, 26 - resonanceQ * 1.2);
      const p1x = Math.max(20, fcX - qSpread * 1.5);
      const p2x = fcX;
      const p3x = fcX + qSpread;
      const p4x = Math.min(305, fcX + qSpread * 2.5);

      const d = `M 20 ${passY} L ${p1x} ${passY} Q ${p2x} ${peakY} ${p3x} ${passY + 10} Q ${p3x + 10} 95 ${p4x} 95 L 305 95`;
      const dFill = `M 20 95 L 20 ${passY} L ${p1x} ${passY} Q ${p2x} ${peakY} ${p3x} ${passY + 10} Q ${p3x + 10} 95 ${p4x} 95 Z`;

      document.getElementById('filterCurve').setAttribute('d', d);
      document.getElementById('filterFill').setAttribute('d', dFill);

      const fcPeak = document.getElementById('fcPeak');
      const fcLine = document.getElementById('fcLine');
      const fcText = document.getElementById('fcText');

      fcPeak.setAttribute('cx', fcX);
      fcPeak.setAttribute('cy', peakY);
      fcLine.setAttribute('x1', fcX);
      fcLine.setAttribute('x2', fcX);
      fcText.setAttribute('x', fcX);
    }

    function getEnvelopeState(elapsed) {
      if (elapsed >= 2.0) return { ...envPoints[4], stage: 'Rest' };
      for (let i = 0; i < envPoints.length - 1; i++) {
        const p1 = envPoints[i];
        const p2 = envPoints[i + 1];
        if (elapsed >= p1.t && elapsed <= p2.t) {
          const ratio = (elapsed - p1.t) / (p2.t - p1.t);
          return {
            x: p1.x + ratio * (p2.x - p1.x),
            y: p1.y + ratio * (p2.y - p1.y),
            fcNorm: p1.fcNorm + ratio * (p2.fcNorm - p1.fcNorm),
            stage: p2.stage
          };
        }
      }
      return envPoints[0];
    }

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

      isPlaying = true;
      const now = audioCtx.currentTime;

      // Synth voice: Rich Sawtooth through Resonant Lowpass Filter
      const osc = audioCtx.createOscillator();
      const filter = audioCtx.createBiquadFilter();
      const amp = audioCtx.createGain();

      osc.type = 'sawtooth';
      osc.frequency.setValueAtTime(110, now); // A2 fundamental

      filter.type = 'lowpass';
      filter.Q.setValueAtTime(resonanceQ, now);

      const baseFc = 160;
      const maxFc = 4500;
      const sustainFc = 1000;

      // ADSR modulation to filter cutoff
      filter.frequency.setValueAtTime(baseFc, now);
      filter.frequency.exponentialRampToValueAtTime(maxFc, now + 0.4);
      filter.frequency.exponentialRampToValueAtTime(sustainFc, now + 0.9);
      filter.frequency.setValueAtTime(sustainFc, now + 1.5);
      filter.frequency.exponentialRampToValueAtTime(baseFc, now + 2.0);

      // Amp envelope
      amp.gain.setValueAtTime(0.001, now);
      amp.gain.linearRampToValueAtTime(0.3, now + 0.05);
      amp.gain.setValueAtTime(0.3, now + 1.5);
      amp.gain.exponentialRampToValueAtTime(0.001, now + 2.0);

      osc.connect(filter);
      filter.connect(amp);
      amp.connect(audioCtx.destination);

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

      // Visual Animation
      const startTime = performance.now();
      if (animId) cancelAnimationFrame(animId);

      function step() {
        const elapsed = (performance.now() - startTime) / 1000;
        const state = getEnvelopeState(elapsed);

        // Update playhead
        const ph = document.getElementById('envPlayhead');
        ph.setAttribute('cx', state.x);
        ph.setAttribute('cy', state.y);

        // Update labels
        document.getElementById('stageLabel').textContent = state.stage;

        // Update filter shape
        renderFilter(state.fcNorm);

        if (elapsed < 2.0) {
          animId = requestAnimationFrame(step);
        } else {
          isPlaying = false;
          document.getElementById('stageLabel').textContent = 'Rest';
          renderFilter(0.05);
        }
      }
      animId = requestAnimationFrame(step);
    }

    // Initial render
    renderFilter(0.05);
  </script>
</body>
</html>

**Filter Resonance** ($Q$) boosts frequencies immediately around $f_c(t)$, converting the envelope-controlled cutoff sweep into a distinctive, audible timbral peak such as a classic synth brass open or acid squelch.

Under **Negative Envelope Modulation** ($-E_{\text{amt}}$), triggering a note temporarily lowers the cutoff below $f_{\text{base}}$, creating reverse spectral swells or scooped transient attacks.

Increasing **Filter Resonance** ($Q$) boosts frequencies immediately around $f_c(t)$, converting the envelope-controlled cutoff sweep into a distinctive, audible timbral peak—such as the classic synth 'brass open' or 'acid squelch'.

Let's examine how this parameter combination builds a signature acoustic-style patch from scratch.

## Worked Example: Building a Dynamic Brass Swell

To emulate a trumpet section, we feed a rich sawtooth wave into a 24dB/octave low-pass filter with a low base cutoff of $200\text{ Hz}$.

We dial a high positive envelope amount ($+80\%$) and configure the filter ADSR: **Attack = 120ms**, **Decay = 350ms**, **Sustain = 40%**, and **Release = 200ms**.

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

    .main-grid {
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Top Stage Bar */
    .stage-tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      width: 100%;
    }
    .stage-tab {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 4px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .stage-tab.active {
      background: #ecfdf5;
      border-color: #10b981;
      box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
    }
    .stage-tab .title {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
    }
    .stage-tab.active .title {
      color: #059669;
    }
    .stage-tab .val {
      font-size: 11px;
      color: #64748b;
    }

    /* Graph Canvas Card */
    .graph-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px 6px;
      position: relative;
    }
    svg {
      width: 100%;
      height: 180px;
      overflow: visible;
      display: block;
    }

    /* Frequency Bar / Meter */
    .meter-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .meter-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }
    .meter-val {
      font-size: 13px;
      font-weight: 700;
      color: #059669;
      font-variant-numeric: tabular-nums;
    }
    .meter-track {
      position: relative;
      height: 16px;
      background: #f1f5f9;
      border-radius: 8px;
      overflow: hidden;
    }
    .meter-fill {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 20%;
      background: linear-gradient(90deg, #10b981 0%, #34d399 70%, #f59e0b 100%);
      border-radius: 8px;
      transition: width 0.08s linear;
    }
    .meter-base-line {
      position: absolute;
      left: 20%;
      top: 0;
      bottom: 0;
      width: 2px;
      background: #64748b;
      z-index: 2;
    }

    /* Controls */
    .ctrl-row {
      display: flex;
      justify-content: center;
      gap: 10px;
      width: 100%;
      max-width: 600px;
    }
    .btn {
      flex: 1;
      padding: 10px 16px;
      border-radius: 10px;
      border: none;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s ease, transform 0.1s ease;
    }
    .btn-play {
      background: #10b981;
      color: #ffffff;
    }
    .btn-play:active {
      background: #059669;
    }
    .btn-step {
      background: #e2e8f0;
      color: #1e2945;
      flex: 0 0 auto;
    }
    .btn-step:hover {
      background: #cbd5e1;
    }

    .key-state {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 12px;
      background: #f1f5f9;
      color: #64748b;
    }
    .key-state.on {
      background: #dcfce7;
      color: #166534;
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="stage-tabs">
      <div class="stage-tab" id="tab-a" onclick="selectStage(0)">
        <div class="title">Attack</div>
        <div class="val">120 ms</div>
      </div>
      <div class="stage-tab" id="tab-d" onclick="selectStage(1)">
        <div class="title">Decay</div>
        <div class="val">350 ms</div>
      </div>
      <div class="stage-tab" id="tab-s" onclick="selectStage(2)">
        <div class="title">Sustain</div>
        <div class="val">40% (+80%)</div>
      </div>
      <div class="stage-tab" id="tab-r" onclick="selectStage(3)">
        <div class="title">Release</div>
        <div class="val">200 ms</div>
      </div>
    </div>

    
    <div class="graph-card">
      <svg viewBox="0 0 500 180" id="envSvg">
        <defs>
          <linearGradient id="curveGrad" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#10b981" stop-opacity="0.35"/>
            <stop offset="100%" stop-color="#10b981" stop-opacity="0.0"/>
          </linearGradient>
        </defs>

        
        <line x1="45" y1="20" x2="480" y2="20" stroke="#f1f5f9" stroke-width="1" />
        <line x1="45" y1="84" x2="480" y2="84" stroke="#f1f5f9" stroke-width="1" />
        <line x1="45" y1="140" x2="480" y2="140" stroke="#e2e8f0" stroke-width="1" />

        
        <line x1="330" y1="10" x2="330" y2="155" stroke="#94a3b8" stroke-dasharray="3,3" stroke-width="1.5" />
        <text x="335" y="165" fill="#64748b" font-size="10" font-weight="600">Key Released</text>
        <text x="50" y="165" fill="#64748b" font-size="10" font-weight="600">Key Pressed</text>

        
        <text x="40" y="24" text-anchor="end" fill="#059669" font-size="11" font-weight="700">Peak Cutoff</text>
        <text x="40" y="88" text-anchor="end" fill="#64748b" font-size="10" font-weight="600">Sustain (40%)</text>
        <text x="40" y="144" text-anchor="end" fill="#64748b" font-size="11" font-weight="700">Base Cutoff</text>

        
        
        <polygon points="45,140 110,20 240,84 330,84 430,140 430,140 45,140" fill="url(#curveGrad)" />

        
        <polyline id="envLine" points="45,140 110,20 240,84 330,84 430,140" fill="none" stroke="#10b981" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />

        
        <rect id="highlightRect" x="45" y="15" width="65" height="130" fill="rgba(16,185,129,0.12)" rx="4" style="display:none;" />

        
        <line id="playhead" x1="45" y1="15" x2="45" y2="145" stroke="#0ea5e9" stroke-width="2" stroke-dasharray="2,2" style="display:none;" />
        <circle id="playDot" cx="45" cy="140" r="5" fill="#0ea5e9" stroke="#ffffff" stroke-width="2" style="display:none;" />
      </svg>
    </div>

    
    <div class="meter-card">
      <div class="meter-header">
        <span>Filter Cutoff Frequency</span>
        <span class="key-state" id="keyBadge">IDLE</span>
        <span class="meter-val" id="freqVal">400 Hz (Base)</span>
      </div>
      <div class="meter-track">
        <div class="meter-base-line" title="Base Cutoff"></div>
        <div class="meter-fill" id="meterFill"></div>
      </div>
    </div>
  </div>

  
  <div class="ctrl-row">
    <button class="btn btn-play" id="playBtn" onclick="triggerEnvelope()">
      <span>▶ Play Note & Sweeps (Audio)</span>
    </button>
  </div>

  <script>
    let audioCtx = null;
    let animFrame = null;
    let currentStage = -1;

    const stages = [
      { name: 'Attack',  x1: 45,  x2: 110, y1: 140, y2: 20,  freq1: 400,  freq2: 4800, dur: 120, tab: 'tab-a' },
      { name: 'Decay',   x1: 110, x2: 240, y1: 20,  y2: 84,  freq1: 4800, freq2: 2160, dur: 350, tab: 'tab-d' },
      { name: 'Sustain', x1: 240, x2: 330, y1: 84,  y2: 84,  freq1: 2160, freq2: 2160, dur: 450, tab: 'tab-s' },
      { name: 'Release', x1: 330, x2: 430, y1: 84,  y2: 140, freq1: 2160, freq2: 400,  dur: 200, tab: 'tab-r' }
    ];

    function selectStage(index) {
      currentStage = index;
      document.querySelectorAll('.stage-tab').forEach((t, i) => {
        t.classList.toggle('active', i === index);
      });

      const s = stages[index];
      const hl = document.getElementById('highlightRect');
      hl.style.display = 'block';
      hl.setAttribute('x', s.x1);
      hl.setAttribute('width', s.x2 - s.x1);

      updateCutoffDisplay(s.freq2);
    }

    function updateCutoffDisplay(freq) {
      const minF = 400, maxF = 4800;
      const pct = Math.min(100, Math.max(8, ((freq - minF) / (maxF - minF)) * 80 + 20));
      document.getElementById('meterFill').style.width = pct + '%';
      document.getElementById('freqVal').textContent = Math.round(freq) + ' Hz';
    }

    function triggerEnvelope() {
      if (animFrame) cancelAnimationFrame(animFrame);

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

      const now = audioCtx.currentTime;
      const osc = audioCtx.createOscillator();
      const filter = audioCtx.createBiquadFilter();
      const gain = audioCtx.createGain();

      // Rich sawtooth wave to clearly hear cutoff modulation
      osc.type = 'sawtooth';
      osc.frequency.setValueAtTime(110, now); // A2 note

      // Dedicated Filter Envelope
      filter.type = 'lowpass';
      filter.Q.setValueAtTime(4.0, now); // mild resonance to emphasize sweep

      // Attack: 120ms to 4800Hz
      filter.frequency.setValueAtTime(400, now);
      filter.frequency.exponentialRampToValueAtTime(4800, now + 0.12);

      // Decay: 350ms to Sustain level (2160Hz)
      filter.frequency.exponentialRampToValueAtTime(2160, now + 0.12 + 0.35);

      // Release at 0.95s: 200ms back down to 400Hz
      filter.frequency.setValueAtTime(2160, now + 0.92);
      filter.frequency.exponentialRampToValueAtTime(400, now + 0.92 + 0.20);

      // Master Amp envelope (open during key press, gentle release)
      gain.gain.setValueAtTime(0.3, now);
      gain.gain.setValueAtTime(0.3, now + 0.92);
      gain.gain.linearRampToValueAtTime(0.001, now + 0.92 + 0.22);

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

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

      // Visual Animation
      animateVisuals();
    }

    function animateVisuals() {
      const playhead = document.getElementById('playhead');
      const dot = document.getElementById('playDot');
      const badge = document.getElementById('keyBadge');
      const hl = document.getElementById('highlightRect');

      hl.style.display = 'none';
      playhead.style.display = 'block';
      dot.style.display = 'block';

      const totalDur = 1120; // ms: 120 + 350 + 450 (hold) + 200 (rel)
      const startTime = performance.now();

      function frame(time) {
        const elapsed = time - startTime;
        if (elapsed > totalDur) {
          playhead.style.display = 'none';
          dot.style.display = 'none';
          badge.textContent = 'IDLE';
          badge.className = 'key-state';
          document.querySelectorAll('.stage-tab').forEach(t => t.classList.remove('active'));
          updateCutoffDisplay(400);
          return;
        }

        let stageIdx = 0;
        let segElapsed = elapsed;
        let activeStage = stages[0];

        if (elapsed < 120) {
          stageIdx = 0;
          segElapsed = elapsed;
        } else if (elapsed < 470) {
          stageIdx = 1;
          segElapsed = elapsed - 120;
        } else if (elapsed < 920) {
          stageIdx = 2;
          segElapsed = elapsed - 470;
        } else {
          stageIdx = 3;
          segElapsed = elapsed - 920;
        }

        activeStage = stages[stageIdx];
        const progress = Math.min(1, Math.max(0, segElapsed / activeStage.dur));

        const curX = activeStage.x1 + (activeStage.x2 - activeStage.x1) * progress;
        const curY = activeStage.y1 + (activeStage.y2 - activeStage.y1) * progress;
        const curFreq = activeStage.freq1 + (activeStage.freq2 - activeStage.freq1) * progress;

        playhead.setAttribute('x1', curX);
        playhead.setAttribute('x2', curX);
        dot.setAttribute('cx', curX);
        dot.setAttribute('cy', curY);

        updateCutoffDisplay(curFreq);

        // Highlight tab
        document.querySelectorAll('.stage-tab').forEach((t, i) => {
          t.classList.toggle('active', i === stageIdx);
        });

        if (stageIdx <= 2) {
          badge.textContent = 'KEY HELD';
          badge.className = 'key-state on';
        } else {
          badge.textContent = 'RELEASE';
          badge.className = 'key-state';
        }

        animFrame = requestAnimationFrame(frame);
      }

      animFrame = requestAnimationFrame(frame);
    }

    // Default stage view
    selectStage(0);
  </script>
</body>
</html>

What happens if you tweak the filter envelope and hear no change in volume at all?

## Common Pitfall: Filter Envelope vs. Amp Envelope

A frequent mistake is expecting the filter envelope to make a sound quieter or silent. The filter envelope modifies **spectral brightness** (timbre), whereas the **VCA** (amplifier envelope) governs **amplitude** (volume).

If your amplifier sustain is zero, the note will fade to complete silence even if your filter envelope remains wide open at maximum cutoff frequency.

Next time you sculpt a synthesizer patch, try setting the base cutoff as low as possible first so the filter envelope has maximum room to carve out the harmonic motion.

music-technology

Mapping Dedicated ADSR Envelopes to Filter Cutoff. Explain how routing a secondary envelope generator to the VCF cutoff parameter alters the sound's harmonic brightness over time.

Learning Synths: Modulating Filters with Envelopes

Synth Secrets: Envelopes, VCFs, and Dynamic Timbre Control by Gordon Reid

A Level Music Technology: Component 4 – Synthesis, Envelopes, and Filter Cutoff Modulation

Pedagogical strategy for Year 13 (A2 Level): Employ a dual-anchor approach linking physics/signal flow to practical DAW sound design. Begin with visual oscilloscope/spectrogram demonstrations to decouple amplitude modulation (VCA) from harmonic filtering (VCF). Have students reconstruct staple synth archetypes (e.g., Minimoog synth bass, sweeping polyphonic brass, snappy plucked lead) by explicitly calculating and graphing the ADSR cutoff trajectory relative to $f_{\text{base}}$. Reinforce exam-board specific terminology (Pearson Edexcel / AQA Component 4 synthesis criteria) by assessing students on identifying envelope stages directly from annotated DAW spectrogram screenshots.

Mapping Dedicated ADSR Envelopes to Filter Cutoff

The Dynamic Harmonic Spectrum

Routing the Secondary Envelope