Les Conditions

🎯 Objectif : Faire réagir ton programme différemment selon la situation grâce à if, else if et else. À la fin de ce chapitre, tu seras capable de créer un dessin interactif qui change en fonction de la position de la souris et des clics.

C'est quoi une condition ?#

Dans la vie de tous les jours, tu prends des décisions en permanence :

• SI il pleut ALORS je prends un parapluie, SINON je mets mes lunettes de soleil
• SI le feu est rouge ALORS je m'arrête
• SI j'ai faim ALORS je mange

En programmation, c'est exactement pareil. Une condition permet à ton programme de faire des choix : exécuter certaines instructions uniquement si quelque chose est vrai.

Le parallèle avec Scratch#

En Scratch, tu connais le bloc "Si ... Alors". En Processing, c'est le mot-clé if :

Scratch	Processing
Si <condition> Alors	if (condition) { }
Si <condition> Alors ... Sinon	if (condition) { } else { }

La logique est la même, seule l'écriture change.

La syntaxe du if#

if seul — "si ... alors"#

if (condition) {
  // Ce code s'exécute UNIQUEMENT si la condition est vraie
}

Exemple concret :

int temperature = 35;

if (temperature > 30) {
  fill(255, 0, 0);  // Rouge si c'est chaud
}
rect(50, 50, 100, 100);

Si temperature est supérieure à 30, le rectangle sera rouge. Sinon, il gardera la couleur par défaut (blanc).

if ... else — "si ... alors ... sinon"#

if (condition) {
  // Exécuté si la condition est VRAIE
} else {
  // Exécuté si la condition est FAUSSE
}

int temperature = 15;

if (temperature > 30) {
  fill(255, 0, 0);  // Rouge si chaud
} else {
  fill(0, 0, 255);  // Bleu sinon
}
rect(50, 50, 100, 100);

C'est l'un ou l'autre, jamais les deux. Soit la condition est vraie et on passe dans le premier bloc, soit elle est fausse et on passe dans le else.

if ... else if ... else — plusieurs cas#

Quand tu as plus de deux possibilités :

int temperature = 22;

if (temperature > 30) {
  fill(255, 0, 0);    // Rouge : chaud
} else if (temperature > 20) {
  fill(255, 165, 0);  // Orange : tiède
} else if (temperature > 10) {
  fill(0, 255, 0);    // Vert : frais
} else {
  fill(0, 0, 255);    // Bleu : froid
}
rect(50, 50, 100, 100);

