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
||	OU (au moins une doit être vraie)	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	Un objet avec trois cases : mouseButton.left, mouseButton.right et mouseButton.center, chacune true ou false

⚠️ 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 mouseButton.

mouseButton n'est pas un simple nombre ou un simple texte : c'est un objet. Imagine une boîte avec trois cases, une par bouton. Chaque case contient true (le bouton est enfoncé) ou false (il ne l'est pas). Pour lire une case, on écrit le nom de la boîte, un point, puis le nom de la case :

Expression	Vaut true quand...
mouseButton.left	Le bouton gauche est enfoncé
mouseButton.right	Le bouton droit est enfoncé
mouseButton.center	La molette (clic du milieu) est enfoncée

Comme chaque case est déjà un booléen (true ou false), tu peux la mettre directement dans un if, sans === :

if (mouseIsPressed && mouseButton.left) {
  // Le bouton GAUCHE est enfoncé
}

💡 Pourquoi combiner avec mouseIsPressed ? En pratique, mouseButton.left suffit : il repasse à false dès qu'on relâche. Mais garder mouseIsPressed rend l'intention plus lisible : "SI on clique ET que c'est le bouton gauche".

💡 Bonus : comme les trois cases sont indépendantes, tu peux détecter deux boutons enfoncés en même temps (mouseButton.left && mouseButton.right). Pratique pour un mini-Paint avec des outils différents selon le bouton !

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 !

🎯 Défi bonus 2 — La gomme#

Reprends l'exercice 5 : le clic droit efface au lieu de dessiner (des cercles de la couleur du fond). Tu as maintenant deux outils, un par bouton.

💡 Astuce : c'est mouseButton.right. Et pour empêcher le navigateur d'ouvrir son menu contextuel au clic droit, ajoute cette ligne dans setup() :

document.oncontextmenu = () => false;

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	||	if (x < 0 || x > 100)
Souris enfoncée	mouseIsPressed	if (mouseIsPressed) { }
Bouton gauche	mouseButton.left	if (mouseButton.left) { }
Bouton droit	mouseButton.right	if (mouseButton.right) { }
Molette	mouseButton.center	if (mouseButton.center) { }
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
event.button === 0	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
• mouseIsPressed détecte le clic, mouseButton.left / .right / .center précise quel bouton (chacun vaut true ou false)
• mouseButton === LEFT, c'est de l'ancien p5.js (v1) : ça ne marche plus, sans message d'erreur

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 !