Même si vous êtes habitués à passer différents types de tests (essais, choix multiples...), pour un ordinateur il n'existe qu'un type de test : les tests booléens, c'est-à-dire vrai ou faux.

Une expression booléenne (cela vient du mathématicien George Boole) est une expression qui s'évalue soit à vrai soit à faux. En voici quelques exemples en français :

• J'ai faim → vrai
• J'ai peur de la programmation → faux
• Ce cours est hilarant → faux

Dans la logique formelle de l'informatique, on teste les relations entre les nombres :

• 15 est plus grand que 20 → faux
• 5 est égal à 5 → vrai
• 32 est plus petit que 33 → vrai

Dans ce cours, nous apprendrons à utiliser une variable dans des expressions booléennes. Cela permettra à nos croquis de prendre des chemins variés en fonction de la valeur stockée dans la variable.

• x > 20 → dépend de la valeur actuelle de x
• y == 5 → dépend de la valeur actuelle de y
• z <= 33 → dépend de la valeur actuelle de z

Les opérateurs relationnels suivants peuvent être utilisés dans une expression booléenne :

Une expression booléenne se comporte donc au sein d'un croquis comme une question. Est-ce que x est plus grand que 20 ? Si la réponse est oui (vrai), nous pouvons choisir d'exécuter certaines instructions (comme dessiner un rectangle par exemple). Si la réponse est non (faux), ces instructions sont ignorées.

Cela introduit la notion d'embranchement. En fonction de conditions spécifiques, le programme peut prendre décisions et suivre différents chemins.

Dans le monde réel, cela pourrait résulter en des instructions de la sorte :

Si j'ai faim alors manger une pomme, sinon si j'ai soif alors boire de l'eau, sinon faire la sieste.

En Processing, nous aurions plutôt quelque-chose comme :

Si la souris est sur la partie gauche de l'écran, dessiner un rectangle dans la partie gauche de l'écran.

Ou plus formellement :

if (mouseX < width / 2) {
  fill(255);
  rect(0, 0, width / 2, height);
}

L'expression booléenne et les instructions à exécuter si elle s'évalue à vrai sont contenues dans un morceau de code ayant la syntaxe suivante :

if (expression booléenne) {
  // code à exécuter si l'expression s'évalue à vrai.
}

Cette structure peut être étendue avec le mot-clef else (sinon) pour inclure du code qui sera exécuté si l'expression booléenne est fausse. C'est l'équivalent du "sinon faire cela".

if (expression booléenne) {
  // code à exécuter si l'expression est vraie.
} else {
  // code à exécuter si l'expression est fausse.
}

Par exemple, nous pourrions dire ceci :

Si la souris est sur la partie gauche de l'écran, dessiner un fond blanc, sinon dessiner un fond noir.

if (mouseX < width / 2) {
  background(255);
} else {
  background(0);
}

Enfin, pour tester de multiples conditions, nous pouvons utiliser un else if (sinon si). Quand un else if est utilisé, les conditions sont évaluées dans l'ordre du programme. Dès qu'une expression booléenne est évaluée à vrai, le code correspondant est exécuté et les expressions booléennes suivantes sont ignorées.

if (expression booléenne n°1) {
  // code à exécuter si l'expression booléenne n°1 est vraie.
} else if(expression booléenne n°2) {
  // code à exécuter si l'expression booléenne n°2 est vraie.
} else if(expression booléenne n°n) {
  // code à exécuter si l'expression booléenne n°n est vraie.
} else {
  // code à exécuter si aucune des expressions booléennes
  // précédentes n'est vraie.
}

Exemple 6.1. Pour reprendre notre exemple simple et l'augmenter un peu, nous pourrions écrire :

void setup(){
  size(200, 200);
}

void draw() {
  if(mouseX < width / 3) {
    // la souris est dans le tiers gauche de la fanêtre
    background(255);
  } else if(mouseX < 2 * width / 3) {
    // la souris est dans le tiers du millieu
    background(127);
  } else {
    // la souris est dans le tiers droit
    background(0);
  }

  // visualiser les tiers
  stroke(255, 0, 0);
  line(width / 3, 0, width / 3, height);
  line(2 * width / 3, 0, 2 * width / 3, height);
}

Exercice 6.1. Considérez un système de notation où les notes sur 20 sont transformées en lettres de A à E. Remplissez les blancs pour compléter les expressions booléennes.

float note = random(0, 20);

if (_____) {
  println("Assigner la note A.");
} else if (_____) {
  println(_____);
} else if (_____) {
  println(_____);
} else if (_____) {
  println(_____);
} else {
  println(_____);
}

Attention, dans une instruction conditionnelle, vous ne pouvez avoir qu'un if et qu'un else. En revanche, vous pouvez avoir autant de else if que vous le souhaitez.

Source commitstrip.com

Exercice 6.2. Examinez les deux morceaux de code suivants et déterminez de tête ce qui apparaîtra dans la fenêtre des messages pour chacun. Ensuite exécutez-les dans Processing pour comparer les résultats avec vos réponses. Le problème consiste à déterminer si un nombre est compris entre 0 et 25, entre 26 et 50 ou plus grand que 50. Dans les deux cas, la syntaxe est correcte.

int x = 75;

if (x > 50) {
  println(x + " est supérieur à 50.");
} else if (x > 25) {
  println(x + " est entre 26 et 50.");
} else {
  println(x + " est inférieur ou égal à 25.");
}

int x = 75;

if (x > 25) {
  println(x + " est entre 25 et 50.");
} else if (x > 50) {
  println(x + " est supérieur à 50.");
} else {
  println(x + " est inférieur ou égal à 25.");
}

