p5live.js

/* AUDIO INIT */
let mic,
    fftRaw,
    fft = [],
    numBins = 16,
    bands = 12;

let rInitial = 800;
let r = rInitial;
let gapInitial = r * 0.1;
let randRadius = 0;

function setup() {
    createCanvas(windowWidth, windowHeight);
    setupAudio();
}

function draw() {
    updateAudio();
    background(0);
    translate(windowWidth / 2, windowHeight / 2);
    strokeWeight(10);
    stroke(255);
    strokeCap(SQUARE);
    noFill();

    let distanceBetween = 0;
    r = rInitial;
    let gap = gapInitial + noise(millis() / 1000);

    let fillPercent;

    for (let i = 0; i <= 8; i++) {
        let freq = fft[i];
        fillPercent = freq / 255;
        strokeWeight(10 - i * 1);
        arc(-distanceBetween / 2, 0, r, r, Math.PI / 2, Math.PI / 2 + Math.PI * fillPercent);
        r -= gap;
    }

    // r = randRadius;
    r = rInitial;
    for (let i = 0; i <= 8; i++) {
        let freq = fft[i + 8];
        fillPercent = freq / 255;
        strokeWeight(10 - i * 1);
        arc(distanceBetween / 2, 0, r, r, (Math.PI * 3) / 2 + Math.PI * (1 - fillPercent), Math.PI / 2);
        r -= gap;
    }
}

function setupAudio() {
    userStartAudio();
    mic = new p5.AudioIn();
    mic.start();
    fftRaw = new p5.FFT(0.95, numBins);
    fftRaw.setInput(mic);
}

function updateAudio() {
    fftRaw.analyze();
    fft = fftRaw.logAverages(fftRaw.getOctaveBands(bands)); // array (0, 255)
}

preview.png