envelope generator

Envelope Generators, also known as ADSRs, are components that can be used to define how a value changes over time. By dragging the different handlers, the level of the output over time can be set precisely.

Envelope generators are very versatile and can be used to modulate almost anything in web synth. By default, ADSRs output values between 0 and 1. Usually, you want values in a different range though. When envelope generators are embedded in different [control-panel]s, there is often an "output range" setting that can be used to configure the range of values that it outputs:

Additionally, in the [graph-editor], the [scale-and-shift] node can be used to convert outputs from 0 to 1 and whatever output range you'd like.

stages

There are different stages to the operation of envelope generators. They switch between these different stages depending on configuration of their defined length, release start point, and loop point if configured.

triggering / gating

In order for the envelope to start producing values, it needs to be triggered or gated. This signals the envelope generator to start following the envelope and outputting values. In the [fm-synth] and other synthesizer-like situations, triggering the envelope takes place when a note is played. In more generic situations where envelope generators are used in the [graph-editor] as part of the [patch-network], the gate/ungate signal takes the form of an arbitrary input to the envelope generator and can come from any source.

While the generator is triggered, it will continue to progress through its envelope and output different values until it reaches the user-defined release start point:

looping

Once the envelope reaches this point, it will either:

1) Remain at this point and output the same value until it is ungated/released if no loop point is defined:

2) Or jump back to the loop point immediately and progress through the envelope again until it reaches the release start point again, at which point it will loop again etc.

technical implementation

The envelope generator in web synth is built using a variety of web technologies. The backend which takes all of the parmeters provided via the UI (envelope length in milliseconds, value output range, the steps and their configuration), handles trigger/untrigger events, and generates output values in realtime is written in Rust, compiled to WebAssembly, and driven by an [audio-worklet-processor] from [web-audio].

The UI is implemented using a graphics library called PIXI.js. The phase indicator that shows the current progress of the ADSR in realtime uses data shared from the backend running on the audio thread in realtime via SharedArrayBuffer.