Andamenti non lineari con la libreria p5.func

// height=100 lines=auto
let ease = new p5.Ease();  // inizializza generatore andamenti
let t = 0;
let tVel = 0.02;

function draw()
{
    let e = ease.elasticOut( t );  // ottieni andamento
    let y = lerp( 10, 90, e );

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

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

let ease = new p5.Ease();

Prepara il generatore di funzioni che permetterà di ottenere anche andamenti diversi da quello lineare e lo identifica con il nome ease.

let e = ease.elasticOut( t );
let y = lerp( 10, 80, e );

Legge il valore di andamento corrispondente al momento t e lo usa con la funzione lerp() per ottenere il valore di y del cerchio.

Provare a sostituire elasticOut con sineOut, quinticOut, bounceOut o uno degli altri andamenti disponibili con la la libreria p5.func.

Al momento non è disponibile nessuna libreria ufficiale che gestisca autonomamente anche la variabile di controllo t. Una libreria indipendente che si può provare a usare è p5.tween. Altre sono p5.animate.js e p5.ijeoma.js ma non vengono aggiornate da diversi anni.

Strutturazione dei file: