Apprendre à utiliser des instructions conditionnelles
Instruction conditionnelle
La syntaxe naturelle d'une instruction conditionnelle est : "Si une condition est vraie alors voilà ce qu'il se passe".
Pour illustrer l'utilisation de l'instruction conditionnelle, nous aurons besoin d'une fonction particulière de Processing qui a la particularité de s'exécuter 60 fois par seconde. Il s'agit de la fonction draw()
L'instruction pour une condition est:
if(condition(s)){
faire quelque-chose;
}
Le programme ci-dessous dessine, dans une fenêtre, un carré qui fait changer la couleur de fond et dessine un autre carré quand on passe avec la souris dessus.
Remarque : Dans l'instruction "if" on a utilisé le symbole "&&" qui signifie "ET".
la condition est : si les coordonnées de la souris (mouseX,mouseY) sont dans la plage : (mouseX>20 ET mouseX<70 ET mouseY>20 ET mouseY<70).
alors on change le background et on dessine en rouge un autre carré.
- Modifiez la ligne 8 en :if(mouseIsPressed && mouseX>20 && mouseX<70 && mouseY>20 && mouseY<70).
mouseIsPressed détecte si on a cliqué sur la souris
- Rajoutez des instructions conditionnelles sur d'autres zones du canvas
Une première petite animation
Une balle qui rebondit sur les rebords de la fenêtre
Dans un canvas, on dessine une "balle" de rayon r_b dont le centre aura comme coordonnées (x_b,y_b).
On ajoute une vitesse(v_x) à x_b dans le draw() ce qui aura pour effet de faire avancer la balle.
De plus lorsque celle-ci touche les bords du canvas, on inverse le sens de la vitesse.
x_b,y_b,r_b et v_x sont des variables qu'il faut déclarer et initialiser. Cela se fait en dehors des fonctions (généralement avant la fonction setup). Ce sont des variables globales.
- Une variable globale est une variable qui a été déclarée en dehors des fonctions et peut donc être utilisée dans tout le programme.
- Une variable locale est une variable qui a été déclarée dans une fonction, et ne peut être utilisée que dans celle-ci.
Dans le draw, qui s'exécute 60 fois par seconde:
- On remet le fond en noir
- On dessine la balle aux coordonnées (x_b,y_b) avec un rayon de r_b
- On additionne à x_b la vitesse v_x
- On teste la collision avec les bords gauche et droit de la fenêtre
- Le symbole "||" signifie : "ou bien" (pour écrire | on utilise la combinaison de touche :Alt GR +6)
- La variable width signifie: "largeur du canvas"
- Les // permettent d'écrire du commentaire, c'est très utile pour expliquer ce que fait un programme
- Testez ce programme, modifiez par exemple le rayon de la balle.
- Mettez la ligne background(0,0,0); dans le draw()(ligne 12) en commentaire.
- Rajoutez ce qu'il faut pour que cette balle bouge aussi verticalement et qu'elle rebondisse sur les bords haut et bas de la fenêtre. Il faudra déclarer une vitesse : v_y qu'il faudra rajouter à y_b et créer un nouveau test de collision en utilsant la variable height qui signifie: "hauteur du canvas"
- Placez cette instruction juste avant de dessiner la balle : fill(random(255),random(255),random(255)); l'instruction :random(255) choisit aléatoirement un nombre entre 0 et 255 non compris. et mettez en commentaire le background(0,0,0) du draw.
corrigé
Exercice 1
Lancez le programme (cliquez sur le canvas) et déplacez la "balle" avec les flêches du clavier.
- if (keyIsDown(LEFT_ARROW)) teste si la flêche gauche a été pressée.
- if (x_b<25) teste si le centre de la balle est inférieur à 25 et dans ce cas on remet la balle dans la position précédente, ce qui a pour effet de l'arreter sur la gauche du canvas.
- Faites en sorte que la balle ne puisse pas sortir du canvas.
- Faites en sorte que la balle ne puisse pas sortir du carré bleu.
Exercice 2
Voici un programme qui permet de dessiner avec la souris
Vous devez comprendre ce programme et le modifier afin de pouvoir utiliser d'autres couleurs...
Sur cette page on ne peut pas sauvegarder le travail que l'on a fait.
Pour garder une trace du programme que vous avez écrit, copiez le et coller le dans un fichier texte ( worpad,bloc note ...) et enregistrez le. On pourra le faire exécuter plus tard dans un autre environnement.