Interpretazione grafica dello spettrogramma

// height=200 lines=auto
let sound;
let fft;

function preload() {
    sound = loadSound( 'assets/liszt.mp3' );
}

function setup() {
    createCanvas( 670, 200 );
    colorMode( HSL, 360,100,100,100 );
    noStroke();

    sound.loop();
    fft = new p5.FFT();
}

function draw() {
    background(100);

    let spectrum = fft.analyze( 256 );

    for (let i = 0; i<spectrum.length; i++) {
        let fillHue = i*2;
        let x = i*4;
        let diam = spectrum[i]*0.6;
        fill( fillHue,100,50, 10 );
        circle( x,100, diam );
    }
}

colorMode( HSL, 360,100,100,100 );

Imposta la modalità HSL per poter cambiare la tonalità intervenendo solo sul primo parametro.

let spectrum = fft.analyze( 256 );

Crea un array di 256 elementi (spectrum) con i livelli di ogni banda di frequenza dell'audio in esecuzione.

let x = i*4;

Calcola la coordinata x di ogni cerchio in proporzionale alla banda di frequenza corrispondente. La coordinata può andare oltre il margine destro ma le frequenze visualizzate meglio sono quelle più basse.

let diam = spectrum[i]*0.6;

Calcola un diametro proporzionale al livello della banda di frequenza corrispondente.

sound = loadSound( 'assets/like_analogue.mp3' );

Strutturazione dei file: