Les boucles sont à la base de tout ce que font nos ordinateurs. Elles sont un autre concept-clé de la programmation, quel que soit le langage.

Nous les avons déjà utilisées dans nos premiers sketchs P5.js sans pour autant avoir eu à retenir une quelconque syntaxe. La fonction draw() exécute une boucle, infinie, qui continuera à boucler tant qu'on ne l'arrête pas. Les boucles, en combinaison avec les variables, conditions, tableaux et autres éléments fondamentaux, vont véritablement décupler nos possibilités.

L'idée est de repérer dans votre code les éléments qui se répètent ou qui s'incrémentent de façon régulière.

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

La boucle for

L'exemple ci-dessus réécrit avec une boucle for(). L'intérêt est ici évidemment la flexibilité et la maintenabilité du code. Si je vous demande 5000 lignes, vous n'aurez pas une seule ligne de code supplémentaire à écrire.

for (var i = 0; i < 100; i = i + 10) {
    line(0, i, 100, i);
}

Ce type de boucle permet de répéter une série d'instructions un nombre de fois défini. Elle incorpore une variable qui va s'incrémenter à chaque passage dans la boucle. On utilise souvent i comme nom pour la variable interne de la boucle. C'est une convention mais l'utiliser vous permet de vous y retrouver dans le code d'autres personnes et inversément.

Les boucles en une progression simple

Utiliser les boucles va vous permettre de générer une complexité que vous ne pourriez pas gérer manuellement. Les quelques exemples ci-dessous montrent une progression simple avec un simple dessin de lignes:

• Dix lignes, "manuellement"
• Dix lignes en utilisant une boucle for()
• Le même sketch, mais avec les lignes jusqu'en bas de la fenêtre, , avec des épaisseurs et opacités différentes pour chaque ligne
• Et enfin le sketch précédant mais où l'ensemble des lignes est redessiné à chaque boucle draw()
• Etc.

Vous pouvez augmenter encore ceci en créant un ensemble de lignes verticales, en modifiant les couleurs pour chaque ligne, etc.

Imbriquer des boucles

Les boucles peuvent s'imbriquer les une dans les autres. Cette technique permet de rapidement passer à des visualisations à deux, voir trois dimensions. Lorsqu'on imbrique des boucles, il faut prendre garde au nom que l'on donne à la variable de chaque boucle. En effet si elles se nomment toutes i, le programme va mélanger les boucles. Chaque variable de chaque boucle doit avoir un nom propre. Par exemple : i, j, k, etc. ou si elles sont liées à des dimensions : x, y et z.

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

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

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