For Loop

For Loops sind Wiederholungen im Programm. Sie sind sehr praktisch, um gleiche oder ähnliche Sachen viele Mal durchzuführen.

Aufbau

for(let i = 0; i < 10; i++) {
  console.log(i);  // in der Konsole werden die Zahlen 0 bis 9 ausgegeben
}

Der Aufbau ist folgendermassen: let i = 0 legt den Startwert eines Zählers fest. In diesem Fall startet die Variable i bei 0.

i < 10 legt fest, bis wann der Code zwischen den geschweiften Klammern ( {} ) wiederholt wird. In diesem fall so lange, wie i kleiner als 10 ist.

i++ bedeutet, dass nach jedem Durchlauf i um 1 erhöht wird.

Weitere Beispiele

for(let i = 10; i >= 0; i--) {
  console.log(i);   // in der Konsole werden die Zahlen 10 bis 0 ausgegeben
}

for(let i = 0; i < 20; i = i + 5) {
  console.log(i)    // in der Konsole werden die Zahlen 0, 5, 10, 15 ausgegeben
}

for(let i = 0; i <= 4; i = i + 0.5) {
  console.log(i)    // in der Konsole werden die Zahlen 0, 0.5, 1 ... 3.5, 4 ausgegeben
}

Das erste Beispiel zeigt, dass man auch rückwärts zählen kann.

Das zweite Beispiel zeigt, dass die Schrittgrösse beliebig gewählt werden kann.

Das dritte Beispiel zeigt, dass die Schrittgrösse auch eine Dezimalzahl sein kann.

Anwendungen

Der For Loop hat sehr viele Anwendungen und ist aus dem Programmieren nicht wegzudenken. Es folgen ein paar typische Beispiele.

let xCoordinates = [];  // leeres Array für die x-Koordinaten
let yCoordinates = [];  // leeres Array für die y-Koordinaten
let nCircles = 50;      // Anzahl Kreise, welche später gezeichnet werden

function setup() {

  createCanvas(400, 400);

  for(let i = 0; i < nCircles; i++) {       // der For Loop wird 50 Mal durchlaufen
    xCoordinates[i] = random(0, width);    // es werden 50 zufällige Werte in xCoordinates gespeichert
    yCoordinates[i] = random(0, height);   // es werden 50 zufällige Werte in yCoordinates gespeichert
  }

}

function draw() {

  background(100);

  // die 50 Kreise werden gezeichnet
  for(let i = 0; i < nCircles; i++) {
    ellipse(xCoordinates[i], yCoordinates[i], 50, 50);
  }

}

let words = ['hello', 'hi', 'welcome', 'goodbye', 'see you', 'bye', 'hey', 'morning', 'greetings'];
let nWords = 9;

let xCoordinates = [];  // leeres Array für die x-Koordinaten
let yCoordinates = [];  // leeres Array für die y-Koordinaten

function setup() {

  createCanvas(800, 400);

  for(let i = 0; i < nWords; i++) {       // der For Loop wird 9 Mal durchlaufen
    xCoordinates[i] = random(0, width);    // es werden 9 zufällige Werte in xCoordinates gespeichert
    yCoordinates[i] = random(0, height);   // es werden 9 zufällige Werte in yCoordinates gespeichert
  }
  
}
  
  function draw() {
  
  background(100);
  
  // Die 9 Wörter des Arrays words werden an einem zufälligen Ort gezeichnet
  textSize(32);
  fill(255);
  for(let i = 0; i < nWords; i++) {
    text(words[i], xCoordinates[i], yCoordinates[i]);
  }
  
}

Viele Elemente gleichzeitig animieren

let xCoordinates = [];  // leeres Array für die x-Koordinaten
let yCoordinates = [];  // leeres Array für die y-Koordinaten
let nCircles = 50;      // Anzahl Kreise, welche später gezeichnet werden

function setup() {

  createCanvas(400, 400);

  for(let i = 0; i < nCircles; i++) {       // der For Loop wird 50 Mal durchlaufen
    xCoordinates[i] = random(0, width);    // es werden 50 zufällige Werte in xCoordinates gespeichert
    yCoordinates[i] = random(0, height);   // es werden 50 zufällige Werte in yCoordinates gespeichert
  }

}

function draw() {

  background(100);

  // die 50 Kreise werden gezeichnet
  // zusätzlich werden alle 50 Koordinaten um 3 erhöht
  // falls die Koordinaten grösser sind als die Breite/Höhe des Zeichenfelds,
  // werden die Koordinaten wieder auf 0 gesetzt
  for(let i = 0; i < nCircles; i++) {
    xCoordinates[i] = xCoordinates[i] + 3;
    yCoordinates[i] = yCoordinates[i] + 3;

    if(xCoordinates[i] > width) {
      xCoordinates[i] = 0;
    }
    if(yCoordinates[i] > height) {
      yCoordinates[i] = 0;
    }

    ellipse(xCoordinates[i], yCoordinates[i], 50, 50);
  }

}