Documentation

Boucles

Répéter une instruction.

La boucle for

Changez 5 en 50 pour en avoir cinquante ;

for (let i = 0; i < 5; i++) {
  let x = i * 10;
  circle(x, 200, 40);
}

let i = 0 ; on crée une variable qui va nous dire à combien de répétition on est.

i < 5 ; avant chaque tour, on vérifie. Si c'est vrai, on exécute le bloc, si c'est faux, on sort.

i++ ; après chaque répétition, on ajoute 1 au compteur puis on retourne à l'étape précédente

Les valeurs prises par i sont donc : 0, 1, 2, 3, 4.

On compte à partir de 0.

Répartir sur toute la largeur

let total = 12;
let span = width / total;

for (let i = 0; i < total; i++) {
  let x = (i * span); 
  circle(x, height / 2, span;
}

On peut aussi faire avancer le compteur par pas plutôt que par unité.

let step = 20;
for (let x = 0; x < width; x += step) {   // x avance de`step` en `step`
  line(x, 0, x, height);
}

Tableaux

Un tableau stocke plusieurs valeurs dans une seule variable.

let sizes = [30, 60, 40];
let shapes = ["cercle", "carré", "triangle"];
let palette = ['#0d0d0d', '#e8543f', '#f2e8d5'];

On accède à une valeur par son index, en commençant à 0.

sizes[0]      // 30 ; premier élément
sizes[1]      // 60
sizes[2]      // 40 ; dernier élément
sizes.length  // 3  ; le nombre d'éléments

Parcourir un tableau

La boucle et le tableau vont ensemble, on va utiliser i comme index.

let positionsX = [100, 200, 300];
let sizes = [30, 60, 40];

let colorA = color(220, 0, 15);
let colorB = color(25, 180, 120);
let colorC = color(120, 120, 200);
let palette = [colorA, colorB, colorC];

for (let i = 0; i < sizes.length; i++) {
  fill(palette[i]);
  circle(positionsX[i], 200, sizes[i]);
}

Ajouter au fil du temps

let points = [];              // tableau vide au départ

function setup() {
  createCanvas(600, 600);
}

function mousePressed() {
  points.push({ x: mouseX, y: mouseY });   // on ajoute à la fin
}

function draw() {
  background(240);
  for (let i = 0; i < points.length; i++) {
    circle(points[i].x, points[i].y, 20);
  }
}

Extension ; la grille

Une boucle à l'intérieur d'une autre boucle produit une grille. La boucle extérieure parcourt les colonnes, l'intérieure parcourt les lignes.

let colonnes = 10;
let lignes = 10;
let cellule;

function setup() {
  createCanvas(500, 500);
  cellule = width / colonnes;
}

function draw() {
  background(240);

  for (let i = 0; i < colonnes; i++) {       // i → colonnes, de gauche à droite
    for (let j = 0; j < lignes; j++) {       // j → lignes, de haut en bas
      let x = i * cellule + cellule/2;
      let y = j * cellule + cellule/2;
      circle(x, y, cellule);
      // text('i:'+i+'\nj:'+j, x, y);
    }
  }
}

Pièges fréquents

→

Boucle infinie

La condition de sortie n'est jamais fausse.

→

Toutes est au même endroit

Aucun paramètre ne dépend de i.

→

Le sketch rame

Une grille 200 × 200 fait 40 000 formes par frame.

← couleurs variation →