9) Le easing

Pour donner un aspect plus naturel aux déplacements graphiques d’objets, il existe une série de calculs simples. Accélération, décélération, rebonds, trajectoires. Le easing est l’une de ces méthodes de calcul.

Précédent | 10/16 | Suivant

Une bille sur un sol plat ne se déplace pas de son point de départ à son point d’arrivée à la même vitesse : partant à toute vitesse, elle décélère jusqu’à s’arrêter. Cet effet ne demande pas de calcul complexe, un principe simple permet de l’émuler.

Pour réaliser ce code, il nous faut connaitre le point de départ et le point d’arrivée de la balle, ainsi que la valeur de l’easing. Cette dernière valeur sera un chiffre entre 0 et 1. Mais pas 0, sinon la balle ne bougera pas.

A chaque fois que processing va exécuter la fonction draw(), une trentaine de fois par seconde donc, il va approcher la balle vers le point d’arrivée. L’astuce est qu’il va effectuer non pas un déplacement fixe (un pixel à chaque fois par exemple) mais une fraction de l’espace qu’il lui reste à parcourir. Imaginons qu’il fasse à chaque fois la moitié du temps qu’il lui reste à parcourir. Cela donnerait ceci :

Le premier déplacement est énorme comparé au deuxième. Ensuite, la balle se déplace de moins en moins. Mathématiquement, la balle n’atteindra jamais son point d’arrivée, mais visuellement, elle semblera ne plus bouger après un certain nombre de déplacement.

Voici un premier code pour tester ceci.

// point d'arrivee de la balle
int arriveex=560;
int arriveey=560;

// coordonnées de la balle au départ
float ballex=40;
float balley=40;

// vitesse du easing
float easing=0.01;

void setup(){
 size(600,600);
 noStroke();
 smooth();
}

void draw(){
 background(0);
 // calcule la nouvelle position d'après la position antérieure
 ballex = ballex + (arriveex-ballex)*easing;
 balley = balley + (arriveey-balley)*easing;

 // dessiner le cercle
 ellipse(ballex,balley,30,30);
}

La variable "easing" peut être modifiée (elle doit rester entre 0 et 1) pour modifier la vitesse de déplacement de la balle. Plus le chiffre est petit, plus le déplacement est lent. A 0, la balle ne bouge plus.

On peut utiliser le easing pour rendre plus fluide le déplacement d’un objet qui suit une trajectoire comme un tracking vidéo, ou comme dans l’exemple suivant, la position de la souris.

// declarer les variables globales
float easing, px, py;

void setup(){
 size(600,600);
 // position initiale
 px=width/2;
 py=height/2;
 // la quantite de easing : un chiffre entre 0 et 1 (mais pas 0)
 easing =0.05;

 noStroke();
 smooth();
}

void draw(){
 background(0);
 // calcule la nouvelle position d'après la souris et la position antérieure
 px = px + (mouseX-px)*easing;
 py = py + (mouseY-py)*easing;
 // dessiner le cercle
 ellipse(px,py,30,30);
}

Ici la balle suit la souris avec un effet de retard, et corrige en temps réel sa trajectoire, ce qui donne une belle fluidité au comportement de la balle à peu de frais.