const [ATTACK, DECAY, SUSTAIN, RELEASE, STOP] = [0, 1, 2, 3, 4];

let drawing = false;

let timestep = 0;

let lastY = 0;

const MAX = 4095;

const SCALE = 4096;

const slopes = [{ slope: 681, offset: 0 },

    { slope: 466, offset: 430 },

    { slope: 318, offset: 1020 },

    { slope: 217, offset: 1626 },

    { slope: 149, offset: 2174 },

    { slope: 102, offset: 2644 },

    { slope: 70, offset: 3028 },

    { slope: 48, offset: 3336 }];

​

const decaySlopes = [{ slope: 3, offset: 0 },

    { slope: 7, offset: -7 },

    { slope: 16, offset: -43 },

    { slope: 38, offset: -175 },

    { slope: 89, offset: -587 },

    { slope: 211, offset: -1802 },

    { slope: 500, offset: -5276 },

    { slope: 1186, offset: -14880 },];

​

class Envelope {

    constructor(a, d, s, r, maxTC = 2.5) {

        this.a = a; //rate, max of 1

        this.d = d;

        this.s = s; //level, max of 1

        this.r = r;

        this.stage = ATTACK;

        this.y = 0; //linear progress

        this.expo = 0; //exponential output

        this.releaseStartY = 0;

    }

​

    gateOn() {

        this.stage = ATTACK;

        //TODO: reset position. translate current pos to % of attack

        this.y = this.expo;

    }

​

    gateOff() {

        this.releaseStartY = this.expo;

        this.y = MAX;

        this.stage = RELEASE;

    }

​

    expoAttack(y) {

        const slopeObj = slopes[Math.trunc(y >> 9)];

        return Math.trunc(y * slopeObj?.slope / 256) + slopeObj?.offset;

    }

​

    expoDecay(y) {

        const slopeObj = decaySlopes[Math.trunc(y >> 9)];

        return Math.trunc(y * slopeObj?.slope / 256) + slopeObj?.offset;

    }

​

​

    expoCalc(startTC, endTC, t) {

        const maxY = (1 - Math.pow(Math.E, (-endTC))); //scaling factor used to normalize to 1

        if (endTC > startTC) return (1 - Math.pow(Math.E, (t * -endTC))) / maxY;

        return (Math.pow(Math.E, (t * -startTC)));

    }

​

    stepOutput() {

        if (this.stage == ATTACK) { //attack

            this.y += this.a;

            if (this.y >= MAX) { //max, done

                this.stage = DECAY;

                this.y = MAX; //cap max

            }

            this.expo = this.expoAttack(this.y);

        } else if (this.stage == DECAY) { //decay

            this.y -= this.d;

            this.expo = this.expoDecay(this.y) * ((MAX - this.s) / SCALE) + this.s;

​

            if (this.y <= 0) this.stage = SUSTAIN; //min, done

        } else if (this.stage == SUSTAIN) { //sustain

            this.y = this.s;

            this.expo = this.s;

        } else if (this.stage == RELEASE) { //release

​

            this.expo = this.expoDecay(this.y) * (this.releaseStartY / SCALE);

​

            this.y -= this.r; //min, done

            if (this.y <= 0) {

                this.stage = STOP;

                this.y = 0;

            }

        }

    }

}

​

let ADSR = new Envelope(.008 * MAX, .004 * MAX, .7 * MAX, .0015 * MAX);

​

function setup() {

    createCanvas(screen_width, screen_height);

    background(220); //grey

    textSize(75);

    textAlign(CENTER, CENTER);

    text('ADSR Envelope\nClick Me 🖱️', screen_width/2, screen_height/2);

}

​

function mousePressed() { //gate start

    if (!drawing) background(220);

    drawing = true;

    ADSR.gateOn();

}

​

function mouseReleased() { //gate end

    ADSR.gateOff();

}

​

function keyTyped() {

    if (key == 't' && mouseIsPressed) {

        ADSR.gateOn();

    }

}

​

function draw() {

    if (!drawing) return;

​

    for (i = timestep; i < (timestep + 4); i++) {

        //expo = ADSR.y;

        ADSR.stepOutput();

        expo = ADSR.expo / 4096;

        stroke(255, 0, 0); //red dots

        strokeWeight(2);

        point(i, (1 - ADSR.y / 4096) * screen_height);

​

        stroke(0); //black line

        strokeWeight(1);

        line(i - 1, (1 - lastY) * screen_height, i, (1 - expo) * screen_height);

        lastY = expo;

    }

​

    timestep = i;

​

    if (timestep >= screen_width) { //stop drawing when we hit the right edge

        timestep = 0;

        drawing = false;

        expo = 0;

    }

}