Boucles

Les Boucles

🎯 Objectif : Comprendre pourquoi et comment répéter des instructions automatiquement avec la boucle for. À la fin de ce chapitre, tu seras capable de dessiner des motifs répétitifs, des cercles concentriques et même un damier, en quelques lignes de code.

Pourquoi des boucles ?

Imagine qu'on te demande de dessiner 10 cercles les uns à côté des autres. Sans boucle, tu écrirais :

ellipse(30, 150, 40, 40);
ellipse(80, 150, 40, 40);
ellipse(130, 150, 40, 40);
ellipse(180, 150, 40, 40);
ellipse(230, 150, 40, 40);
ellipse(280, 150, 40, 40);
ellipse(330, 150, 40, 40);
ellipse(380, 150, 40, 40);
ellipse(430, 150, 40, 40);
ellipse(480, 150, 40, 40);

Dix lignes quasi identiques 😩 Et si on t'en demande 100 ? 1000 ? Tu vas copier-coller pendant des heures.

En programmation, copier-coller, c'est un signal d'alarme. Chaque fois que tu te retrouves à écrire plusieurs fois la même chose en changeant juste un nombre, c'est qu'il te faut une boucle.

Tu connais déjà ça !

La boucle for en p5.js est exactement la même qu'en JavaScript classique. La seule différence avec d'autres langages : on déclare le compteur avec let au lieu de int :

Autre langage (Java, C++...)	JavaScript / p5.js
`for (int i = 0; i < 10; i++)`	`for (let i = 0; i < 10; i++)`

Le résultat est le même : le code à l'intérieur s'exécute 10 fois. Et tu as un compteur (i) qui te dit à quelle répétition tu en es.

Anatomie d'une boucle `for`

for (let i = 0; i < 10; i++) {
  // Ce code s'exécute 10 fois
  // i vaut 0, puis 1, puis 2, ... puis 9
}

Il y a trois parties séparées par des points-virgules :

for ( initialisation ; condition ; incrémentation )
       ↓                ↓            ↓
   let i = 0        i < 10         i++
   "On commence     "Tant que      "À chaque tour,
    à 0"             i < 10,        on ajoute 1
                     on continue"   à i"

Partie	Ce qu'elle fait	Dans notre exemple
Initialisation	Crée le compteur et lui donne une valeur de départ	`let i = 0` → on commence à 0
Condition	Vérifie si on continue la boucle	`i < 10` → tant que i est plus petit que 10
Incrémentation	Modifie le compteur à chaque tour	`i++` → on ajoute 1 à i

💡 i++ est un raccourci pour i = i + 1. C'est la même chose, juste plus court.

Ce qui se passe à chaque tour

Voici le déroulé complet d'un for (let i = 0; i < 5; i++) :

Tour	Valeur de `i`	Condition `i < 5` ?	Action
1	0	✅ Oui	Exécute le code
2	1	✅ Oui	Exécute le code
3	2	✅ Oui	Exécute le code
4	3	✅ Oui	Exécute le code
5	4	✅ Oui	Exécute le code
6	5	❌ Non	STOP, on sort de la boucle

La boucle s'exécute 5 fois (pour i = 0, 1, 2, 3, 4). Quand i atteint 5, la condition i < 5 est fausse → on s'arrête.

⚠️ Piège classique : la boucle commence à 0, pas à 1. Et elle s'arrête avant d'atteindre la limite. i < 5 donne les valeurs 0, 1, 2, 3, 4 → c'est bien 5 tours, mais le dernier tour est à i = 4, pas i = 5.

La puissance du compteur `i`

Le compteur i n'est pas juste un numéro de tour : tu peux l'utiliser dans tes calculs. C'est ça qui rend la boucle for si puissante.

Reprenons nos 10 cercles du début :

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

function draw() {
  background(240);

  fill(100, 150, 255);
  stroke(0);

  for (let i = 0; i < 10; i++) {
    ellipse(30 + i * 50, 150, 40, 40);
  }
}

Décortiquons 30 + i * 50 :

Tour	`i`	`30 + i * 50`	Position X
1	0	30 + 0 × 50	30
2	1	30 + 1 × 50	80
3	2	30 + 2 × 50	130
...	...	...	...
10	9	30 + 9 × 50	480

Deux lignes de code au lieu de dix. Et si tu veux 100 cercles ? Change juste i < 10 en i < 100 😎

Utiliser `i` pour varier les couleurs

Le compteur i peut aussi servir à calculer des couleurs qui changent à chaque tour :

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

function draw() {
  background(30);
  noStroke();

  for (let i = 0; i < 10; i++) {
    fill(i * 25, 100, 255 - i * 25);  // La couleur varie !
    ellipse(30 + i * 50, 150, 40, 40);
  }
}

