Music

const sec = 5, Fs = 10000, size = sec * Fs, dotsPerFrame = 1000;

let freq1, freq2, ringRatio, modXTime;

let drawIndex = 0, startTime = 0, soundWave = [];

let waveHeight, halfHeight, randDelay;

function setup() {

    createCanvas(windowWidth, windowHeight);

    noStroke();

    background("black");

    waveHeight = height / 3;

    halfHeight = height / 2;

    randDelay = width / 10;

    let AudioContext = window.AudioContext || window.webkitAudioContext;

    audioCtx = new AudioContext();

    noLoop();

}

​

function init() {

    background("black");

    freq1 = random(100, 400) * TWO_PI / Fs;

    freq2 = random(100, 400) * TWO_PI / Fs;

    ringRatio = random(0.25, 0.75);

    modXTime = random(0.5, 1) ** 3 * 3;

    createWave();

    if (audioCtx) sound();

}

​

function createWave() {

    soundWave = [];

    for (let i = 0, l = sec * Fs; i < l; i++) {

        let s1 = sin(i * freq1);

        let s2 = sin(i * freq2);

        let t = i / Fs;

        let mt = t * modXTime;

        let mAmp = mt / pow(mt, mt);

        let s = lerp(s1, s1 * s2, ringRatio * mAmp);

        let amp = t / pow(t, t);

        soundWave.push(s * amp);

    }

}

​

function sound() {

    let array = audioCtx.createBuffer(1, size, Fs);

    let buff = array.getChannelData(0);

    buff.set(soundWave);

    let source = audioCtx.createBufferSource();

    source.buffer = array;

    source.connect(audioCtx.destination);

    source.start();

}

​

function draw() {

    fill("#fff1");

    let length = min(size, drawIndex + dotsPerFrame);

    for (; drawIndex < length; drawIndex++) {

        let x = drawIndex / size * width + pow(random(), 7) * randDelay;

        rect(x, halfHeight - soundWave[drawIndex] * waveHeight, 1, 1)

    }

    if (drawIndex >= size - 1) {

        drawIndex = 0;

        if (keyIsDown(27)) noLoop();

    }

​

    fill("#fff");

    let elapsedSec = (Date.now() - startTime) / 1000;

    rect(0, height - 3, elapsedSec / sec * width, 3)

}

​

function mousePressed() {

    if (Date.now() - startTime < sec * 1000) return;

    init();

    startTime = Date.now();

    drawIndex = 0;

    loop();

}