Boucle et programmation orientée objets dans Processing : créer une animation pluie sur une image.

Processing (disponible à  l'adresse processing.org), est un logiciel et un langage de programmation libre et open source créé en 2001 par deux étudiants du MIT, basé sur le langage Java et adapté à l'apprentissage du code dans la perspective des arts graphiques. Il permet de développer des animations et des applications affichables sur les différents systèmes d'exploitation.

Pour cette animation, qui repose sur une image, il nous faut déterminer les caractéristiques de celle-ci et définir les paramètres du programme. L'image utilisée ("maisons_pluie.png"), au format PNG, fait 550 pixels en largeur et 490 en hauteur. Pour faire une animation, nous allons utiliser la fréquence d'une vidéo (24 images par seconde ⇒ frameRate = 24).

Image de fond de l'animation (550 x 490 pixels)

Processing s'articule autour de deux parties : setup() et draw(). La première n'étant lue qu'une fois au démarrage pour lancer les paramètres de l'application, la deuxième est lue en boucle et permet l'animation. Le code commence ainsi :

PImage imageFond;  

                                                         

void setup() {  
  size(550, 490);  
  smooth();  
  frameRate(24);  
  imageFond = loadImage("maisons_pluie.png");  
}  
void draw() {  
  background(imageFond);  
}   

Dans cette animation, la pluie est matérialisée par des traits qui, de manière aléatoire, apparaissent devant l'image, simulant une pluie assez forte avec un vent latéral. Une goutte d'eau (un trait d'une opacité faible) est donc décrite par sa position (x, y), sa grosseur (l'épaisseur du trait qui la symbolise). Une goutte se décrirait donc ainsi :

// variables de position et d'épaisseur
float x, y, epaisseur;

/* 
dessin d'un trait (définition de la couleur, l'épaisseur et dessin du trait). Chaque trait oblique part de x-3, y+9 jusque x+4, y-12.
*/
stroke(220, 90);  
strokeWeight(epaisseur);  
line(x-3, y+9, x+4, y-12);

/* 
on modifie, à chaque rafraîchissement de l'écran, la position du trait
la position se définie aléatoirement sur toute la largeur (width) et la hauteur (height) 
*/
x = random (width);
y = random (height);

Pour faire un objet, il suffit de reprendre les caractéristiques de celui-ci (position, taille ...) et de construire chaque entité de l'objet avec ses propres paramètres.

/* 
on crée la classe Goutte 
(un nom de classe Java commence par une majuscule)
*/
class Goutte {  
// variables de l'objet  
float x, y, epaisseur;  
                                                           
/* définition de chaque nouvelle entité de l'objet et correspondance avec les paramètre d'un objet Goutte
*/
  Goutte(float tempX, float tempY, float tempE) {  
    x = tempX;  
    y = tempY;  
    epaisseur = tempE;  
  }  
                                                           
  // affichage d'un objet
  void display() {  
    stroke(220, 90);  
    strokeWeight(epaisseur);  
    line(x-3, y+9, x+4, y-12);  
    x = random(width);  
    y = random(height);  
  }  

}  

Pour utiliser les objets dans le programme Processing, il faut créer un tableau qui contiendra les objets Goutte (nommé ici "gouttesDePluie") lorsque l'on défini l'ensemble des variables. Dans le setup(), on crée chaque goutte du tableau avec une boucle for. Dans la partie draw(), une nouvelle boucle for permet l'affichage de chaque goutte de pluie à l'écran.

Code de l'animation :

// définition des variables globales  

PImage imageFond;  
Goutte[] gouttesDePluie = new Goutte[220];  
                                                           
void setup() {  
  // paramètres d'affichage  
  size(550, 490);  
  smooth();  
  frameRate(24);  
  imageFond = loadImage("maisons_pluie.png");  
  /* création du tableau des 220 gouttes 
     chaque goutte de pluie est caractérisée par trois paramètres
     (x, y, epaisseur) */ 
  for (int i = 0; i < gouttesDePluie.length; i++) {  
    gouttesDePluie[i] = new Goutte(random(-50, width), random(height), random(1, 4));  
  }  
}   
                                                            
void draw() {  
  /* affichage de l'image de fond puis des 220 gouttes   
  (qui changent de place à chaque rafraîchissement de l'écran */  
  background(imageFond);  
  for (int i = 0; i < 220; i++) {  
    gouttesDePluie[i].display();  
  }  
}  
                                                           
// création de l'objet Goutte  
class Goutte {  
  float x, y, epaisseur;  
                                                           
  Goutte(float tempX, float tempY, float tempE) {  
    x = tempX;  
    y = tempY;  
    epaisseur = tempE;  
  }  
                                                           
  void display() {  
    stroke(220, 90);  
    strokeWeight(epaisseur);  
    line(x-3, y+9, x+4, y-12);  
    x = random(width);  
    y = random(height);  
  }  
}  

Il est possible, maintenant, d'obtenir une animation sous la forme d'une vidéo. Pour cela, il faut ajouter une simple ligne de code dans la boucle draw() :

saveFrame("nomDuFichier###.png");

Cette fonction enregistre chaque vue affichée ("frame") par le programme à l'écran durant la durée pendant laquelle il tourne. C'est-à-dire qu'à chaque fois que l'écran est rafraîchi, soit 24 fois par seconde ("frameRate"), une nouvelle vue s'affiche et s'enregistre dans un nouveau fichier PNG. Les dièses ("#") figurent chacun l'emplacement d'un chiffre, les fichiers étant numérotés par Processing à chaque enregistrement.

Pour faire de ces images fixes une animation, vous pouvez aller dans le menu Outil / MovieMaker, et choisir le dossier où sont stockées les images, la fréquence de la vidéo ainsi que sa taille et le type de compression à utiliser. Vous avez également la possibilité d'ajouter une musique. En cliquant sur "Create Movie...", vous lancez l'édition d'une vidéo au format QuickTime.

Pour réaliser une animation au format GIF, il y a un article pour cela...