Exercice 6.3. Faites de même avec les deux morceaux de code suivants. Nous souhaitons changer les 5 en 6 et les 6 en 5. Encore une fois, dans les deux morceaux de code, la syntaxe est correcte.

int x = 5;

println("x vaut actuellement : " + x);
if (x == 5) {
  x = 6;
}
if (x == 6) {
  x = 5;
}
println("x vaut actuellement : " + x);

int x = 5;

println("x vaut actuellement : " + x);
if (x == 5) {
  x = 6;
} else if (x == 6) {
  x = 5;
}
println("x vaut actuellement : " + x);

Attention, il est important de noter dans l'exercice 6.3 que le test d'égalité se fait avec un double signe égal. En programmation demander si quelque-chose est égal à autre chose est différent de l'affectation d'une valeur dans une variable :

if (x == y) // Est-ce que x est égal à y ? Double signe égal.

x = y; // Placer la valeur de y dans x. Simple signe égal.

Voici un exemple de programme très simple qui réalise différentes tâches en fonction de certaines conditions. Voici le pseudo-code :

étape 1 : créer des variables pour contenir les valeurs des composantes rouge, verte et bleue. Nous les appellerons r, g et b.

étape 2 : dessiner continuellement l'arrière-plan en fonction de la couleur décrite par ces composantes.

étape 3 : si la souris est sur la droite de l'écran, incrémenter la valeur de r, si elle est sur la gauche de l'écran décrémenter la valeur de r.

étape 4 : Contraindre la valeur de r entre 0 et 255 compris.

Ce pseudo-code est implanté dans l'exemple en Processing suivant.

Exemple 6.2. Conditionnelles dans un croquis.

// étape 1
float r = 150;
float g = 0;
float b = 0;

void setup() {
  size(200, 200);
}

void draw() {
  // étape 2
  background(r, g, b);
  stroke(255);
  line(width / 2, 0, width / 2, height);

  // étape 3
  if (mouseX > width / 2) {
    r = r + 1;
  } else {
    r = r - 1;
  }

  // étape 4
  if (r > 255) {
    r = 255;
  } else if (r < 0) {
    r = 0;
  }
}

Rappelons qu'on peut utiliser les raccourcis r++; et r--; à la place de r = r + 1; et r = r - 1;.

Contraindre la valeur d'une variable, comme dans l'étape 4, est un problème commun. Ici par exemple nous ne souhaitons pas que la valeur de rouge soit plus petite que 0 ou plus grande que 255. Dans d'autres exemples nous voudrons que la position ou la taille d'une forme ne soit pas trop importante.

Bien qu'utiliser des conditionnelles soit une solution valide, Processing nous offre une fonction appelée constrain() qui effectue ce travail souvent nécessaire. Le fragment de code

if (r > 255) {
  r = 255;
} else if (r < 0) {
  r = 0;
}

peut s'écrire avec constrain() :

r = constrain(r, 0, 255);

La fonction constrain() prend trois arguments : la valeur que nous souhaitons contraindre, la valeur limite minimale et la valeur limite maximale. La fonction retourne la valeur contrainte et celle-ci est assignée à la variable r.

Exercice 6.4. Testez constrain() dans l'exemple 6.2.

Prendre l'habitude de contraindre les valeurs est une bonne façon d'éviter les erreurs. Éviter les erreurs avant qu'elles ne se produisent est le signe d'un bon style de programmation.

Nous allons désormais reprendre notre exemple précédent et le rendre un peu plus intéressant en changeant les trois composantes de couleur en fonction de la position de la souris. Notez au passage que nous utilisons constrain() pour les trois variables. Nous utilisons aussi une variable système mousePressed qui vaut vrai si le bouton gauche de la souris est pressé, faux sinon.

Exemple 6.3. Encore plus de conditionnelles

float r = 0;
float b = 0;
float g = 0;

void setup() {
  size(200, 200);
}

void draw() {
  background(r, g, b);
  stroke(0);

  line(width / 2, 0, width / 2, height);
  line(0, height / 2, width, height / 2);

  if (mouseX > width / 2) {
    r++;
  } else {
    r--;
  }

  if (mouseY > height / 2) {
    b++;
  } else {
    b--;
  }

  if (mousePressed) {
    g++;
  } else {
    g--;
  }

  r = constrain(r, 0, 255);
  g = constrain(g, 0, 255);
  b = constrain(b, 0, 255);
}

Essayez d'obtenir les couleurs : rouge, vert, bleu, cyan, magenta, jaune et blanc.

Exercice 6.5. Déplacer un rectangle à travers la fenêtre en incrémentant une variable. On commence avec une forme à la coordonnée x 0. Vous devez utiliser une instruction if de façon à ce que la forme s'arrête à la coordonnée 100 en ajoutant le code manquant. Lorsque cela fonctionne, réécrivez ce croquis en utilisant constrain() à la place du if.

float x = 0;

void setup() {
  size(200, 200);
}

void draw() {
  background(255);
  // Affiche une forme.
  fill(0);
  rect(x, 100, 20, 20);

  // Incrémente x.
  x = x + 1;
  ________________
  ________________
  ________________
}

Exercice 6.6. Reprendre Exercice 4.2. Réaliser le défilement du cercle sur la fenêtre avec une conditionnelle à la place de modulo.

Exercice 6.7. Reprendre Exemple 4.6 et corriger le petit défaut de Chip, l'oscillation autour de la cible.

Exercice 6.8. Faire une forme qui suit la souris mais uniquement dans la moitié supérieure de la fenêtre.

Exercice 6.9. Faire une forme qui suit la souris et qui change dans les zones différentes de la fenêtre : cercle dans le tiers gauche, carré dans le tiers du milieu et triangle dans le tiers droit.