Processing


Première animation avec Processing

Comment faire rebondir une balle dans une fenêtre

Montre à travers une petite animation quelques bases sur l’organisation et la réalisation d’un programme avec Processing et notamment le rôle de deux fonctions fondamentales que sont setup() et draw().

Processing permet simplement de réaliser des animations sans avoir une grande connaissance en programmation. Voyons voir comment programmer une balle qui va rebondir sur les bords de l’écran.


 Avertissement

Le but de cet article étant Processing et non le langage Java, mes explications porteront principalement sur les fonctions spécifiques à Processing.

 Principe du programme

Dans un article précédent, nous avons vu comment dessiner un cercle et un carré. Nous allons aller maintenant un peu plus loin en dessinant une balle (représentée par un cercle) qui va se déplacer dans l’écran et rebondir lorsqu’elle atteindra les bords.

La principale nouveauté par rapport à ce que l’on a vu précédemment est que nous allons devoir organiser notre programme en définissant 2 fonctions devant porter les noms suivants : setup() et draw().

Le squelette de notre application devra ressembler à ceci :

  1. // déclaration de variables globales
  2.  
  3. void setup()
  4. {
  5.   // code d'initialisation du programme
  6. }
  7.  
  8. void draw()
  9. {
  10.   // code devant s'exécuter toute les 60s (par défaut)
  11. }

Télécharger

Comme je l’ai spécifié en commentaire dans le source précédent, nous définissons 2 fonctions. Le nom de celles-ci (signature de la fonction) est imposé par Processing car c’est lui qui va exécuter ces fonctions et non vous depuis un appel de votre programme.

Remarque : Comme nous utilisons Java comme langage dans Processing, les fonctions que nous allons définir utilisent la même syntaxe que la définition de méthodes de Java. Le mot clé "void" devant le nom de la fonction, veut dire que celle-ci ne renvoi pas de valeur. Dans certains langages, une fonction qui ne renvoi pas de valeur s’appelle une procédure. C’est le cas du langage Pascal.

La fonction setup()

Le code qui sera défini dans setup() ne sera exécuté qu’une seule fois au démarrage du programme. C’est ici que nous mettrons les instructions d’initialisation.

La fonction draw()

C’est une fonction dont le contenu sera exécuté toutes les 60 s par défaut. C’est ici que nous mettrons le code de l’animation.

 Définition du programme

Déclaration des variables et constantes

Avant de définir le code qui devra être contenu dans nos fonctions, nous allons devoir définir quelques variables.

Nous allons avoir besoin de 2 variables pour enregistrer la position sur l’écran en x et y de la balle. Nous allons en ajouter 2 autres pour mémoriser une valeur de déplacement horizontal et vertical. Nous mettrons également le rayon de la balle dans une constante (une valeur qui ne change jamais).

Notre fichier source va donc commencer par les lignes suivantes :

  1. // déclaration de variables globales
  2.  
  3. final int RAYON = 10;
  4.  
  5. int xPos, yPos;  // position de la balle en x et y
  6. int xDep, yDep;  // déplacement de la balle en x et y

Télécharger

Remarque : le mot clé "final" indique que RAYON est défini une fois pour toute à 10 et que cette valeur ne changera jamais. Ce que l’on nomme dans certains langage une constante.

Fonction d’initialisation du programme : setup()

Nous allons définir le code d’initialisation du programme dans la méthode setup(). Nous allons initialiser la taille et la couleur de l’écran ainsi que les variables que nous venons de déclarer.

  1. void setup()
  2. {
  3.   size( 400, 400 ); // écran de 400 x 400 pixels
  4.   background( 0 );  // fond de l'écran noir
  5.  
  6.   xPos = width / 2; // position du centre de la balle au centre de l'écran
  7.   yPos = height / 2;
  8.  
  9.   xDep = 3; // déplacement horizontal de 3 pixels
  10.   yDep = 2; // déplacement vertical de 2 pixels
  11. }

Télécharger

Remarque : J’ai mis des valeurs différentes pour le déplacement horizontal et vertical pour éviter que la trajectoire de la balle reste sur la diagonale de la fenêtre, cette dernière étant carrée.

Fonction de dessin du programme : draw()

Dans la fonction draw() nous allons ajouter d’abord le dessin de la balle.

  1. void draw()
  2. {
  3.   fill( #FFF300 ); // couleur de remplissage jaune
  4.   ellipse( xPos, yPos, RAYON * 2, RAYON * 2 );
  5. }

Télécharger

Si nous exécutons le programme nous devrions avoir l’écran suivant :

Pour l’instant, nous affichons bien une balle jaune au centre de l’écran mais cette dernière ne bouge pas.

Nous allons d’abord ajouter le code qui permet de modifier les coordonnées de la balle en ajoutant les valeurs de déplacement correspondantes

  1. void draw()
  2. {
  3.   fill( #FFF300 );
  4.   ellipse( xPos, yPos, RAYON * 2, RAYON * 2 );
  5.  
  6.   xPos += xDep; // même chose que: xPos = xPos + xDep;
  7.   yPos += yDep;
  8. }

Télécharger

Si l’on exécute le programme nous obtenons ceci :

Le cercle se redessine bien aux nouvelles coordonnées mais l’ancien n’est pas effacé. Pour cela il suffit de définir un effacement de l’écran avant de redessiner la balle à sa nouvelle position, en ajoutant la ligne suivante en début de la fonction draw() qui efface l’écran avec la couleur noire :

  1. background( 0 );

Il n’y a plus qu’à ajouter le code qui doit faire rebondir la balle. Selon que la balle aura tendance à sortir de l’écran horizontalement ou verticalement nous inverserons le signe de xDep ou yDep, ce qui fera changer le sens de déplacement de la balle.

Cela donne le code suivant à ajouter après l’affichage de la balle :

  1. // test de sortie de l'écran
  2.   if ( xPos + RAYON > width && xDep > 0 )
  3.   {
  4.     xDep = -xDep;
  5.   }
  6.  
  7.   if ( xPos - RAYON < 0 && xDep < 0 )
  8.   {
  9.     xDep = -xDep;
  10.   }
  11.  
  12.   if ( yPos + RAYON > height && yDep > 0 )
  13.   {
  14.     yDep = -yDep;
  15.   }
  16.  
  17.   if ( yPos - RAYON < 0 && yDep < 0 )
  18.   {
  19.     yDep = -yDep;
  20.   }

Télécharger

Ce code effectue une série de tests pour vérifier que la balle ne va pas au delà d’un des 4 côtés de la fenêtre. Il s’agit d’un code Java basique.

Si vous exécutez le programme, la balle devrait maintenant rebondir sur les bords.

 Le programme complet

Voici maintenant le source du programme complet :

  1. // déclaration de variables globales
  2.  
  3. final int RAYON = 10;
  4.  
  5. int xPos, yPos;  // position de la balle en x et y
  6. int xDep, yDep;  // déplacement de la balle en x et y
  7.  
  8. void setup()
  9. {
  10.   size( 400, 400 );
  11.   background( 0 );
  12.  
  13.   xPos = width / 2;
  14.   yPos = height / 2;
  15.  
  16.   xDep = 3;
  17.   yDep = 2;
  18. }
  19.  
  20. void draw()
  21. {
  22.   background( 0 ); // efface l'écran en noir
  23.  
  24.   fill( #FFF300 ); // dessine un cercle en jaune
  25.   ellipse( xPos, yPos, RAYON * 2, RAYON * 2 );
  26.  
  27.   // test de sortie de l'écran
  28.   if ( xPos + RAYON > width && xDep > 0 )
  29.   {
  30.     xDep = -xDep;
  31.   }
  32.  
  33.   if ( xPos - RAYON < 0 && xDep < 0 )
  34.   {
  35.     xDep = -xDep;
  36.   }
  37.  
  38.   if ( yPos + RAYON > height && yDep > 0 )
  39.   {
  40.     yDep = -yDep;
  41.   }
  42.  
  43.   if ( yPos - RAYON < 0 && yDep < 0 )
  44.   {
  45.     yDep = -yDep;
  46.   }
  47.  
  48.   xPos += xDep;
  49.   yPos += yDep;
  50. }

Télécharger

 Choix du moteur de rendu

Dans la fonction setup(), nous avons utilisé la fonctions size() pour définir les dimensions de la fenêtre. Cette fonction accepte un troisième paramètre permettant de choisir entre différents moteurs de rendu.

Sans paramètre, il s’agit d’un moteur de rendu 2D par défaut de Java. Si, comme sur ma machine, vous trouvez que l’animation est un peu saccadée, vous pourrez ajouter un paramètre pour sélectionner un autre moteur de rendu. Pour la 2D vous aurez le choix entre P2D (utilisant OpenGL) et FX2D (Java accéléré). En ajoutant l’un de ces 2 paramètres, j’obtiens un déplacement plus fluide.

Modifiez le programme comme suit :

  1. size( 400, 400, FX2D );

Remarque : C’est également avec la même fonction "size()" que vous pourrez sélectionner un moteur de rendu pour le mode 3D qui n’est pas traité dans cet article.

 Conclusion

Sans grande connaissances en programmation et sans avoir tapé beaucoup de code nous avons pu créer une petite animation. La prochaine fois, nous verrons comment ajouter un peu de programmation objet dans ce programme.



Pour en savoir plus sur Processing 3 : Introduction à Processing 3

Article n° 118

Crée par: chris

Créé le: 27 juillet 2018

Modifié le: 23 octobre 2018

Nombre de visites: 400

Popularité: 7 %

Popularité absolue: 1

Processing (Java)

Mots clés de cet article


SPIP

2003-2019 LePpf
Plan du site | | Contact | RSS 2.0

Visiteurs connectés : 2

Nombre moyen de visites quotidiennes sur le site: 183