Ici, i * 25 fait varier la composante rouge de 0 à 225, et 255 - i * 25 fait varier le bleu en sens inverse. Résultat : un joli dégradé du bleu au rouge !

Utiliser une variable pour le nombre de répétitions

Plutôt que d'écrire un nombre "en dur" dans la boucle, utilise une variable :

let nbCercles = 10;

for (let i = 0; i < nbCercles; i++) {
  ellipse(30 + i * 50, 150, 40, 40);
}

L'avantage ? Tu changes une seule valeur et tout s'adapte. C'est exactement le même principe que les variables du chapitre précédent : rendre ton code flexible.

Les boucles imbriquées (grilles 2D)

Une boucle for, c'est une répétition en une dimension (une rangée). Deux boucles for imbriquées, c'est une répétition en deux dimensions (une grille).

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

function draw() {
  background(240);

  for (let ligne = 0; ligne < 3; ligne++) {
    for (let colonne = 0; colonne < 4; colonne++) {
      rect(20 + colonne * 90, 20 + ligne * 90, 80, 80);
    }
  }
}

Comment ça marche ? La boucle extérieure (ligne) parcourt les lignes, et pour chaque ligne, la boucle intérieure (colonne) dessine tous les éléments de cette ligne :

ligne=0 : colonne=0, colonne=1, colonne=2, colonne=3   → 1ère rangée
ligne=1 : colonne=0, colonne=1, colonne=2, colonne=3   → 2ème rangée
ligne=2 : colonne=0, colonne=1, colonne=2, colonne=3   → 3ème rangée

C'est comme lire un livre : on va de gauche à droite (colonnes), puis on passe à la ligne suivante.

💡 Astuce : nomme tes compteurs ligne et colonne (ou row et col) plutôt que i et j. C'est plus clair quand on relit le code.

Exercice 6 — L'arc-en-ciel (sans boucle)

Consigne

Dessine un arc-en-ciel : des demi-cercles concentriques de couleurs différentes. Le centre de l'arc-en-ciel est en bas du canevas. Ajoute un petit paysage autour (sol vert, ciel bleu, soleil...).

Les couleurs de l'arc-en-ciel, du plus grand au plus petit : rouge, orange, jaune, vert, bleu, indigo, violet.

Contraintes

