Interpretazione grafica dello spettrogramma

// height=200 lines=auto
var sound;

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);

    var spectrum = fft.analyze( 256 );

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

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

var spectrum = fft.analyze( 256 );

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

var 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.

var diam = spectrum[i]*0.6;

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

Provare a usare il secondo audio presente nella cartella "assets":
sound = loadSound( '../assets/like_analogue.mp3' );

 


Strutturazione dei file: