Loops¶

In programmeren gebruik je loops (lussen) om code meerdere keren uit te voeren zonder deze te herhalen. Loops helpen bij het automatiseren van herhalende taken, zoals het tekenen van patronen, het bijwerken van posities in animaties of het doorlopen van data.

Wat is een loop?¶

Een loop is een control flow-constructie die een blok code herhaald uitvoert zolang aan een bepaalde conditie wordt voldaan.

De drie belangrijkste soorten loops in JavaScript zijn:

for – gebruikt wanneer het aantal herhalingen vooraf bekend is.
while – gebruikt wanneer je niet weet hoe vaak iets herhaald moet worden, maar wel wanneer het moet stoppen.
do...while – lijkt op while, maar voert altijd minstens één keer uit voordat de conditie wordt getest.

De `for`-loop¶

De klassieke for-loop bestaat uit drie delen:

Initialisatie – de startwaarde van de teller.
Conditie – bepaalt wanneer de loop stopt.
Update – past de teller aan per iteratie.

Voorbeeld: een simpele for-loop

for (let i = 0; i < 5; i++) {
  console.log(i);
}

De uitvoer is:

Voorbeeld: for-loop in p5.js voor meerdere vormen

function draw() {
  background(220);
  for (let i = 0; i < 10; i++) {
    ellipse(i * 30 + 15, height / 2, 20, 20);
  }
}

Deze code tekent tien cirkels naast elkaar in een tekenvenster.

De `while`-loop¶

Een while-loop blijft herhalen zolang de conditie waar is.

Voorbeeld: eenvoudige while-loop

let x = 0;
while (x < 5) {
  console.log(x);
  x++;
}

De teller x wordt opgehoogd tot de conditie x < 5 niet meer waar is.

Voorbeeld: lijnen tekenen met while-loop

let x = 0;
while (x < width) {
  line(x, 0, x, height);
  x += 20;
}

Deze code tekent verticale lijnen met een afstand van 20 pixels.

De `do...while`-loop¶

Een do...while-loop voert eerst uit, en controleert daarna of het nog een keer moet.

Voorbeeld: do…while basis

let count = 0;
do {
  console.log(count);
  count++;
} while (count < 3);

De uitvoer is:

    0
    1
    2

Voorbeeld: do…while met willekeurige kans

let attempts = 0;
let success;
do {
  success = random(1) > 0.5;
  attempts++;
} while (!success);
console.log('Aantal pogingen:', attempts);

Deze code blijft proberen totdat een willekeurige kans groter dan 0.5 is, en stopt daarna.

`break` en `continue`¶

Gebruik break om een loop voortijdig te stoppen en continue om de rest van de huidige iteratie over te slaan.

Voorbeeld: break gebruiken in een for-loop

for (let i = 0; i < 5; i++) {
  if (i === 3) break; // stopt bij i = 3
  console.log(i);
}

Voorbeeld: continue gebruiken in een for-loop

for (let i = 0; i < 5; i++) {
  if (i === 2) continue; // slaat 2 over
  console.log(i);
}

Nested loops¶

Een loop kan binnen een andere loop staan. Dit is handig voor tabellen, grids of patronen.

Voorbeeld: geneste loops voor een 3×3 grid

function draw() {
  background(220);
  for (let row = 0; row < 3; row++) {
    for (let col = 0; col < 3; col++) {
      rect(col * 40 + 10, row * 40 + 10, 30, 30);
    }
  }
}

Deze code tekent een 3×3 grid van rechthoeken.

Loops en animatie¶

De draw()-functie in p5.js herhaalt zichzelf automatisch frame na frame, waardoor animatie mogelijk wordt.

Voorbeeld: animatie met draw() en variabele positie

let x = 0;
function draw() {
  background(0);
  ellipse(x, height / 2, 20, 20);
  x += 2;
  if (x > width) noLoop(); // stopt animatie
}

Hier zie je hoe een loop in combinatie met een variabele beweging kan creëren.

Veelgemaakte fouten¶

Vergeten update: een while-loop zonder update veroorzaakt een oneindige loop.
Verkeerde conditie: gebruik i < n in plaats van i <= n als je niet wilt dat de loop te ver gaat.
Accolades vergeten: bij meerdere statements in de loop-body zijn {} verplicht.
Variabele bereik: gebruik let in plaats van var om de scope te beperken.

Voorbeeld: veelgemaakte fout met oneindige while-loop

// Fout voorbeeld: oneindige loop
let x = 0;
while (x < 5) {
  console.log(x);
  // x++ ontbreekt!
}

Samenvatting¶

Loop-type	Wordt gebruikt voor	Controleert conditie	Uitvoering
`for`	Vast aantal herhalingen	vóór	Alleen als conditie waar is
`while`	Onbekend aantal, afhankelijk van conditie	vóór	Alleen als conditie waar is
`do...while`	Minstens één keer uitvoeren	ná	Altijd minstens één keer

Beslisboom: welk type loop gebruik je?¶

graph TD;
    A[Wil je iets herhalen?] -->|Nee| B[Gebruik geen loop];
    A -->|Ja| C[Weet je vooraf hoeveel keer?];
    C -->|Ja| D[Gebruik een for-loop];
    C -->|Nee| E[Moet het minstens één keer uitgevoerd worden?];
    E -->|Ja| F[Gebruik een do...while-loop];
    E -->|Nee| G[Gebruik een while-loop];

Belangrijke begrippen¶

Iteratie – één herhaling van een loop.
Loop-variabele – de teller (vaak i) die per iteratie verandert.
Conditie – logische test die bepaalt of de loop doorgaat.
Break – beëindigt een loop.
Continue – slaat de rest van de iteratie over.
Nested loop – een loop binnen een andere loop.
draw() – de animatiefunctie die herhaald wordt.
noLoop() – stopt de automatische herhaling van draw().
frameCount – houdt bij hoeveel frames zijn getekend.
for/while/do…while – de drie hoofdtypen loops in JavaScript.