Les conditions

Jusqu’ici, nos programmes font toujours la même chose. Les conditions leur permettent de prendre des décisions : faire une chose si quelque chose est vrai, et une autre sinon.

Si on clique, je dessine. Si la souris survole le bouton, il change de couleur. Si la balle touche le bord, elle rebondit. S’il fait nuit, le fond devient noir. Presque tout ce qui rend un programme interactif passe par des conditions.

L'idée à retenir

Une condition est une question que le programme se pose, et à laquelle on ne peut répondre que par oui ou par non. En code, oui s’écrit true (vrai) et non s’écrit false (faux).

Les exemples de cette page sont interactifs : bougez la souris et cliquez dans les canevas. Dans le code, la ligne surlignée en bleu est celle qui est exécutée en ce moment. Les lignes grisées sont ignorées.

La syntaxe de if

1. if (mouseIsPressed) {1La question, entre parenthèses
2. fill(0);2Exécuté seulement si la réponse est true
3. }3Fin du bloc : la suite est toujours exécutée

if veut dire si en anglais. On peut lire cette condition à voix haute : « si la souris est pressée, alors remplis en noir ».

Entre les accolades { }, on peut mettre autant d’instructions que l’on veut. Elles sont toutes exécutées si la réponse est true, et toutes ignorées si elle est false.

if… else : l’un ou l’autre

Pour faire autre chose quand la réponse est non, on ajoute un else (sinon) :

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(240);
  if (mouseIsPressed) {
    fill(0);     // noir
  } else {
    fill(255);   // blanc
  }
  circle(200, 150, 120);
}

Cliquez sur le canevas

mouseIsPressed est une variable de p5.js qui vaut true tant qu’un bouton de la souris est enfoncé, et false le reste du temps.

À chaque image, une seule des deux branches est exécutée, jamais les deux. Le circle(), lui, est en dehors de la condition : il est dessiné dans tous les cas.

Où placer la condition ?

Une condition n’est testée qu’au moment où le programme passe dessus. Placée dans setup(), elle ne serait vérifiée qu’une seule fois, au lancement. Pour réagir à la souris, au clavier ou au temps qui passe, elle doit donc se trouver dans draw(), qui est répétée 60 fois par seconde.

Voici un outil de dessin en quelques lignes. Comme il n’y a pas de background() dans draw(), les traits s’accumulent :

function setup() {
  createCanvas(400, 300);
  background(240);
  strokeWeight(4);
}

