Les boucles permettent d'exécuter une série d'instructions plusieurs fois de suite. Elles évitent de dupliquer inutilement des portions de code. Lorsque l'ordinateur lit le programme et rencontre une boucle, il va exécuter le code écrit dans le bloc de la boucle qu'on lui a indiqué. Il le fait instantanément et autant de fois de suite tant que sa condition est vraie.

La boucle for

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 après chaque passage dans la boucle. On utilise souvent 'i' comme nom pour la variable interne de la boucle. Elle comprend : un nombre de départ, un nombre maximal et une incrémentation. Sa syntaxe est la suivante : for (i = NombreDeDépart; i < NombreMaximal; i = i + INCREMENT) { }.

L'exemple ci-dessous va nous permettre d'illustrer simplement cette notion. L'objectif est de réaliser un dessin affichant dix lignes horizontales. Nous pouvons écrire les 10 lignes

function setup() {
createCanvas(625, 500);  // crée un canevas de 625 par 500 pixels
}

function draw() {
    background(0); // change la couleur de l'arrière-plan
    stroke(255,200,255); // détermine la couleur des lignes
    line(50, 50, 550, 50);  // dessine une ligne 
    line(50, 100, 550, 100); // ...et une suivante 50 pixels plus bas
    line(50, 150, 550, 150); // ...et ainsi de suite
    line(50, 200, 550, 200);
    line(50, 250, 550, 250);
    line(50, 300, 550, 300);
    line(50, 350, 550, 350);
    line(50, 400, 550, 400);
    line(50, 450, 550, 450);
    line(50, 500, 550, 500);
    
}

Mais il est plus rapide d'utiliser la boucle 'for' afin d'exécuter 10 fois l'instruction line() :

function setup() {
createCanvas(625, 500); 
}

function draw() {
    background(0); 
    stroke(255,200,255); 
   
    for(i=0;i<10;i++){ 
        line(50, i*50, 550, i*50);  // dessine une ligne à chaque fois que la boucle est appelée. Ici 'i' va changer de valeur.       
        }  
}

Le premier code contient dix fois l'instruction line(), le second code est réalisé à partir d'une boucle. Le résultat des deux codes est le même, la différence se situant au niveau de la longueur du code, l'un étant plus rapide à saisir (et ultérieurement à modifier) que l'autre.

Exemple : afficher des carrés disposés en ligne et colonnes.

function setup() {
createCanvas(625, 500); 
}

function draw() {
    background(0);
    translate(70,15);  // déplace l'espace de dessin
    noFill(); // évite de remplir les rectangles
    stroke(255,200,255); 
    for(i=0;i<10;i++){    // première boucle
        for(j=0;j<10;j++){  // seconde boucle    
           rect(i * 50, j*50, 20, 20);   // appel de la fonction rect()   
        }  // fin de la première boucle            
    }  // fin de la seconde boucle 
}

Copié avec quelques adaptations depuis : https://fr.flossmanuals.net/processing/les-repetitions/