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 :

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 :

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.

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.

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

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 :

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 :

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 :

 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 :

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.