Valentin Dupas

💡 If this is the first course you read from me, please read this small thing : about my courses

Multitudes

For

for() est un mot-clef qui permet de définir un bloc de code que l'on va répéter plusieurs fois.

Il se présente comme ceci:

for loops

  • Initialisation de la boucle: une instruction qui s'exécute une fois, avant de rentrer dans la boucle.
  • condition capturante : une condition qui est verifiée à chaque tour de boucle, on continue de faire des tours tant que la condition est vraie.
  • Instruction à executer après chaque tour : généralement là pour faire progresser quelque chose qui nous permettera d'invalider la condition capturante.

Du coup, si j'écris ...

// pour une variable i valant 0
// tant que i est inférieure ou égal à 10
// en augmentant i de 1 à chaque tour...
for (let i = 0; i <= 10; i = i + 1) {
  console.log(i); // on affiche i
}

C'est comme si j'écrivais ...

console.log(0);
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);
console.log(10);

Ce qui est plutôt sympa parce que si maintenant j'ai besoin de faire ça de 0 à 150 plutôt que de 0 à 10, je peux juste changer le chiffre dans la condition du for().

for (let i = 0; i <= 150; i = i + 1) {
  console.log(i);
}
plutôt que ça ...
console.log(0);
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);
console.log(10);
console.log(11);
console.log(12);
console.log(13);
console.log(14);
console.log(15);
console.log(16);
console.log(17);
console.log(18);
console.log(19);
console.log(20);
console.log(21);
console.log(22);
console.log(23);
console.log(24);
console.log(25);
console.log(26);
console.log(27);
console.log(28);
console.log(29);
console.log(30);
console.log(31);
console.log(32);
console.log(33);
console.log(34);
console.log(35);
console.log(36);
console.log(37);
console.log(38);
console.log(39);
console.log(40);
console.log(41);
console.log(42);
console.log(43);
console.log(44);
console.log(45);
console.log(46);
console.log(47);
console.log(48);
console.log(49);
console.log(50);
console.log(51);
console.log(52);
console.log(53);
console.log(54);
console.log(55);
console.log(56);
console.log(57);
console.log(58);
console.log(59);
console.log(60);
console.log(61);
console.log(62);
console.log(63);
console.log(64);
console.log(65);
console.log(66);
console.log(67);
console.log(68);
console.log(69);
console.log(70);
console.log(71);
console.log(74);
console.log(75);
console.log(76);
console.log(77);
console.log(78);
console.log(79);
console.log(80);
console.log(81);
console.log(82);
console.log(84);
console.log(85);
console.log(86);
console.log(87);
console.log(88);
console.log(89);
console.log(90);
console.log(91);
console.log(92);
console.log(93);
console.log(94);
console.log(95);
console.log(96);
console.log(97);
console.log(98);
console.log(99);
console.log(100);
console.log(101);
console.log(102);
console.log(103);
console.log(104);
console.log(105);
console.log(106);
console.log(107);
console.log(108);
console.log(109);
console.log(110);
console.log(111);
console.log(112);
console.log(113);
console.log(114);
console.log(115);
console.log(116);
console.log(117);
console.log(118);
console.log(119);
console.log(120);
console.log(121);
console.log(122);
console.log(123);
console.log(124);
console.log(125);
console.log(126);
console.log(127);
console.log(128);
console.log(129);
console.log(130);
console.log(131);
console.log(132);
console.log(133);
console.log(134);
console.log(135);
console.log(136);
console.log(137);
console.log(138);
console.log(139);
console.log(140);
console.log(141);
console.log(142);
console.log(143);
console.log(144);
console.log(145);
console.log(146);
console.log(147);
console.log(148);
console.log(149);
console.log(150);

Outre le fait que c'est plus simple de changer une boucle, c'est d'autant plus important pour faire des manipulations répetitives parce que vous n'avez pas remarqués qu'il manquait console.log(83) dans le bloc ci-dessus.

"Pourquoi i?" "C'est quoi i?"

i est le possible raccourcis de deux mot anglais:

  • index que l'on pourrait traduire par "entrée" comme dans la phrase "abaca est la première entrée du dictionnaire".
  • iteration qui est le même mot en francais (à un accent près). Itérer est l'action de répeter le même procédé plusieurs fois. Une itération étant une répétetition.

Mais i est seulement un nom, et en pratique cette variable contient le numéro de l'entrée à laquelle nous sommes dans la boucle. Ou en tout cas c'est quasiment toujours le cas. Rien nous force à ce que ce soi comme ça mais ne pas le faire reviens à intentionnellement rendre son code illisible, et personne devrait faire ça.

Si vraiment le nom i vous perturbe vous pouvez utiliser autre chose comme :

for (let round = 0; round <= 10; round = round + 1) {
  // gna gna gna, le truc qu'on fait plein de fois
}

Mais sachez quand même que c'est le nom que presque tout le monde utilisera en dehors de vous. Donc il faudra au moins être capable de le lire.

Problème

Validez les étapes une par une.

1.dessinez un carré

Solution
function draw() {
  rect(0, 0, 30, 30);
}

2.dessinez une ligne de 10 carrés allant du bord gauche de l'écran au bord droit. (Indice: il faudra utiliser une boucle for)

Solution
function draw() {
  for (let i = 0; i < width; i = i + width / 10) {
    rect(i, 0, 30, 30);
  }
}

3.utiliser une autre boucle for pour dessiner des lignes jusqu'à remplir l'espace de dessin, ce n'est pas grave si ça déborde.

Solution
function draw() {
  background(255);

  for(let j = 0; j < height; j = j + width / 10){

    //ligne
    for (let i = 0; i < width; i = i + width / 10) {
      rect(i, j, width / 10, width / 10);
    }

  }
}

Arrays & "monde"

Objects