Envelope
An ADSR envelope you shape on its curve or with knobs, composed from Curve, useCurveEditing and Knob.
A block is a composition of components, to copy and adapt: the library has no Envelope component. The code tab has all of it.
How it is composed
| Part of the block | Component |
|---|---|
| The shape, with handles and bends | Curve, with useCurveEditing |
| Attack, decay, sustain and release | Knobs |
An envelope is four numbers, not free points, so the block keeps the numbers and makes the curve from them:
toPointsandfromPoints. The five points of the curve follow from the numbers, and the numbers from the points. The curve'spointsaretoPoints(adsr).constrainis the envelope's rule: after any move, the points aretoPoints(fromPoints(points)), so the end of the held note follows the knee, the release keeps its length, and nothing goes past the drawing.lockkeeps the start and the end of the held note in place, the peak at the top and the end of the release at the bottom: those points move in one axis, or have no handle.canAddandcanRemoveare off: an envelope always has five points.- The knobs follow the curve live.
onPointsChangesets the numbers at every step, which renders the knobs and the curve: five points render cheaply. For a lane of thousands of points, keep them inonGestureEndinstead, and nothing renders during a drag.
The bends of the three slopes are numbers too: drag the middle of a slope to bend it, or press Alt with Up or Down on the point before it.
Tuners
A classic tuner, a pedal tuner with a strobe, a guitar tuner with its strings and a voice's pitch wheel, each from readPitch and a few lines that write the reading to the page once per frame.
Styling
Style the parts with classes, data attributes and CSS variables, replace their elements, and build a registry on top.