Introduction à Processing

Cette page présente une introduction à Processing à travers quelques exemples simples à écrire mais visuellement intéressants.

Premier exemple

Il existe deux façons de faire du Processing. La première utilise un client lourd qui doit être téléchargé et installé sur la machine. La deuxième, que nous allons utiliser par la suite, ne nécessite qu'un navigateur web récent pouvant exécuter du JavaScript.

Téléchargez le fichier processing.min.js et mettez le dans le même répertoire que le fichier d'exemple à télécharger en bas de page.

Méthodes spéciales

Un programme Processing utilise deux méthodes spéciales. La première setup() est executée une unique fois lors du lancement du programme. La deuxième draw() est appelée régulièrement et permet de faire des animations.

1. Dans le fichier d'exemple, modifiez le contenu de la méthode setup() pour changer la taille du canvas et sa couleur.
2. Ajoutez une méthode draw() qui dessine une ellipse à une position aléatoire

Animation

Pour faire une animation, nous allons utiliser la méthode draw(). Le principe est simple, on commence par effacer l'affichage précédent avec background() puis on dessine les éléments à leur nouvelle position.

1. Faites apparaitre une ellipse qui se déplace à vitesse constante vers la droite de l'écran
2. Modifiez votre code pour qu'elle parte dans l'autre sens une fois le bord de l'écran atteint.

Gestion Clavier-Souris

À chaque fois qu'une touche du clavier ou qu'un bouton de la souris est pressé, une méthode est appelée (keyPressed() ou mousePressed())

1. Modifiez votre programme pour que l'ellipse apparaisse à l'endroit où vous clickez
2. Gérez les déplacements de l'ellipse avec les touches du claviers

Un peu de classe

Notre ellipse a en permanence une position (x,y) dont nous devons nous rappeler pour la dessiner. Si nous voulons gérer plusieurs ellipses, ça va vite devenir trop compliqué. Pour ça, il est possible d'encapsuler dans un objet la position ainsi que d'autres informations.

1. Écrivez une classe Sprite contenant deux attributs, x et y représentant la position de l'objet
2. Créez une instance de Sprite et fixez lui des coordonnées x et y arbitraires
3. Dans la méthode draw() modifiez la position du Sprite (la valeur de ses attributs) afin de l'afficher à la bonne position

Tableau de Sprite

Pour gérer plusieurs Sprite, nous allons les mettre dans un tableau. Ensuite, dans la méthode draw(), nous pourrons les afficher tous.

1. Créez un tableau de Sprite dans la méthode setup() et remplissez le de Sprite dont les positions auront été choisies aléatoirement
2. Modifiez la méthode draw() pour tous les afficher
3. Modifiez la classe Sprite pour avoir une notion de vitesse permettant à chaque Sprite de se déplacer suivant une trajectoire différente.