Anatomy of the For-Loop

For grid systems, understanding the for-loop is of elementary importance. That’s why we’ll take a close look at this one.

Processing

void setup() {
  size(900, 900);
}

void draw() {
  background(0);

  for (int i = 0; i < 10; i++) {
    println(i); // returns 0,1,2,3,4,5,6,7,8,9
  }
}

P5.js

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

function draw() {
  background(0);

  for (let i = 0; i < 10; i++) {
    print(i); // returns 0,1,2,3,4,5,6,7,8,9
  }
}

The principle is not very easy to understand and to be honest, I really had problems to understand it in depth for a relatively long time. But it helps a lot to have a close look at all elements of the for-loop, because many answers to future questions arise from it.

---

Here a variable with the name i is declared, which gets the value 0. i is here really only the name of the variable. You could just as well call it something else. However, the name i has become established over the years.

---

This is a condition as we know it from the conditional statements: In this case the loop is only executed as long as i is less than 100.

---

This somewhat perhaps confusing passage says nothing other than “add 1 to i“.

---

Example

//Processing
for (int i = 0; i < 100; i++){
   // this code executes 100 times
}

//P5.js
for (let i = 0; i < 100; i++){
   // this code executes 100 times
}

---

Language Comparison

Processing	p5.js
for	for