Forma d'onda radiale

Sono le onde radiali con i campioni del frammento audio in esecuzione al posto delle oscillazioni di sin(): la forma d’onda si avvolge intorno al centro, e il raggio segue il suono.

    let sound;
let fft;

async function setup() {
    createCanvas( 670, 240 );
    sound = await loadSound( 'liszt.mp3' );
    fft = new p5.FFT();
    sound.connect( fft );
}

function draw() {
    background( 255 );
    let samples = fft.waveform();
    for (let i = 0; i < samples.length; i++) {
        let radianti = map( i, 0, samples.length, 0, TWO_PI );
        let raggio = map( samples[i], -0.5, 0.5, 0, 120 );
        let x = 335 + cos(radianti)*raggio;
        let y = 120 + sin(radianti)*raggio;
        circle( x,y, 1 );
    }
}

function mousePressed() {
    userStartAudio();
    if (sound.isPlaying()) {
        sound.stop();
    } else {
        sound.play();
    }
}

Files

Algoritmo

all'avvio:                                                        setup()
    caricare il brano e creare l'analisi                          p5.FFT
    collegare il brano all'analisi                                connect()

a ogni fotogramma:                                                draw()
    leggere i campioni del frammento in esecuzione                waveform()
    per ogni campione:                                            for()
        ricavarne un angolo, dalla posizione nell'array           map()
        e un raggio, dal valore del campione                      map()
        disegnare il punto con quell'angolo e quel raggio         cos()

a ogni clic:                                                      mousePressed()
    avviare il brano, o fermarlo se è in esecuzione

Istruzioni

Distribuisce i 1024 campioni restituiti da waveform() lungo un giro completo, come i punti delle onde radiali: ogni campione ha il suo angolo.

Il campione diventa il raggio: 60 pixel quando vale 0, più lontano dal centro per i valori positivi e più vicino per quelli negativi. I campioni vanno da -1 a 1, ma quasi tutti stanno fra -0.5 e 0.5: con questo intervallo le onde si vedono anche nei passaggi più deboli.

Variazioni

Con il secondo audio presente nella cartella dello sketch, un brano elettronico con un volume più alto, le onde sono quasi sempre più ampie:

Con uno sfondo semitrasparente le forme dei fotogrammi precedenti restano visibili per un po’, come una scia:

Approfondimenti:

Crediti: