Les boucles

Une boucle répète un bloc de code plusieurs fois de suite. Dix lignes, cent cercles, une grille de mille carrés : avec une boucle, cela tient en trois lignes de code. Et passer de dix à mille ne demande de changer qu’un seul nombre.

L'idée à retenir

Une boucle dit à l’ordinateur : « répète ceci tant que le test est vrai, en changeant une valeur à chaque tour ».

Pourquoi des boucles ?

Pour dessiner dix lignes horizontales, on peut écrire dix fois line() :

line(0, 0, 100, 0);
line(0, 10, 100, 10);
line(0, 20, 100, 20);
line(0, 30, 100, 30);
line(0, 40, 100, 40);
line(0, 50, 100, 50);
line(0, 60, 100, 60);
line(0, 70, 100, 70);
line(0, 80, 100, 80);
line(0, 90, 100, 90);

Regardez bien : d’une ligne à l’autre, tout est identique, sauf le y, qui augmente de 10 à chaque fois. C’est exactement ce qu’une boucle sait décrire :

for (let y = 0; y < 100; y = y + 10) {
  line(0, y, 100, y);
}

Le résultat est le même, mais le code est plus court et bien plus facile à modifier. Cent lignes au lieu de dix ? Il suffit de remplacer 100 par 1000 dans le test.

Le réflexe à prendre : repérez dans votre code ce qui se répète (ici line()) et ce qui change de façon régulière (ici y, de 10 en 10).

Anatomie de la boucle for

Une boucle for tient en une ligne, en trois parties séparées par des points-virgules, suivie du code à répéter entre accolades.

Les trois parties d'une boucle for

Voici son déroulé, au ralenti :

for (let x = 50; x < 400; x = x + 75) {  circle(x, 150, 50);}

1. 1Départ let x = 50
   une seule fois, au tout début
2. 2Test x < 400
   avant chaque tour : faux, on s'arrête
3. 3Corps, entre les accolades
   ce qui est répété
4. 4Incrément x = x + 75
   à la fin de chaque tour

◀❚❚ Pause▶

L’ordre est toujours le même :

1. Le départ n’est exécuté qu’une seule fois, au tout début.
2. Puis on teste. Si le test est vrai, on exécute le corps, puis l’incrément, et on revient au test.
3. Dès que le test est faux, la boucle s’arrête et le programme continue après l’accolade fermante.

Ici, x vaut successivement 50, 125, 200, 275 et 350 : cinq tours, cinq cercles. Quand x atteint 425, le test x < 400 est faux, et on sort.

On appelle souvent la variable d’une boucle i (pour index). Ici, on l’a appelée x parce qu’elle sert de position horizontale : choisissez le nom qui rend votre code le plus clair.

Une boucle n'est pas une animation

Le déroulé ci-dessus est un ralenti. En vrai, les cinq tours s’enchaînent en un instant, avant que l’image ne s’affiche : on voit apparaître les cinq cercles en même temps. Pour animer quelque chose dans le temps, c’est draw() qu’on utilise, avec une variable qui change à chaque image (voir Les variables).

Deux raccourcis que vous croiserez souvent :

• i++ veut dire i = i + 1, et i += 10 veut dire i = i + 10.
• Dans d’anciens exemples, vous verrez var à la place de let : pour nous, c’est la même chose.

Utiliser la variable de la boucle

La variable de la boucle change à chaque tour : on peut s’en servir dans le corps pour varier la position, la taille, la couleur… Survolez les bandes pour voir la valeur de i à chaque tour :

function draw() {
  noStroke();
  for (let i = 0; i < 10; i = i + 1) {
    fill(i * 25);
    rect(i * 60, 0, 60, height);
  }
}

Survolez les bandes

i vaut 0, puis 1, 2… jusqu’à 9. En multipliant i par 60, on obtient la position de chaque bande : 0, 60, 120… 540. En le multipliant par 25, on obtient un gris de plus en plus clair : 0 (noir), 25, 50… 225. (Le contour rose et l’étiquette sont là pour vous aider, ils ne sont pas dans le code.)

Combien de tours ?

Le test peut comparer la variable à n’importe quelle valeur, même une valeur qui change, comme la position de la souris :

function draw() {
  background(240);
  for (let x = 0; x < mouseX; x = x + 20) {
    line(x, 0, x, height);
  }
}

Déplacez la souris

Plus la souris est à droite, plus la boucle fait de tours. Collez la souris au bord gauche : mouseX vaut 0, le test 0 < 0 est faux dès le départ, et la boucle ne fait aucun tour. Le corps n’est jamais exécuté (la ligne 4 se grise).

La souris dans la boucle

On peut aussi utiliser la souris dans le corps de la boucle. Ici, chaque ligne part d’un point différent du bord du haut, mais toutes arrivent sur la souris :

function draw() {
  background(240);
  for (let x = 0; x <= width; x = x + 30) {
    line(x, 0, mouseX, mouseY);
  }
}

Déplacez la souris

Le point de départ (x, 0) change à chaque tour de boucle. Le point d’arrivée (mouseX, mouseY) est le même pour toutes les lignes, mais il change à chaque image de draw(). On utilise ici <= pour dessiner aussi une ligne depuis le coin en haut à droite, en x = 600.

Boucles imbriquées

On peut placer une boucle à l’intérieur d’une autre. C’est la façon la plus simple de dessiner une grille : la boucle extérieure parcourt les rangées (y), et pour chaque rangée, la boucle intérieure parcourt toutes les colonnes (x). Voici l’ordre dans lequel les carrés sont dessinés, au ralenti :

function draw() {
  background(240);
  for (let y = 0; y < height; y = y + 50) {
    for (let x = 0; x < width; x = x + 50) {
      rect(x + 5, y + 5, 40, 40);
    }
  }
}

Pour chaque tour de la boucle extérieure (la ligne 3 s’allume au début de chaque rangée), la boucle intérieure fait tous ses tours : 12 carrés, de x = 0 à x = 550. Puis y augmente de 50, et la boucle intérieure recommence à x = 0. Au total : 5 rangées × 12 colonnes = 60 carrés.

Le + 5 et la taille de 40 (au lieu de 50) laissent un petit espace entre les carrés.

Attention

Chaque boucle doit avoir sa propre variable : si les deux s’appellent i, elles se mélangent. Prenez i et j, ou mieux, x et y quand elles représentent des positions.

Une variante, où chaque carré reçoit une couleur au hasard. Comme la grille est redessinée à chaque image, les couleurs changent sans cesse :

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(220);
}

function draw() {
  for (let y = 0; y < height; y = y + 20) {
    for (let x = 0; x < width; x = x + 20) {
      fill(random(255), random(255), random(255));
      rect(x, y, 15, 15);
    }
  }
}

• Boucles imbriquées
• Boucles imbriquées dans la boucle draw()

Attention à la boucle infinie

Si le test ne devient jamais faux, la boucle ne s’arrête jamais :

for (let i = 0; i < 10; i = i - 1) {   // i diminue : il n'atteindra jamais 10 !
  circle(50, 50, 20);
}

Le programme reste bloqué dans la boucle, et la page se fige. Si cela vous arrive, vérifiez que votre incrément rapproche bien la variable de la fin, et que le test va finir par être faux.

En résumé

for (let i = 0; i < 10; i = i + 1) {
  // répété 10 fois, avec i = 0, 1, 2 … 9
}

• Trois parties entre les parenthèses, séparées par des ; : le départ, le test, l’incrément.
• Le corps est répété tant que le test est vrai.
• La variable de la boucle change à chaque tour : utilisez-la pour faire varier position, taille, couleur…
• Tous les tours s’exécutent en un instant, dans une même image.
• Deux boucles imbriquées dessinent une grille. Donnez-leur des noms différents.

À vous de jouer

1. Dans l’exemple des bandes, passez à 20 bandes, toujours sur toute la largeur. Que faut-il changer en plus du test ?
2. Ajoutez une deuxième line() dans la boucle des rayons, pour que des lignes partent aussi du bas du canevas.
3. Dessinez des cercles concentriques, au centre du canevas, avec une boucle qui fait diminuer le diamètre.
4. Dans la grille, faites varier la couleur des carrés selon x et y, par exemple avec fill(x, y, 200).

Pour aller plus loin

Une progression en quelques sketches, à ouvrir dans l’éditeur :

• Dix lignes, « manuellement »
• Dix lignes en utilisant une boucle for()
• Les lignes jusqu’en bas de la fenêtre, avec des épaisseurs et opacités différentes
• Le même, redessiné à chaque image de draw()
• Un ensemble de lignes verticales