Interpretazione grafica della "energia"

    let sound;
let fft;

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

function setup() {
    createCanvas( 670, 260 );
    colorMode( HSL );
    noFill();
    strokeWeight(3);

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

function draw() {
    background(100);

    let spectrum = fft.analyze();

    let redEnergy = fft.getEnergy("bass");
    let greenEnergy = fft.getEnergy("lowMid");
    let bluEnergy = fft.getEnergy("mid");

    stroke(0,100,50);
    circle( 335, 130, redEnergy);  

    stroke(80,100,45);
    circle( 335, 130, greenEnergy);  

    stroke(200,100,60);
    circle( 335, 130, bluEnergy);  
}
  

  let spectrum = fft.analyze();

Analizza l’audio in esecuzione in questo istante. Va chiamata a ogni fotogramma su un’istanza di p5.FFT (qui fft), perché getEnergy() legge solo l’ultima analisi fatta.

  let redEnergy = fft.getEnergy("bass");
let greenEnergy = fft.getEnergy("lowMid");
let bluEnergy = fft.getEnergy("mid");

Ricavano dall’ultima analisi il livello di volume delle frequenze basse, medio-basse e medie.

  circle( 335, 130, redEnergy);
...
circle( 335, 130, greenEnergy);
...
circle( 335, 130, bluEnergy);

Diventano il diametro di tre cerchi concentrici. Sono usati direttamente, senza map(), perché un intervallo da 0 a 255 è adatto a questo canvas.

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

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

Provare anche a impostare parametri di getEnergy() diversi, fra “bass”, “lowMid”, “mid”, “highMid” e “treble”.

Strutturazione dei file:

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