ADSR Preset Comparison

A plot-register recipe for visualizing how Attack/Decay/Sustain/Release shape an envelope, by stacking two contrasting presets in one diagram.

Pedagogical intent

ADSR is taught in nearly every synth tutorial, but the four parameters are abstract until you can see how they shape a curve. A single ADSR plot teaches “what each segment is” but not “why you care.” A comparison plot — two presets stacked — teaches the pedagogical payload: the same instrument can sound completely different just by changing the envelope shape.

The canonical comparison is “piano-like” (fast attack, short decay, low sustain, short release — a percussive pluck) vs. “pad-like” (slow attack, long sustain, long release — a sustained wash). After seeing both shapes side by side, a learner immediately grasps that the envelope is the dynamic character of the sound, independent of the oscillator.

This is plot register — it’s a function over time. The patch-register companion would show “ADSR → VCA’s CV input,” which explains where the envelope goes but not what shape it has.

Use a single generateAdsr (not the comparison) when teaching the parts of an envelope. Use generateAdsrComparison when teaching the expressive range of an envelope.

Visual recipe

Canvas: dimensions.tall (800 × 350) — comparison plots need vertical room for two stacked panels.
Padding: padding.labeled — time axis is labeled, amplitude axis is labeled.
Grid: drawGrid with sensible xDivisions (e.g., 8) and yDivisions: 4. No center line (envelope is unipolar 0 → 1).
Axes: drawAxes with xLabel: 't', yLabel: 'Level'.
Title: drawTitle — e.g., “ADSR Envelope Presets”.
Trace colors: pull from waveColors in order — preset 1 uses colors.primary, preset 2 uses colors.secondary. Each preset’s label is colored to match its trace.
Gate signal: render the gate as a dashed rectangle in colors.gate so the learner can see when the key is held vs released. The fall of the gate is the start of the release segment — this is a teaching moment.
Font: trace labels and segment labels (A / D / S / R) in fonts.mono at fontSizes.small.

Reuse drawGrid / drawAxes / drawTitle. Reuse colors and fontSizes. The only custom drawing is the envelope curve itself.

Generator call

import { generateAdsrComparison } from '../generators/adsr.js';

const svg = generateAdsrComparison([
  {
    options: { attack: 0.05, decay: 0.6, sustain: 0.2, release: 0.3 },
    label: 'Piano-like',
  },
  {
    options: { attack: 1.5, decay: 0.5, sustain: 0.8, release: 2.0 },
    label: 'Pad-like',
  },
]);

Already registered in src/scripts/generate-files.ts as adsr-comparison.svg. MDX reference: /images/synth-svg/adsr-comparison.svg.

Additional preset-specific variants live in src/generate-svg-files.ts (e.g., adsr-comparison-piano-pad.svg, adsr-comparison-perc-pluck.svg). When in doubt about which file to reference, check static/images/synth-svg/ for the exact filename used by surrounding articles — do not invent a third spelling.

For a single-envelope diagram (teaching the four segments individually), use generateAdsr({ attack, decay, sustain, release, label }) instead — it’s the same generator file, different function.

When adding new ADSR presets, prefer extending the comparison call’s array rather than creating a new generator. If you need fundamentally different rendering (e.g., logarithmic time axis, or showing a CV pedal modulating one parameter), then a new generator is warranted — and it should still reuse drawGrid / drawAxes / drawTitle.

Source articles

synth-kw-envelope-generator (primary user — introduces ADSR with single + comparison plots)
synth-kw-gate-trigger (uses the gate-signal styling to teach gate vs trigger)
Any guide article that contrasts envelope shapes for the same VCO (synth-kw, mm-deep)
Generator implementation: sub-packages/synth-svg/src/generators/adsr.ts (generateAdsr, generateAdsrComparison)