Bases de l'animation sous Processing (partie 2)

Dans la première partie, nous avons préciser les éléments les plus basiques pour pouvoir dessiner sous Processing. Animer n'est pas très différents du dessin, surtout si nous avons pas mal de notions déjà implémentées.
Animer c'est dessiner plusieurs images légèrement différentes d'une  manière successive pour créer l'illusion qu'il s'agit d'un objet en animation. La fréquence de l'animation et le degré de changement entre les images jouent un rôle important dans la qualité de l'animation.
D'un côté, si la fréquence de dessin est top basse, l'animation est perdue parce qu'elle devient un ensemble d'états (de l'objet en question) clairement distincts. Si elle est trop élevé, l'animation est perdues parce que l'utilisateur ne peut voir que le premier et le dernier états; il aura la sensation que l'objet en question a été téléporté de la première position vers la deuxième position.
De l'autre côté, les différences entre les différentes images doivent être non null, autrement il n'y a plus d'animation mais des objets immobiles. Comme elles ne doivent pas être trop grandes, sinon, on risque d'avoir le même effet de téléportation sensé avec une grande fréquence de dessin ( de mise à jour).
De toute ces notions, Processing a essayé d'implémenter une bonne partie. Si les objets de l'animation et la différence entre les différentes images (frames) sont la responsabilité de l'utilisateur (chaque utilisateur peut créer ce qu'il veut), Processing a pu apporté sa valeur ajoutée concernant le principe de l'animation et de la fréquence de l'animation.
Un script de base d'animation sous Processing doit définir les deux fonctions : setup() et draw().
setup()  : est, comme son nom l'indique, une fonction d'initialisation qui sera appelée une seule fois avant toutes les autres fonctions. Cette fonction est généralement utilisée pour initialiser les variables manipulées et les définir les propriétés générale de l'animation telles que l'arrière plan et la taille de la fenêtre.
draw() : est la fonction qui permet de dessiner le contenu de la fenêtre. Cette fonction est appelée 60 fois par seconde. Cette philosophie permet d'éviter au utilisateur de gérer deux choses :

1. La boucle de dessin,
2. Le rythme de dessin.

Prenons un exemple :

int i, j;

void setup(){
  size(600, 600);
  i = 0;
  j = 0;
}

void draw(){
  i++;
  j++;
  ellipse(i, j, 5, 5); // un cercle de 5 pixels
}

Ce script nous permet de dessiner une ligne qui grandit peu à peu en diagonale de la fenêtre. La question ici est : comment avons nous obtenu une ligne malgré que le script fait appel à la fonction "ellipse()" qui dessine un seul point ?
La réponse réside dans le fait que Processing ne vide pas la fenêtre entre deux appels à la fonction "draw()"; il y ajoute les nouvelles formes sans effacer les anciennes.
La méthode la plus simple pour effacer le contenu de la fenêtre est de re-dessiner l'arrière plan à chaque appel de la fonction "draw()". Ainsi, le script peut être modifié pour avoir un point qui se déplace en diagonale de la fenêtre au lieu d'avoir une ligne qui grandit.

int i, j;

void setup(){
  size(600, 600);
  i = 0;
  j = 0;
}

void draw(){
  background(255);
  i++;
  j++;
  ellipse(i, j, 5, 5);
}

A la fin, le point en déplacement finit par sortir de la fenêtre.

Le règles de dessin reste les mêmes que les règles présentées dans la première partie de cet article.

Note : l'utilisation de la méthode "ellipse()" qui dessine, à la base, la forme ovale nous permet de dessiner une un grand point. La méthode "point()" permet de dessiner un seul point mais il ne sera pas très visible sur les captures.