Processing

La ligne de temps

Pour créer une animation, il faut qu'il y ait du mouvement. Le mouvement implique un changement du dessin dans le temps, par exemple une modification de la position ou de la couleur d'un de ces éléments graphiques. Les informations liées à ces changements peuvent être stockées dans des variables.

Pour créer des animations, il faut savoir à quel moment nous nous trouvons par rapport à une ligne de temps. Pour ce faire, nous pouvons soit utiliser l'heure qu'il est, soit compter (par exemple de un à dix).

Quelle heure est-il?

Nous allons créer une horloge en appelant les méthodes hour(), minute() et second() de Processing. Nous allons utiliser le résultat de l'appel de ces méthodes pour faire varier la position sur l'axe horizontal de trois minces rectangles.

Le code pour réaliser cette horloge est très simple :

void setup() {
  size(60, 60);
  noStroke();
}

void draw() {
  background(0);

  // Les heures vont de 0 à 23, nous les convertissons à une
  // échelle de 0 à 60

  rect((hour() / 24.0) * 60, 0, 1, 20);
  rect(minute(), 20, 1, 20);
  rect(second(), 40, 1, 20);
}

Les images sont dessinées les unes par-dessus les autres. L'appel à l'instruction background(0) remplit l'espace de dessin avec la couleur définie en paramètre (le nombre 0 correspondant à du noir) ce qui revient à chaque fois à effacer l'image précédente.

Mesurer le temps qui passe

On peut obtenir le temps qui s'est écoulé depuis le début de l'exécution d'un sketch en utilisant la méthode millis(). Celle-ci retourne un nombre en millisecondes. Cette valeur peut être exploitée pour créer des animations. Il y a mille millisecondes dans une seconde : une précision suffisante pour animer des formes ou des sons.

Par ailleurs, vous pouvez également avoir besoin de créer des animations cycliques dont la fréquence (le nombre d'animations par cycle) s'adapte en fonction d'autres éléments, par exemple la taille de la fenêtre de visualisation de l'espace de dessin. Pour déterminer à partir d'une valeur donnée ce nombre d'animations par cycle, la solution la plus simple consiste à utiliser l'opérateur modulo %. En mathématique, le modulo permet d'obtenir le reste d'une division par un nombre. Par exemple, l'expression println(109 % 10); affichera 9, car 109 divisé par 10, donne 10 comme quotient et 9 comme reste. De manière plus générale, si on prend deux nombres x et y, le reste de la division de x par y est strictement inférieur à y. L'opérateur modulo nous permet donc de compter sans jamais dépasser un certain nombre (la base du modulo).

Dans le prochain exemple, nous allons utiliser la méthode millis() et l'opérateur % pour dessiner un cercle qui parcourt très rapidement le sketch selon des trajectoires diagonales. Ce cercle laisse derrière lui une traînée qui s'efface graduellement.

Le code de cette animation est le suivant :

void setup() {
  size(320, 240);
  noStroke();
  frameRate(60);
  smooth();
}

void draw() {
  fill(0, 0, 0, 10);
  rect(0, 0, width, height);
  fill(255);
  ellipse(millis() % width, millis() % height, 20, 20);
}

L'effacement du dessin précédent s'effectue à l'aide d'un rectangle semi-transparent. Ce procédé permet d'obtenir un effet de flou de mouvement contrairement à l'instruction background(). La présence de l'instruction smooth() au début du programme s'explique par notre amour des courbes lisses.

Un conseil : basez vos animations sur la mesure du temps plutôt que sur le décompte du nombre d'images dessinées. La vitesse de rendu peut très sensiblement se dégrader lorsque les capacités de l'ordinateur sont occupées à gérer un compteur : les animations deviennent alors moins fluides, plus saccadées. Ces limitations de performance n'existent pas lorsque l'on utilise les instructions associées à l'horloge interne de l'ordinateur pour mesurer le temps qui passe.

Pour satisfaire votre curiosité et malgré notre mise en garde sur l'utilisation de la méthode du décomptage du nombre d'images dessinées, nous allons néanmoins voir comment créer des animations à l'aide de compteurs, le principe de mis en oeuvre étant très simple

Animer à l'aide d'un compteur

Nous allons maintenant voir comment créer une animation en comptant, même si, rappelons-le, nous vous déconseillons cette méthode pour des questions de performance. Dans notre exemple, l'animation représentant une simple ligne qui tourne sans cesse.

Le code est relativement simple, le compteur d'images constituant l'essentiel du programme. A chaque degré de rotation de la ligne correspond le numéro d'une image dessinée.

int compteur;

void setup() {
  size(320, 240);
  frameRate(60);
  fill(0, 0, 0, 10);
  stroke(255);
  smooth();

  compteur = 0;
}

void draw() {
  compteur = compteur + 1;

  rect(0, 0, width, height);

  translate(width / 2, height / 2);
  rotate(radians(compteur));
  line(-height, -height, height, height);
}

On déclare un compteur en en-tête de l'application.

int compteur;

Dans le setup() on initialise notre compteur.

void setup() {
  size(320, 240);
  frameRate(60);
  fill(0, 0, 0, 10);
  stroke(255);
  smooth();

 compteur = 0; }

A chaque appel de méthode draw() on incrémente notre compte de 1.

compteur = compteur + 1;

On spécifie ensuite le repère de l'espace de dessin pour dessiner au centre et on génère un rotation qui dépend de compteur.

  translate(width / 2, height / 2);
  rotate(radians(compteur))

Une traîne est visible dans l'animation. La superposition des lignes en s'effaçant graduellement donne un effet moiré.