Andamenti non lineari con la libreria p5.func

    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 /*1*/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/*1*/ e /**/= ease.elasticOut( t );
let y = lerp( 10, 80,/*1*/ 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 libreria p5.func.

Per far gestire autonomamente sia la variazione dei parametri che la variabile di controllo t si può usare la libreria p5.tween.

Strutturazione dei file:

• CARTELLA-SKETCH
  • libs
    • p5.min.js
    • p5.func.min.js
  • index.html
  • sketch.js