L'easing en animation

Le concept

L'easing (ou interpolation non linéaire) transforme un mouvement mécanique en mouvement organique. Au lieu de déplacer un objet à vitesse constante, on accélère au départ et décélère à l'arrivée. En p5.js, la fonction lerp(a, b, t) interpole linéairement entre a et b selon t. Pour obtenir un easing, on applique une courbe à t : t*t (ease-in), 1-(1-t)*(1-t) (ease-out), ou la combinaison smoothstep t*t*(3-2*t).

Le code

// Easing: circle follows mouse with smoothstep
let x = 0, y = 0;
function setup() { createCanvas(400, 280); }
function draw() {
  background(11, 15, 20);
  // Smoothstep easing toward mouse
  let t = 0.08;
  x = lerp(x, mouseX, t);
  y = lerp(y, mouseY, t);
  noStroke(); fill(55, 227, 195);
  ellipse(x, y, 24, 24);
  // Trail
  fill(55, 227, 195, 40);
  ellipse(mouseX, mouseY, 10, 10);
}

Pour aller plus loin

Explorez les autres cours gratuits sur la page Apprendre, ou réservez un appel pour discuter de votre projet.