function draw() {
  if (mouseIsPressed) {
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}

Cliquez et glissez pour dessinerEffacer

pmouseX et pmouseY donnent la position de la souris à l’image précédente. On trace donc un petit trait entre l’ancienne et la nouvelle position, mais seulement si la souris est pressée.

• Exemple 1 : Outil de dessin simple
• Exemple 2 : Épaisseur du trait et couleur variables

Comparer deux valeurs

La plupart du temps, la question posée est une comparaison entre deux valeurs : la position de la souris et le milieu de l’écran, l’heure qu’il est et midi, etc.

Opérateur	Signification	Exemple vrai
a < b	a est plus petit que b	3 < 5
a > b	a est plus grand que b	5 > 3
a <= b	a est plus petit ou égal à b	5 <= 5
a >= b	a est plus grand ou égal à b	5 >= 3
a == b	a est égal à b	5 == 5
a != b	a est différent de b	3 != 5

= ou == ?

Un seul = donne une valeur à une variable : x = 10. Deux == comparent deux valeurs : x == 10 répond à la question « x vaut-il 10 ? ». Dans un if, c’est presque toujours == qu’il vous faut.

Un cas : if

Exemple : colorier la moitié de l’écran où se trouve la souris.

function draw() {
  background(240);
  noStroke();
  fill(255, 120, 141);
  if (mouseX < width / 2) {
    rect(0, 0, width / 2, height);   // moitié gauche
  } else {
    rect(width / 2, 0, width / 2, height);   // moitié droite
  }
}

Déplacez la souris

Le canevas fait 600 pixels de large, donc width / 2 vaut 300. Le bandeau sous le canevas montre la question que se pose p5.js à chaque image, avec les vraies valeurs.

Plusieurs cas : else if

Pour choisir entre plus de deux possibilités, on enchaîne les tests avec else if (sinon, si) :

function draw() {
  if (mouseX < 200) {
    background(255, 120, 141);   // rose
  } else if (mouseX < 400) {
    background(255, 200, 0);     // jaune
  } else {
    background(29, 161, 242);    // bleu
  }
}

Déplacez la souris

Les tests sont vérifiés dans l’ordre, de haut en bas. Dès qu’un test est vrai, sa branche est exécutée et tous les suivants sont ignorés.

C’est pour cela que le deuxième test peut se contenter de mouseX < 400 : si on arrive jusque-là, c’est que mouseX < 200 était faux. La souris est donc forcément entre 200 et 400.

On peut mettre autant de else if que nécessaire. Le else final est facultatif : il attrape tous les cas qui n’ont été attrapés par aucun test. (Les pointillés sont là pour vous aider, ils ne sont pas dans le code.)

Combiner des tests : && et ||

Parfois, une seule comparaison ne suffit pas. On peut en combiner plusieurs :

Opérateur	Se lit	Le résultat est vrai si…
a && b	a et b	les deux tests sont vrais
a || b	a ou b	au moins un des deux tests est vrai

Sur un clavier Mac, | s’obtient avec ⌥ Option + ⇧ Maj + L. Sur PC, avec Alt Gr + & (ou Alt Gr + 6 selon le clavier).

&& : la souris est-elle sur le bouton ?

Pour savoir si la souris survole un rectangle, il faut vérifier quatre choses en même temps : qu’elle ne soit ni trop à gauche, ni trop à droite, ni trop haut, ni trop bas.

function draw() {
  background(240);
  if (mouseX > 100 &&
      mouseX < 300 &&
      mouseY > 100 &&
      mouseY < 200) {
    fill(255, 120, 141);   // rose
  } else {
    fill(255);
  }
  rect(100, 100, 200, 100);
}

Survolez le rectangle

Le rectangle va de 100 à 300 en x (100 + sa largeur de 200), et de 100 à 200 en y (100 + sa hauteur de 100). On peut écrire les tests sur plusieurs lignes, c’est plus lisible. Le bandeau montre le résultat de chacun, dans l’ordre : il suffit qu’un seul soit faux pour que l’ensemble soit faux.

|| : rebondir sur les bords

La balle doit faire demi-tour si elle sort à droite ou si elle sort à gauche :

let x = 200;
let vitesse = 3;

function draw() {
  background(240);
  x = x + vitesse;
  if (x > width || x < 0) {
    vitesse = vitesse * -1;
  }
  circle(x, 150, 40);
}

À chaque image, la balle avance de vitesse pixels. Quand elle dépasse un bord, on multiplie la vitesse par -1 : 3 devient -3 (la balle part vers la gauche), et -3 redevient 3. La ligne 8 ne s’allume qu’au moment du rebond : le reste du temps, la condition est fausse.

Autre exemple avec || : un fond noir la nuit, c’est-à-dire avant 6 h ou à partir de 22 h. La fonction hour() donne l’heure de l’ordinateur.

function draw() {
  if (hour() < 6 || hour() >= 22) {
    background(0);     // il fait nuit
  } else {
    background(255);   // il fait jour
  }
}

Note

Avec && à la place de ||, le fond ne serait jamais noir : il ne peut pas être à la fois moins de 6 h et plus de 22 h. Quand vous hésitez entre les deux, dites la phrase à voix haute.

Un interrupteur : mousePressed()

mouseIsPressed reste vrai tant que le bouton est enfoncé. Pour allumer et éteindre quelque chose à chaque clic, comme un interrupteur, il faut autre chose :

• une variable qui se souvient de l’état : allumé ou éteint, true ou false ;
• la fonction mousePressed(), que p5.js exécute une seule fois à chaque clic.

let allume = false;

function draw() {
  if (allume) {
    background(255, 220, 0);
  } else {
    background(40);
  }
}

function mousePressed() {
  allume = !allume;
}

Cliquez pour allumer

! veut dire le contraire de : !true vaut false et !false vaut true. La ligne 12 inverse donc l’état à chaque clic. Elle s’allume brièvement quand vous cliquez : c’est le seul moment où mousePressed() est exécutée.

Notez aussi que if (allume) est un raccourci pour if (allume == true). Les deux s’écrivent indifféremment.

En résumé

if (test) {
  // exécuté si test est vrai
} else if (autreTest) {
  // sinon, exécuté si autreTest est vrai
} else {
  // exécuté dans tous les autres cas
}

• Le test est presque toujours une comparaison : <, >, <=, >=, ==, !=.
• && (et) : tous les tests doivent être vrais. || (ou) : il suffit d’un seul.
• Une seule branche est exécutée, la première dont le test est vrai.
• Pour réagir en continu, la condition va dans draw().
• = donne une valeur, == compare.

À vous de jouer

1. Dans le premier exemple, faites grossir le cercle quand on clique, au lieu de changer sa couleur.
2. Reprenez l’exemple des deux moitiés, mais coupez le canevas en haut et en bas avec mouseY.
3. Faites aussi rebondir la balle sur les bords du haut et du bas. Il vous faudra une deuxième variable de position et une deuxième vitesse.
4. Ajoutez un deuxième rectangle « bouton » qui réagit au survol, avec une autre couleur.

Pour aller plus loin : if…else sur MDN.