Structuur van p5.js

Ieder p5.js programma bestaat uit twee functies: setup() en draw(). De functie setup() wordt één keer uitgevoerd aan het begin van het programma. De functie draw() wordt daarna herhaaldelijk uitgevoerd.

function setup() {
    // Deze code wordt één keer uitgevoerd aan het begin van het programma.
}

function draw() {
    // Deze code wordt herhaaldelijk uitgevoerd.
}

De draw() functie wordt 60 keer per seconde uitgevoerd, tenzij de framerate is aangepast met de functie frameRate().

Als het tekenen van één frame langer duurt dan 1/60ste seconde zal de framerate lager worden dan 60x per seconde. Echter, als het tekenen van één frame minder dan 1/60ste seconde duurt, zal de framerate nog steeds 60x per seconde zijn.

setup()

In deze functie zal je code schrijven die één keer uitgevoerd moet worden aan het begin van het programma. Bijvoorbeeld het maken van een canvas met de functie createCanvas().

Let op

Als je gebruik wil maken van de p5 variabelen als width en height moet je deze variabelen in de setup() functie gebruiken. Deze variabelen zijn namelijk pas beschikbaar nadat de setup() functie is uitgevoerd.

De code:

let x = width/2;

function setup() {
    createCanvas(400, 400);
    console.log(width);
    console.log(x);
}    

zal de volgende output geven:

400
0

Voordat setup() is uitgevoerd is de variabele width nog niet beschikbaar en wordt de waarde 0 gebruikt.

draw()

In deze functie zal je code schrijven die herhaaldelijk uitgevoerd moet worden. Bijvoorbeeld het tekenen van een vorm met de functie rect(). Omdat draw() herhaaldelijk wordt aangeroepen, zal de vorm ook herhaaldelijk worden getekend en kan je een animatie maken.

preload()

Deze functie wordt één keer uitgevoerd voordat de setup() functie wordt uitgevoerd. In deze functie kan je code schrijven die nodig is om je programma te laten werken, zoals het inladen van afbeeldingen met de functie loadImage().

preload() vs setup()

De functie preload() blokkeert het laden van de pagina totdat alle code in de functie is uitgevoerd. Dit garandeert dat alles wat in de preload() functie wordt geladen beschikbaar is in de setup() functie.

p5 program flow

De functies setup() en draw() zijn onderdeel van elk p5 programma. De functie preload() is optioneel. De volgorde waarin deze functies worden uitgevoerd is als volgt:

graph TB
    A((start))
    B(preload)
    C[setup]
    D[draw]    
    A -- optioneel --> B
    A -->C
    B --> C
    C --> D
    D --1/60 seconde--> D