Funzioni di easing

// height=100 lines=auto
var t = 0;
var tVel = 0.01;

function draw() {

    var y = elasticOut( 10, 80, t );

    background(200);
    circle( 50,y, 6 );

    t += tVel;
    if (t > 1.0001) {
        t = 0;
    }
}

function elasticOut( start, stop, t ) {
    var ts=t*t;
    var tc=ts*t;
    return start+(stop-start)*(33*tc*ts-106*ts*ts+126*tc-67*ts+15*t);
}
var y = elasticOut( 10, 80, t );

Viene chiamata una funzione che non fa parte di p5.js ma che è stata definita dopo il draw(). La funzione è un riadattamento delle funzioni di Robert Penner.

 

Al momento non è disponibile una libreria ufficiale che gestisca automaticamente anche la variabile di controllo t. Nell'attesa si può utilizzare la libreria p5.ijeoma.js.

Per le funzioni di easing si può usare la classe p5.Ease della libreria p5.func. L'uso per le animazioni è un po' meno intuitivo ma si può usare per interpolare anche parametri sonori, ad esempio p5.Ease() Animation Easing (sorgente).