Canevas de createCanvas(500, 400)
Utilise arc() avec les angles 0 et PI (demi-cercle supérieur) — ou bien des ellipse() que tu empiles
Pas de boucle pour cet exercice (on fera la version boucle dans l'exercice suivant)
noStroke() pour éviter les contours entre les arcs

Ce que tu devrais obtenir

Un arc-en-ciel avec 7 bandes de couleurs au-dessus d'un paysage simple.

Indices

💡 Indice 1 — L'astuce est de dessiner des ellipses (ou arcs) du plus grand au plus petit, comme des poupées russes. La plus grande ellipse (rouge) est dessinée en premier, puis l'orange par-dessus (un peu plus petite), etc. La dernière ellipse (violette) est la plus petite.

💡 Indice 2 — Centre tes demi-cercles en bas du canevas, par exemple à la position (250, 400). Commence avec un diamètre de 400, puis diminue de 50 à chaque bande.

💡 Indice 3 — Tu peux utiliser arc(250, 400, 400, 400, PI, TWO_PI) pour un demi-cercle vers le haut. Ou, plus simple : dessine des ellipse() complètes et cache le bas avec le rectangle du sol !

Exercice 7 — Cercles concentriques (avec boucle)

Consigne

Reprends le principe des cercles concentriques, mais cette fois avec une boucle for. Le nombre de cercles est stocké dans une variable nbCercles. Chaque cercle a une couleur différente calculée automatiquement à partir du compteur i.

Contraintes

Canevas de createCanvas(400, 400)
Les cercles sont centrés au milieu du canevas
Le nombre de cercles est dans une variable (commence avec nbCercles = 8)
Chaque cercle a une couleur calculée avec i (pas de couleurs écrites à la main)
noStroke() pour un rendu propre

Ce que tu devrais obtenir

Des cercles concentriques avec un dégradé de couleurs automatique, du plus grand (extérieur) au plus petit (intérieur).

Indices

💡 Indice 1 — Attention à l'ordre ! Il faut dessiner du plus grand au plus petit (sinon les grands cercles cachent les petits). Astuce : fais ta boucle à l'envers avec for (let i = nbCercles; i > 0; i--), ou bien calcule le rayon en partant du plus grand.

💡 Indice 2 — Le diamètre du cercle i peut être i * 40. La couleur peut varier avec fill(i * 30, 100, 255 - i * 30).

💡 Indice 3 — Pour le bonus : remplace nbCercles = 8 par nbCercles = mouseX / 20. Le nombre de cercles changera en fonction de la position horizontale de la souris !

Exercice 8 — Le damier (boucles imbriquées)

Cet exercice se fait en trois étapes progressives.

Étape 1 — Quadrillage à la main (sans boucle)

Dessine un quadrillage de 4×4 carrés de 100×100 pixels, tous de la même couleur. Oui, ça va être long et répétitif — c'est fait exprès 😉

Faites des copier-coller pour aller plus vite !

Étape 2 — Quadrillage avec boucles

Remplace tes 16 lignes de rect() par 2 boucles for imbriquées. Le nombre de cases par côté est dans une variable nbCases.

Étape 3 — Damier

Alterne les couleurs noir et blanc comme un échiquier.

Contraintes

Canevas de createCanvas(400, 400) (pour que les 4×4 carrés de 100px remplissent tout l'écran)
Pour l'étape 2 : la taille des cases se calcule avec width / nbCases
Pour l'étape 3 : utilise une condition if pour choisir la couleur

Ce que tu devrais obtenir

Étape 1 → une grille de carrés identiques. Étape 2 → la même grille, mais en 4 lignes de code. Étape 3 → un échiquier noir et blanc.

Indices

💡 Indice 1 (étape 2) — La position X d'une case est colonne * taille et la position Y est ligne * taille, avec taille = width / nbCases.

💡 Indice 2 (étape 3) — L'astuce du damier repose sur une observation mathématique : si la somme du numéro de ligne et du numéro de colonne est paire, la case est blanche ; si elle est impaire, la case est noire.

💡 Indice 3 (étape 3) — Pour savoir si un nombre est pair, on utilise l'opérateur modulo % (le reste de la division). (ligne + colonne) % 2 donne 0 si la somme est paire, 1 si elle est impaire :

if ((ligne + colonne) % 2 === 0) {
  fill(255);  // Blanc
} else {
  fill(0);    // Noir
}

Résumé

Concept	Syntaxe	Exemple
Boucle for	`for (let i = 0; i < n; i++)`	Répéter n fois
Compteur	`i`	Vaut 0, 1, 2, ... n-1
Incrémenter	`i++`	Raccourci pour `i = i + 1`
Position calculée	`debut + i * espacement`	`30 + i * 50`
Couleur calculée	`i * facteur`	`fill(i * 25, 0, 0)`
Boucles imbriquées	2 `for` = grille 2D	`for ligne` { `for colonne` }
Modulo	`a % b`	Reste de la division → pair/impair

JavaScript classique	p5.js
`for (let i = 0; i < 10; i++)`	`for (let i = 0; i < 10; i++)` (identique !)
`while (condition) { }`	`while (condition) { }` (identique !)

Les points clés à retenir :

Une boucle évite le copier-coller et rend ton code adaptable
Le compteur i est une variable gratuite que tu peux utiliser dans tes calculs
Deux boucles imbriquées = une grille (lignes × colonnes)
Mets le nombre de répétitions dans une variable pour pouvoir le changer facilement

Dans le prochain chapitre, on va découvrir les fonctions — le moyen de créer tes propres blocs réutilisables pour organiser et simplifier ton code !

Boucles

Les Boucles

Pourquoi des boucles ?#

Tu connais déjà ça !#

Anatomie d'une boucle for#

Ce qui se passe à chaque tour#

La puissance du compteur i#

Utiliser i pour varier les couleurs#

Utiliser une variable pour le nombre de répétitions#

Les boucles imbriquées (grilles 2D)#

Exercice 6 — L'arc-en-ciel (sans boucle)#

Consigne#

Contraintes#

Ce que tu devrais obtenir#

Indices#

Exercice 7 — Cercles concentriques (avec boucle)#

Consigne#

Contraintes#

Ce que tu devrais obtenir#

Indices#

Exercice 8 — Le damier (boucles imbriquées)#

Étape 1 — Quadrillage à la main (sans boucle)#

Étape 2 — Quadrillage avec boucles#

Étape 3 — Damier#

Contraintes#

Ce que tu devrais obtenir#

Indices#

Résumé#

Pourquoi des boucles ?

Tu connais déjà ça !

Anatomie d'une boucle `for`

Ce qui se passe à chaque tour

La puissance du compteur `i`

Utiliser `i` pour varier les couleurs

Utiliser une variable pour le nombre de répétitions

Les boucles imbriquées (grilles 2D)

Exercice 6 — L'arc-en-ciel (sans boucle)

Consigne

Contraintes

Ce que tu devrais obtenir

Indices

Exercice 7 — Cercles concentriques (avec boucle)

Consigne

Contraintes

Ce que tu devrais obtenir

Indices

Exercice 8 — Le damier (boucles imbriquées)

Étape 1 — Quadrillage à la main (sans boucle)

Étape 2 — Quadrillage avec boucles

Étape 3 — Damier

Contraintes

Ce que tu devrais obtenir

Indices

Résumé