Andamenti non lineari con la libreria p5.tween

    let p5tween = p5.tween.manager; 
let attributi = { y: 10 };
let animazione = p5tween.addTween( attributi ); 

function setup() {
    animazione.addMotion('y', 90, 900, 'easeInElastic');   
    animazione.startLoop();   
}

function draw() {
    background(200);
    circle(50, attributi.y, 12); 
}
  

  let p5tween = p5.tween.manager; 
let attributi = { y: 10 };
let animazione = p5tween.addTween( attributi ); 

Ottiene un riferimento al gestore delle animazioni (p5tween),
crea una struttura dati (un oggetto) con una proprietà y impostata inizialmente a 10,
crea un’istanza della classe (Tween) che memorizza e gestisce le interpolazioni.

  animazione.addMotion('y', 90, 900, 'easeInElastic');   
animazione.startLoop(); 

Aggiunge un’interpolazione di y verso il valore 90, da raggiungere in 900 ms con un andamento easeInElastic. Fa partire in loop l’interpolazione.

  circle(50, attributi.y, 12); 

Disegna il cerchio usando il valore attuale di y interpolato automaticamente.

Provare a duplicare la riga animazione.addMotion(...) e modificare il valore di destinazione di y usando un valore diverso da 90. Eventualmente si può modificare anche la durata e il tipo di interpolazione scegliendo fra gli andamenti disponibili.

Strutturazione dei file:

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