;
let audio = new Audio();

audio.src = 'Junk/kara.mp3';
audio.play();

let audCtx   = new AudioContext(),
    analyser = audCtx.createAnalyser(),
    source   = audCtx.createMediaElementSource(audio);


let cX, cY, sum = 0, xOff = 0, yOff = 46877, angle = 0;

source.connect(analyser);
analyser.connect(audCtx.destination);
function setup () {
    createCanvas(windowWidth, windowHeight);
    noStroke();
    cX = windowWidth/2;
    cY = windowHeight/2;
}

let last = 0, sOff = 500;
var d = 1;
var time = 0;
function draw () {

    sum = 0;

    noStroke();
    let amplitudes = new Uint8Array(100);

    analyser.getByteFrequencyData(amplitudes);

    for(let i = 0; i < 100; i++){
        sum += amplitudes[i];
    }

    sum /= 100;

    fill('rgba(255, 255, 255, 0.1)');
    rect(0, 0, width, sum*2);


    background('rgba(15, 14, 98, 0.2)');

    let x = noise(xOff) * sum *  sin(angle) * 2 * cos(angle),
         y = noise(yOff) * sum * sin(angle) * 2 * cos(angle);

    let x2 = noise(xOff) * sum *  sin(-angle) * 2.5,
         y2 = noise(yOff) * sum * cos(angle) * 2.5;

    let size = sum * noise(sOff);
    if(sum - last > 10){
        d*=-1; // to flip rotation direction
    }
    fill('#c4a4d4');
    ellipse(cX +x, cY +y, size, size);

    fill('#a2c6b2');
    ellipse(cX -x,cY  -y, size, size);

    fill('#c4a4d4');
    ellipse(cX +x2, cY +y2, sum, sum);

    fill('#a2c6b2');
    ellipse(cX -x2,cY  -y2, sum, sum);

    xOff += 0.01;
    yOff += 0.02;
    sOff += 0.01;
    angle += sum/8000 * d;
    last = sum;
}

لن تصدق ان قلت لك ان الفرق بين الـ 2 frames لا يتعدى 30ms في اسوأ الاحوال

الخوارزمية "فايتة بالحيط" هههه، فقط اقوم بجمع كل الـ amplitudes خلال الفريم ثم اقسمها على عددها واستخدم perlin noise من اجل الـ smothness ومن ثم ارسم :D