Flow is een principe dat we al behandeld hebben tijdens de programming principles cursus. Met flow wordt de volgorde bedoelt waarin een programma wordt uitgevoerd. Bij P5js bestaat nagenoeg elk programma uit 2 grote blokken: function setup(){ } en function draw(){ }.
- Alles wat tussen de accolades { } van function setup() staat, wordt automatisch 1 keer uitgevoerd bij het opstarten van je programma.
- Alles wat tussen de accolades { } van function draw() staat direct daarna, in een loop die zichzelf blijft herhalen tot het programma wordt stop gezet.
De uitkomst van bovenstaande code wordt dan: 1a, 1b, 1c, 2a, 2b, 2a, 2b, 2a, 2b,…
Een programma dynamisch maken
Wanneer we dus de programma’s die we tot nu toe hebben geschreven dynamisch gaan maken, wil dat zeggen dat we bovenstaande codeblokken moeten toevoegen. Beste practice is dat het bepalen van de grootte van het canvas in de function setup() terecht komt, en de rest voorlopig in draw. Een voorbeeldprogramma met een rode cirkel zou er dan eerst zo hebben uitgezien:
Als we vervolgens de codeblokken setup en draw toevoegen wordt het:
Als we beiden voorbeelden uitvoeren zien we geen enkel verschil. Het tweede voorbeeld voert nochtans de code die bij het draw blok hoort steeds weer uit, in een voortdurende loop. De reden dat we niets zien is dat we exact dezelfde cirkel, op exact dezelfde plaats tekenen, elke keer opnieuw. Hier gaan we vanaf het volgende hoofdstuk verandering in brengen.
extra: weet jij waarom de cirkel in het 2de voorbeeld een rafelige rand krijgt ?