Attack, Decay, Sustain, Release
The story behind The Envelope
Inspired by Envelope (music) on Wikipedia
Built with Web Audio API (AudioContext, OscillatorNode, GainNode) · Canvas 2D
Techniques Scroll-Driven Synthesis · ADSR Gain Mapping · Layered Stroke Visualization
Direction Make the ADSR envelope visible and audible simultaneously — scroll to draw the curve while a sine wave oscillator responds in real-time
Result A scroll-driven synthesizer where your scroll position controls a 220Hz sine wave through Attack, Decay, Sustain, and Release phases while Canvas draws the cyan-glowing envelope curve
The Story
Before Robert Moog, synthesizers made sounds that started and stopped. On. Off. Binary. The problem was that nothing in nature works that way.
Pluck a guitar string and the sound doesn’t simply appear at full volume - it takes a few milliseconds to reach peak intensity. That initial rush is the attack. Then the brightness fades as the string settles into its vibration - that’s the decay. What remains is a steady tone held for as long as you keep the string pressed - the sustain. Finally, release the string and the sound dies away - that’s the release.
In the 1960s, Moog codified this pattern into four simple parameters: ADSR. Attack, Decay, Sustain, Release. It was a gift to musicians: finally, electronic sounds could breathe.
But Moog’s insight went deeper than music. He had identified a universal pattern. Everything that exists in time follows an envelope. A relationship has an attack phase (meeting, intensity) and a decay (settling into familiarity). It sustains at some level until the release (gradual or sudden). A life. A career. A day. The same shape.
The Take
We made the envelope visible and audible at once.
Scroll down and you draw the curve. The experience starts at silence - gain at zero, the bottom of the graph. As you scroll through the attack phase, a sine wave fades in and the curve rises sharply toward its peak.
Then decay - the curve falls partway back down as the initial intensity settles. You’ve passed the moment of maximum impact. What remains is sustainable.
Sustain is the long middle section. The level holds steady. This is the part we actually live in most of the time: not the initial rush, not the ending, but the maintenance. Scroll slowly and linger here. Feel what it means to hold.
Then release. The curve descends toward silence. The gain decreases. What began must end. At the bottom, the sound is gone, and the graph shows only what was.
The texts that appear during each phase name what you’re feeling. Attack: the beginning. Decay: the settling. Sustain: the holding. Release: the letting go. And finally: the revelation that this shape is everywhere.
The Tech
Canvas 2D renders the envelope curve in real-time as you scroll. The grid behind it shows the four ADSR sections as vertical divisions, with horizontal lines indicating amplitude levels.
Web Audio API creates the actual sound. We create an oscillator (a simple sine wave at 220Hz - the note A3), connect it to a gain node, and modulate the gain based on scroll position. The envelope shape directly controls what you hear.
The key insight was mapping scroll position to envelope position. We divided the scroll height into five sections:
- 0-20%: Attack (0 to 1.0 amplitude)
- 20-35%: Decay (1.0 to 0.6 amplitude)
- 35-75%: Sustain (hold at 0.6)
- 75-95%: Release (0.6 to 0)
- 95-100%: Silence (revelation phase)
The getEnvelopeValue() function calculates amplitude at any scroll position by determining which phase we’re in and interpolating linearly within that phase.
Scroll-driven synthesis means you control the sound with your thumb or scroll wheel. Move fast and the envelope compresses. Move slow and you can hear each phase distinctly. The audio responds instantly to your scroll velocity.
The cyan glow on the curve uses a layered stroke technique - a thick, semi-transparent stroke beneath a thin, opaque one - to create the sense of light emission without WebGL.
The Experience
Click “Enable Sound” first. The experience works visually without audio, but the point is the connection between shape and sound.
Scroll down slowly. Watch the curve draw itself. Hear the tone rise, settle, hold, and finally fade. Feel the phases in your body - the anticipation of attack, the resignation of decay, the patience of sustain, the grief of release.
When you reach the bottom, you’ll see the complete envelope. The shape of every note. The arc of every feeling.
Then scroll back up if you want. The curve redraws. The sound returns. Everything that ends can begin again.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.