Processing teste les conditions de haut en bas et s'arrête à la première qui est vraie. Si aucune n'est vraie, il passe dans le else (s'il y en a un).

⚠️ Piège classique : l'ordre des else if compte ! Si tu mets temperature > 10 avant temperature > 30, la condition > 10 sera vraie dès 11°C et Processing n'ira jamais tester > 30. Commence toujours par la condition la plus restrictive.

Les opérateurs de comparaison#

Pour écrire des conditions, tu as besoin de comparer des valeurs :

Opérateur	Signification	Exemple	Vrai si...
==	Est égal à	x == 10	x vaut 10
!=	Est différent de	x != 10	x ne vaut pas 10
<	Est plus petit que	x < 10	x est strictement inférieur à 10
>	Est plus grand que	x > 10	x est strictement supérieur à 10
<=	Est plus petit ou égal	x <= 10	x vaut 10 ou moins
>=	Est plus grand ou égal	x >= 10	x vaut 10 ou plus

⚠️ ATTENTION : pour comparer, c'est deux signes égal ==. Un seul =, c'est pour assigner une valeur à une variable. C'est l'erreur n°1 des débutants !

int x = 10;      // ✅ Assigner : "x reçoit la valeur 10"
if (x == 10) {   // ✅ Comparer : "est-ce que x vaut 10 ?"
if (x = 10) {    // ❌ ERREUR ! Ça assigne au lieu de comparer

Combiner des conditions#

Tu peux combiner plusieurs conditions avec les opérateurs logiques :

Opérateur	Signification	Exemple
&&	ET (les deux doivent être vraies)	x > 0 && x < 100
`		`
!	NON (inverse la condition)	!mousePressed

// Le clic est dans le quart supérieur gauche ?
if (mouseX < width/2 && mouseY < height/2) {
  fill(255, 0, 0);  // Rouge
}

C'est comme en français : "SI la souris est à gauche ET en haut ALORS c'est rouge."

Détecter la souris#

Processing fournit des variables et fonctions spéciales pour l'interactivité :

Variable/Fonction	Ce qu'elle fait
mouseX	Position horizontale de la souris
mouseY	Position verticale de la souris
mousePressed	true si un bouton de la souris est enfoncé, false sinon
mouseButton	Quel bouton est enfoncé : LEFT, RIGHT ou CENTER

Exemple : changer de couleur au clic#

void setup() {
  size(400, 300);
}

void draw() {
  background(240);

  if (mousePressed) {
    fill(255, 0, 0);    // Rouge quand on clique
  } else {
    fill(200);           // Gris sinon
  }

  ellipse(width/2, height/2, 150, 150);
}

Exemple : détecter gauche vs droite#

void setup() {
  size(400, 300);
}

void draw() {
  if (mouseX < width / 2) {
    background(100, 150, 255);  // Bleu à gauche
  } else {
    background(255, 150, 100);  // Orange à droite
  }

  // Ligne de séparation
  stroke(255);
  strokeWeight(2);
  line(width/2, 0, width/2, height);
}

Essaie ce code : le fond change de couleur quand ta souris passe d'un côté à l'autre !

Quel bouton de souris ?#

mousePressed détecte tous les boutons de la souris (gauche, droit, molette). Pour savoir quel bouton est enfoncé, on utilise la variable mouseButton :

Variable	Valeur	Signification
mouseButton	LEFT	Bouton gauche
mouseButton	RIGHT	Bouton droit
mouseButton	CENTER	Molette (clic du milieu)

On combine les deux avec && :

if (mousePressed && mouseButton == LEFT) {
  // Le bouton GAUCHE est enfoncé
}

Exemple : dessiner au clic gauche#

void setup() {
  size(400, 300);
  background(240);
}

void draw() {
  if (mousePressed && mouseButton == LEFT) {
    noStroke();
    fill(255, 0, 0);
    ellipse(mouseX, mouseY, 20, 20);
  }
}

Essaie ce code ! Tant que tu maintiens le clic gauche, tu dessines des cercles rouges comme un pinceau. draw() s'exécute 60 fois par seconde, donc le tracé est fluide.

💡 Pourquoi pas de background() dans draw() ? — Parce qu'on veut que les cercles restent affichés. Si on repeint le fond à chaque frame, les cercles précédents disparaissent. En mettant background() uniquement dans setup(), les dessins s'accumulent.

Exercice 5 — Dessin interactif par zones#

Consigne#

Le canevas est divisé en 4 zones (quadrants). Quand on maintient le clic gauche, des cercles apparaissent à la position de la souris, mais leur couleur dépend de la zone :

Zone	Position	Couleur
Haut-gauche	mouseX < width/2 et mouseY < height/2	🟥 Rouge
Haut-droite	mouseX >= width/2 et mouseY < height/2	🟦 Bleu
Bas-gauche	mouseX < width/2 et mouseY >= height/2	🟩 Vert
Bas-droite	mouseX >= width/2 et mouseY >= height/2	🟨 Jaune

Contraintes#

• Canevas de size(400, 400)
• Le fond est dessiné une seule fois dans setup() (pas dans draw()) → les cercles restent visibles
• On dessine en continu avec mousePressed && mouseButton == LEFT dans draw()
• Chaque cercle fait 30 pixels de diamètre
• Dessine les lignes de séparation des 4 zones (croix au centre de l'écran)

Ce que tu devrais obtenir#

Un canevas divisé en 4 zones visibles. En maintenant le clic gauche et en déplaçant la souris, des cercles colorés apparaissent comme un pinceau, avec la couleur correspondant à la zone.

Indices#

💡 Indice 1 — Pour que les cercles restent affichés et ne disparaissent pas, ne mets pas background() dans draw(). Mets-le dans setup() à la place. Comme draw() ne repeint pas le fond, les cercles s'accumulent.

💡 Indice 2 — Pour détecter le quadrant, combine deux conditions avec && :

if (mouseX < width/2 && mouseY < height/2) {
  // Haut-gauche
}

💡 Indice 3 — Structure globale du programme :

void setup() {
  size(400, 400);
  background(240);

  // Lignes de séparation
  stroke(180);
  line(width/2, 0, width/2, height);
  line(0, height/2, width, height/2);
}

void draw() {
  if (mousePressed && mouseButton == LEFT) {
    noStroke();

    // Détecte la zone et choisis la couleur
    if (mouseX < width/2 && mouseY < height/2) {
      fill(255, 0, 0);  // Rouge
    } else if (???) {
      // ...à toi de compléter !
    }

    ellipse(mouseX, mouseY, 30, 30);
  }
}

🎯 Défi bonus — La zone secrète#

Ajoute une 5e zone circulaire au centre de l'écran (un cercle de 100 pixels de diamètre). Si on dessine dans cette zone, les cercles sont blancs.

💡 Astuce : pour savoir si un point est dans un cercle, il faut calculer la distance entre le point (le clic) et le centre du cercle. Processing a une fonction dist() toute prête :

float d = dist(mouseX, mouseY, width/2, height/2);
if (d < 50) {
  // Le clic est dans la zone centrale (rayon = 50 pixels)
}

Pense à tester cette condition en premier (avant les quadrants), sinon les dessins au centre seront capturés par les quadrants avant d'arriver à la zone centrale !

Résumé#

Concept	Syntaxe	Exemple
Si	if (condition) { }	if (x > 10) { ... }
Si ... sinon	if (condition) { } else { }	if (x > 10) { ... } else { ... }
Si ... sinon si ... sinon	if ... else if ... else	Tester plusieurs cas
Égal	==	if (x == 10)
Différent	!=	if (x != 10)
Plus petit / plus grand	<, >, <=, >=	if (x < 100)
ET logique	&&	if (x > 0 && x < 100)
OU logique	`
Souris enfoncée	mousePressed	if (mousePressed) { }
Bouton de souris	mouseButton	if (mouseButton == LEFT) { }
Distance	dist(x1, y1, x2, y2)	dist(mouseX, mouseY, 200, 200)

Scratch	Processing
Si <...> Alors	if (condition) { }
Si <...> Alors ... Sinon	if (condition) { } else { }
<souris pressée ?>	mousePressed
<touche ... pressée ?>	mouseButton == LEFT

Les points clés à retenir :

• == pour comparer, = pour assigner — ne les confonds pas !
• Teste les conditions de la plus restrictive à la plus générale
• && = les deux conditions doivent être vraies, || = au moins une suffit
• mousePressed détecte le clic, mouseButton précise quel bouton (LEFT, RIGHT, CENTER)

Dans le prochain chapitre, on va découvrir les boucles — le moyen de répéter des instructions sans copier-coller, pour dessiner des motifs, des grilles et des dégradés en quelques lignes !