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.

Tu connais déjà ça !#

Les conditions en p5.js sont exactement les mêmes qu'en JavaScript classique. Pas de nouvelle syntaxe à apprendre :

JavaScript classique	p5.js
if (condition) { }	if (condition) { }
if (condition) { } else { }	if (condition) { } else { }
if ... else if ... else	if ... else if ... else

La seule nouveauté, ce sont les variables spéciales de p5.js (mouseX, mouseIsPressed...) qu'on va utiliser dans nos conditions pour créer de l'interactivité.

La syntaxe du if#

if seul — "si ... alors"#

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

Exemple concret :

let 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
}

let 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 :

let 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);

Les conditions sont testées de haut en bas et le programme 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 le programme 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 trois signes égal === en JavaScript. Un seul =, c'est pour assigner une valeur. C'est l'erreur n°1 des débutants !

let 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

💡 === vs == en JavaScript : tu verras parfois == (deux signes) dans du code. La différence : == convertit les types avant de comparer ("5" == 5 est vrai), tandis que === compare aussi le type ("5" === 5 est faux). Préfère toujours ===, c'est plus fiable et prévisible.

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)	!mouseIsPressed

// 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#

p5.js 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
mouseIsPressed	true si un bouton de la souris est enfoncé, false sinon
mouseButton	Quel bouton est enfoncé : LEFT, RIGHT ou CENTER

⚠️ Différence importante : en p5.js, c'est mouseIsPressed (avec "Is" au milieu). C'est une des rares différences de nom par rapport à Processing qui utilise mousePressed.

Exemple : changer de couleur au clic#

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

function draw() {
  background(240);

  if (mouseIsPressed) {
    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#

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

function 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 ?#

mouseIsPressed 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 (mouseIsPressed && mouseButton === LEFT) {
  // Le bouton GAUCHE est enfoncé
}

Exemple : dessiner au clic gauche#

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

function draw() {
  if (mouseIsPressed && 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 createCanvas(400, 400)
• Le fond est dessiné une seule fois dans setup() (pas dans draw()) → les cercles restent visibles
• On dessine en continu avec mouseIsPressed && 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 :

function setup() {
  createCanvas(400, 400);
  background(240);

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

function draw() {
  if (mouseIsPressed && 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. p5.js a une fonction dist() toute prête :

let 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	mouseIsPressed	if (mouseIsPressed) { }
Bouton de souris	mouseButton	if (mouseButton === LEFT) { }
Distance	dist(x1, y1, x2, y2)	dist(mouseX, mouseY, 200, 200)

JavaScript classique	p5.js
if (condition) { }	if (condition) { } (identique !)
element.addEventListener('click', ...)	mouseIsPressed / mouseButton
event.clientX / event.clientY	mouseX / mouseY

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
• mouseIsPressed 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 !