PROCESSING - 2

L'animation de plusieurs objets

Dès lors qu'un objet est créé dans un programme, il est possible de le multiplier facilement et rapidement. Deux solutions sont possibles :

Dans le chapitre d'introduction aux objets, nous avons vu qu'on pouvait obtenir deux balles à l'écran en déclarant une seconde copie de la balle et en l'affichant à son tour dans la méthode draw(). Ce procédé devient toutefois lourd lorsque le nombre d'objets à reproduire est supérieur à deux.
Lorsqu'il y a plus de deux objets à animer, il est préférable d'utiliser des listes. Petit rappel du chapitre consacré à cette notion : les listes permettent de gérer facilement un ensemble d'éléments semblables que ce soit des chiffres, des images et même des objets.

Dans ce chapitre, nous allons poursuivre l'exemple de la balle rebondissante. Nous allons ajouter plusieurs balles en utilisant des listes puis ajouter une méthode permettant de gérer les collisions entre les balles.

Balle4

Code de base

Comme point de départ, nous allons reprendre le code de la balle du chapitre « Animer un objet » qui nous permettait d'afficher une balle rebondissante à l'écran. Tout au long du chapitre, nous allons ajouter des portions de code à l'exemple de base. Les nouvelles parties sont signalées en gras avec la mention //AJOUT ou //DEBUT AJOUT et //FIN AJOUT. Pour vous familiariser avec le fonctionnement de ce nouveau programme, vous pouvez également copier tout le bloc du code initial dans votre fenêtre d'édition de Processing et progressivement lui ajouter la classe ou la méthode concernée.

//Déclaration et création d'une instance de l'objet Balle
Balle maBalle = new Balle(100, 100, color(255));

void setup() {
  smooth(); //Lissage des dessins
  size(400, 200); //Taille de la fenêtre
}

void draw() {
  fill(0, 0, 0, 1);
  rect(0, 0, width, height);

  noStroke();

  //Déplacement et affichage de la balle
  maBalle.bouge();
  maBalle.testCollision();
  maBalle.display();
}

class Balle {
  //Déclaration des paramètres de base de la balle
  float x;
  float y;
  float vitesseX; //AJOUT
  float vitesseY; //AJOUT
  color couleur;

  //Constructeur de la balle
  Balle (float nouvX, float nouvY, color nouvCouleur) {
    x          = nouvX;
    y          = nouvY;
    couleur    = nouvCouleur;

    vitesseX = 2; //AJOUT
    vitesseY = 2; //AJOUT

  }

  //Dessin de la balle
  void display() {
    fill(couleur);
    ellipse(x, y, 40, 40);
  }

  void bouge() {
   x = x + vitesseX;
   y = y + vitesseY;
  }

  void testCollision() {
    //Si la balle touche une mur, elle rebondit
    if (x > width-20 || x < 20) {
      vitesseX = vitesseX * -1;
    }
    if (y > height-20 || y < 20) {
      vitesseY = vitesseY * -1;
    }
  }
}

Lister les balles

Nous allons maintenant appliquer le concept de listes à notre balle rebondissante. Cela nous permettra d'avoir plusieurs balles à l'écran, sans dupliquer le code !

En premier lieu, nous allons déclarer une liste de balles et non plus une seule balle. Pour cela, nous allons utiliser une variable nbreBalle pour stoker le nombre de balles utilisées dans le programme.

Nous allons remplacer la déclaration en en-tête suivant

Balle maBalle = new Balle(100, 100, color(255));

par

//Déclaration d'une variable contenant le nombre de balles
int nbreBalle = 3;

//Déclaration d'une liste d'instances de l'objet Ball
Balle[] balles = new Balle[nbreBalle];

Comme dans l'exemple des nombres entiers, nous venons uniquement de déclarer des copies du modèle de balle. Il faut maintenant les créer dans le setup(). Nous allons dessiner trois balles au centre de l'écran. Toutes les trois seront blanches.

void setup() {
  smooth(); //Lissage des dessins
  size(400, 200); //Taille de la fenêtre

  //DEBUT AJOUT
  //Cette boucle va créée trois balles
  //blanches au centre de l'écran
  for (int i = 0; i < nbreBalle; i++) {
    balles[i] = new Balle(width/2, height/2,  color(255));
  }
  //FIN AJOUT
}

Dans la méthode draw() , nous allons aussi créer une boucle qui va parcourir tous les éléments de la liste pour les déplacer, tester leurs collisions et les afficher. Nous allons remplacer

  //Déplacement et affichage de la balle
  maBalle.bouge();
  maBalle.testCollision();
  maBalle.display();

par

  //Cette boucle va déplacer et afficher les trois balles
  for (int i = 0; i < nbreBalle; i++) {
    balles[i].bouge();
    balles[i].testCollision();
    balles[i].display();
  }

Une dernière opération va consister à modifier le constructeur du modèle de la balle afin que chaque balle ait une vitesse et une direction spécifiques. Pour ce faire nous allons utiliser la fonction random() qui permet de générer des nombres aléatoires. Nous allons remplacer le constructeur ci-dessous :

  //Constructeur de la balle
  Balle (float nouvX, float nouvY, color nouvCouleur) {
    x      = nouvX;
    y      = nouvY;
    couleur    = nouvCouleur;

    vitesseX = 2;
    vitesseY = 2;
}

par celui-ci

//Constructeur de la balle
  Balle (float nouvX, float nouvY, color nouvCouleur) {
    x      = nouvX;
    y      = nouvY;
    couleur    = nouvCouleur;

    vitesseX = 2 + random(-1,1);
    vitessesY = 2 + random(-1,1);
}

Code final

Voici le programme complet :

//Déclaration d'une variable contenant le nombre de balles
int nbreBalle = 3;

//Déclaration d'une liste d'instances de l'objet Balle
Balle[] balles = new Balle[nbreBalle];

void setup() {
  smooth(); //Lissage des dessins
  size(400, 200); //Taille de la fenêtre

  //Cette boucle va créer trois balles blanches
  //au centre de l'écran
  for (int i = 0; i < nbreBalle; i++) {
    balles[i] = new Balle(width/2, height/2,  color(255));
  }
}

void draw() {
  fill(0, 0, 0, 1); // Couleur avec transparence.
  rect(0, 0, width, height);

  noStroke();

  //Cette boucle va déplacer et afficher les trois balles
  for (int i = 0; i < nbreBalle; i++) {
    balles[i].bouge();
    balles[i].testCollision();
    balles[i].display();
  }
}

class Balle {
  //Déclaration des paramètres de base de la balle
  float x;
  float y;
  float vitesseX;
  float vitesseY;
  color couleur;

  //Constructeur de la balle
  Balle (float nouvX, float nouvY, color nouvCouleur) {
    x      = nouvX;
    y      = nouvY;
    couleur    = nouvCouleur;

    vitesseX = 2 + random(-1,1);
    vitesseY = 2 + random(-1,1);
  }

  //Dessin de la balle
  void display() {
    fill(couleur);
    ellipse(x, y, 40, 40);
  }

  //Déplacement de la balle
  void bouge() {
    x = x + vitesseX;
    y = y + vitesseY;
  }

  void testCollision() {
    //Si la balle touche un mur, elle rebondit
    if (x > width-20 || x < 20) {
       vitesseX = vitesseX * -1;
    }
    if (y > height-20 || y < 20) {
       vitesseY = vitesseY * -1;
    }
  }
}

N'hésitez pas à modifier certains paramètres du programme pour vous approprier davantage son fonctionnement.