Als je naar bovenstaand figuur kijkt, kan je dan patronen ontdekken ? Beide y-coördinaten 60 en 80 blijven hetzelfde, maar ook in de x-coördinaat zit een patroon.

Een aantal zaken kunnen we hier van in variabele stoppen, om de code flexibeler te maken. x begint op 50, en neemt telkens een spatie van 10 toe. De y-coördinaat is telkens 60 en de lengte van het lijntje 20.

Dat levert de volgende variabelen op:

var x = 50;
var y = 60;
var spatie = 10;
var lengte = 20;

Als we hier een code mee schrijven krijgen we:

var x = 50;
var y = 60;
var spatie = 10;
var lengte = 20;

stroke(0);
x = x + spatie;
line(x, y, x, y+lengte);

x = x + spatie;
line(x, y, x, y+lengte);

x = x + spatie;
line(x, y, x, y+lengte);

x = x + spatie;
line(x, y, x, y+lengte);

x = x + spatie;
line(x, y, x, y+lengte);

Dit maakt de code flexibeler. Als we een grotere spatie willen bijvoorbeeld, of de lijntjes langer maken, dan kan dit gemakkelijk door de variabelen aan te passen. Echter hebben we nu wel nog meer code geschreven als voorheen. Het patroon is ook duidelijker geworden; we knippen en plakken nu letterlijk dezelfde regels code.
Dit kunnen we herschrijven door een loop te gebruiken. We herinneren ons van de cursus programming principles dat hier 3 dingen voor nodig zijn:

• start : waar begint de loop ?
• stap : hoe groot is de stap die wordt genomen ?
• stop : bij welke waarde moet de loop stoppen ?

Als we in onze code op zoek gaan naar deze 3 componenten waarmee de loop opbouwen, vinden we die :

• start : var x = 50
• stap : var spatie = 10
• stop: var stop (nog niet aangemaakt)

De bijhorende while loop ziet er dan zo uit:

Probeer met de kennis die je nu hebt, volgend figuur na te tekenen in code aan de hand van een while loop:

 

var x = 0;

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

function draw(){
  while( x < 9 ) {
    x = x + 1;
  }
  x = 0; 
  // Let op! Wanneer je een while loop in draw gebruikt, mag je niet
  // vergeten je startwaarde terug te resetten. x blijft anders 9! 
}

 

For loop >