Processing

L'animation d'un objet

En combinant animation et objet, il devient possible de concevoir des applications plus ambitieuses. Animer un objet revient à ajouter à son modèle des actions de type : se déplacer, rebondir, tester les collisions, etc. Dans ce chapitre, nous allons apprendre comment animer une balle et la faire rebondir sur les quatre bords de l'écran.

Le résultat final se présentera comme ci-dessous. Afin de mieux visualiser la trajectoire de la balle, nous avons intégré dans l'animation un effet de traîne.

Balle3

Code de base

Comme point de départ, nous allons reprendre le programme de la balle du chapitre « Les objets » qui nous permettait d'afficher une balle à l'écran et lui ajouter progressivement des morceaux de code. Les nouvelles parties du sketch 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.

Balle

//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() {
  background(0); //On dessine un fond noir
  noStroke(); //On supprime le contour

  maBalle.display(); //Affichage de la balle
}

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

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

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

Le déplacement

La balle doit pouvoir se déplacer sur les axes x et y. Nous allons créer deux variables dans le modèle de l'objet qui caractériseront sa vitesse sur les axes x et y. Ensuite nous allons ajouter une nouvelle méthode bouge() dans le modèle de l'objet qui sera appelé depuis la méthode draw() du programme. Cette méthode va, à chaque fois que l'objet est affiché, modifier la position de la balle par rapport à sa vitesse. Il faudra aussi initialiser les variables décrivant la vitesse dans le constructeur. Pour commencer, nous allons leur donner une valeur fixe.

class Balle {
  //Déclaration des caractéristiques 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
    vitessesY = 2; //AJOUT
  }

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

  //DEBUT AJOUT
  void bouge() {
   x = x + vitesseX;
   y = y + vitesseY;

  //FIN AJOUT
}

Il faudra ensuite appeler la méthode bouge() depuis la méthode draw(). Par ailleurs, nous ajoutons un appel à l'instruction background() pour effacer l'écran à chaque nouvelle image.

void draw() {
  background(0); //On dessine un fond noir
  noStroke(); //On supprime le contour

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

Les collisions

Pour le moment, dès que la balle touche le bord de l'écran, elle continue son chemin. Selon l'exemple de la balle qui rebondit sur les coins de l'écran du chapitre « La ligne de temps », nous allons ajouter une méthode testCollision qui inversera la vitesse de la balle lorsqu'elle touche les bords de l'écran.

class Balle {
  //Déclaration des caractéristiques 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;
    vitesseY = 2;
  }

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

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

  //DEBUT AJOUT
  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;
    }
  }
  //FIN AJOUT
}

Il faut ensuite appeler la méthode testCollision() depuis la méthode draw().

//ON REMPLACE L'INSTRUCTION BACKGROUND() PAR CES DEUX LIGNES
  fill(0, 0, 0, 1); // Couleur avec transparence.
  rect(0, 0, width, height);   noStroke();

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

Code Final

Voici le code final, une fois toutes ces modifications effectuées.

//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;
    }
  }
}

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