P5.js


Een p5js-project bestaat altijd uit minimaal twee bestanden: een index.html-bestand en een sketch.js-bestand. Een html-bestand is een bestand met daarin de html-code die er voor zorgt dat de pagina zichtbaar is in de browser. In het .js (Javascript) bestand schrijf je de scripts om de interactieve, visuele en auditieve elementen toe te voegen aan jouw project.


Opbouw

Een P5js-sketch bestaat altijd uit twee basisfuncties: setup() en draw(). De setup()-functie wordt bij het opstarten van het script éénmaal uitgevoerd. Hierin plaats je dus code die van belang is voor het opbouwen van je sketch: hoe groot is het canvas waarin je kan tekenen, hoe snel draait de sketch etc.
De draw()-functie is een loop. Deze wordt nadat de setup()-functie is uitgevoerd continue achter elkaar uitgevoerd op een bepaalde snelheid. Hierdoor ontstaat de mogelijkheid om beelden te laten bewegen. De snelheid waarmee deze draw()-loop herhaald wordt kan je bepalen in door de frameRate() aan te passen in de setup()-functie. Bij een frameRate van 30 zal de loop 30 keer per seconde uitgevoerd worden. Standaard draait de loop op de verversingssnelheid van jouw beeldscherm (vaak 60 Hz) Voor meer informatie over de basis van P5js ga je naar p5js.org.


Canvas

Alles wat je in P5.js maakt wordt getekend in een Canvas. Beschouw dit als een wit doek waar je vervolgens op kan schilderen. Standaard is dit canvas 100 x 100 pixels groot. Je kunt met de createCanvas()-functie echter zelf bepalen hoe groot dit Canvas wordt:

function setup() {
    createCanvas(800,600); //maakt een canvas van 800 x 600 pixels
}
function draw() {

}


Coördinaten

Binnen een P5.js-canvas is alle te zien als een raster van pixels. Om te bepalen waar een figuur komt te staan moet je opgeven wat de x- en de y-positie van dit figuur is. Het coördinatenstelstel is als volgt opgebouwd:

In het voorbeeld hieronder kan je zien hoe het pixelsysteem werkt in P5.js. (druk op play)

Computers beginnen altijd met tellen bij 0. De eerst zichtbare pixels zijn dus x:0 en y:0. Bij een canvas van 300 bij 300 pixels is de linkerbovenhoek dus 0:0, de rechterbovenhoek 299:0, de linkeronderhoek 0:299 en de rechteronderhoek 299:299.