A › 7 - Animation

Processing comporte deux fonctions spécifiques qui permettent de structurer les animations : setup() et draw().

Setup ( )

La fonction setup() comporte tout ce qui permet d'initialiser le programme, comme la taille de l'écran, les valeurs de variables, la couleur de fond et de tracé... Son contenu est exécuté une seule fois, au démarrage du programme.

Pour définir le contenu de la fonction setup() on utlise une syntaxe que l'on retrouvera dans la définition de fonctions :

void setup() {

  // instructions à exécuter dans la fonction setup();

}

Draw ( )

Programmer une animation suppose de définir un affichage qui se modifie dans le temps. Le contenu de la fenêtre d'affichage doit donc pouvoir être redéfini aussi souvent que nécessaire.

La fonction draw() contient toutes les instructions qui permettent de définir le contenu de la fenêtre à chaque instant. Elle est répétée indéfiniment, jusqu'à ce que l'utilisateur interrompe l'exécution du programme, sauf instruction particulière.

L'usage de variables, modifiées à chaque tracé en fonction de l'effet recherché, permet de donner une impression de mouvement.

On utilise la même syntaxe que pour setup() pour définir le contenu de la fonction draw() :

void draw() {

  // instructions à exécuter dans la fonction draw();

}

Voici un exemple : observer le code puis découvrir l'animation.

int abs; // la variable abs est une variable globale : elle sera modifiée dans le setup() et dans le draw()

void setup(){

  size(200,200);

  abs=10;

}

void draw(){

  background(17,170,136);

  rect (abs,40,20,20);

  abs=abs+1; // chaque exécution de draw() augmente la valeur de abs, induisant un décalage vers la droite du tracé suivant

 if (abs>width) // si le carré devait sortir de la fenêtre

    {

    abs=0; // on réinitialise à O la valeur de abs

    }

}

Fréquence

La fréquence d'appel de la fonction draw() est définie par la valeur de la variable frameRate. La valeur par défaut est de 60, ce qui signifie que draw() est exécutée 60 fois par seconde.

On peut modifier cette valeur grâce à la fonction frameRate() : la syntaxe est frameRate(nouvelleFréquence); où nouvelleFréquence est un entier définissant le nombre d'appel(s) par seconde de la fonction draw().

Voici un exemple simple où l'on peut observer un effet de la modification de frameRate :

int ord; // la variable ord est une variable globale : elle sera modifiée dans le setup() et dans le draw()

void setup(){

  size(200,200);

  ord=30;

  frameRate(20); // fréquence de 20 "dessins" par seconde

}

void draw(){

  background(75,175,191);

  ellipse (width/2,ord,20,20);

  ord=ord+1; // chaque exécution de draw() augmente la valeur de ord, induisant un décalage vers le bas du tracé suivant

 if (ord>height) // si le disque devait sortir de la fenêtre

    {

    ord=10; // on réinitialise à 1O la valeur de ord

    }

}

Le même code en changeant la fréquence de rafraichissement de l'image donne une animation accélérée.

...

  frameRate(200); // fréquence de 200 "dessins" par seconde

...

Compléments

  • Le nombre d'appels de la fonction draw() depuis le début de l'exécution du programme est stocké dans la variable frameCount.
  • On peut stopper l'exécution en boucle de la fonction draw() à l'aide de l'instruction noLoop();
  • Inversement l'instruction loop(); permet de reprendre l'exécution en boucle de la fonction draw() si celle-ci a été interrompue.