Interpretazione grafica dello spettrogramma

    let sound;
let fft;

function preload() {
    sound = loadSound( '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.

Provare a usare il secondo audio presente nella cartella dello sketch:

  sound = loadSound( '/*1*/like_analogue.mp3/**/' );

Strutturazione dei file:

• CARTELLA-SKETCH
  • libs
    • p5.min.js
    • p5.sound.min.js
  • index.html
  • sketch.js
  • like_analogue.mp3
  • liszt.mp3