La boucle

La palissade de Billy

Billy l'ogre protège son camp derrière une palissade de vingt pieux. Avec ce qui a été vu jusqu'ici, chaque pieu demande sa ligne :

fill(110, 80, 50);
rect(0, 400, 20, 120);
rect(40, 400, 20, 120);
rect(80, 400, 20, 120);
// … dix-sept lignes de plus

Les vingt lignes ne diffèrent que par un nombre, qui augmente de 40 à chaque fois. La boucle écrit la ligne une seule fois et la fait répéter :

async function setup() {
  createCanvas(800, 600);
  await chargerPersonnages();
}

function draw() {
  background(20);
  dessinerBilly(400, 500, 250);

  fill(110, 80, 50);
  for (let i = 0; i < 20; i = i + 1) {
    rect(i * 40, 400, 20, 120);
  }
}

Une palissade deux fois plus serrée, quarante pieux espacés de 20 pixels, demande de changer deux nombres et pas d'écrire vingt lignes de plus.

Tour par tour

La boucle se déroule pas à pas. Pour une palissade de quatre pieux, i < 4 :

`i` vaut	`i < 4` ?	le pieu est planté en x =
0	oui	0
1	oui	40
2	oui	80
3	oui	120
4	non	la boucle s'arrête

Le for tient en trois morceaux, séparés par des points-virgules :

let i = 0 : d'où l'on part ;
i < 4 : jusqu'à quand on continue, une condition reposée avant chaque tour, dont 4 est la borne ;
i = i + 1 : ce qu'on fait entre deux tours, ici une incrémentation de 1.

Le code des autres écrit souvent i++, qui veut dire i = i + 1.

i est le compteur de la boucle, une variable comme une autre, et le dessin peut s'en servir. Ici, chaque pieu monte de 5 pixels de plus que le précédent :

async function setup() {
  createCanvas(800, 600);
  await chargerPersonnages();
}

function draw() {
  background(20);
  dessinerBilly(400, 500, 250);

  fill(110, 80, 50);
  for (let i = 0; i < 20; i = i + 1) {
    rect(i * 40, 400 - i * 5, 20, 120 + i * 5);
  }
}

Le premier pieu, i à 0, garde la hauteur de départ. Le vingtième, i à 19, dépasse de 95 pixels.

Autant de fois que la vie

La borne de la boucle peut être une variable. Billy a dix points de vie, affichés en cœurs, et chaque clic de Raoul lui en retire un :

let vieBilly = 10;

async function setup() {
  createCanvas(800, 600);
  await chargerPersonnages();
}

function draw() {
  background(20);
  dessinerRaoul(250, 500, 120);
  dessinerBilly(600, 500, 250);

  fill(200, 30, 40);
  for (let i = 0; i < vieBilly; i = i + 1) {
    circle(470 + i * 30, 120, 20);
  }
}

function mousePressed() {
  vieBilly = vieBilly - 1;
}

Quand Raoul frappe, vieBilly baisse, et à l'image suivante la boucle fait moins de tours. Aucune suite de lignes écrites à la main ne peut suivre un nombre qui change pendant que le sketch tourne. L'exercice Les cœurs de Billy part de là.

L'armée en rangs

L'armée du roi se range en dix colonnes de cinq Raoul. Une boucle placée dans une autre, dite imbriquée, dessine les cinquante :

async function setup() {
  createCanvas(800, 600);
  await chargerPersonnages();
}

function draw() {
  background(20);

  for (let colonne = 0; colonne < 10; colonne = colonne + 1) {
    for (let rang = 0; rang < 5; rang = rang + 1) {
      dessinerRaoul(130 + colonne * 60, 170 + rang * 80, 40);
    }
  }
}

Pour chaque tour de la boucle extérieure, la boucle intérieure fait tous les siens. La première colonne se remplit de haut en bas, puis la deuxième, et ainsi de suite jusqu'à la dixième. Dix tours de cinq donnent cinquante soldats.

Les deux compteurs ont des noms, colonne et rang, plutôt que i et j. Le code se relit sans avoir à se souvenir lequel est lequel.

Où vit le compteur

Après la boucle, console.log(i) affiche i is not defined. Le i déclaré dans le for n'existe qu'entre ses accolades.

Ce qui est déclaré entre deux accolades n'existe pas en dehors d'elles.

C'est la même règle de portée que pour une variable déclarée dans draw(), qui ne survit pas à l'image suivante.