Je P5js programma leeft straks op het web. Dat kan lokaal zijn, op je eigen computer, of online, als je je programma of website ergens host. P5js programma’s worden uitgevoerd in een canvas element binnen een html5 pagina. Het canvas element wordt binnen HTML5 gebruikt om (interactieve) tekeningen te laten zien.
meer info over het canvas element hier
Alles wat op het canvas wordt getoond wordt getekend door middel van functies. Functies zijn de basis bouwstenen van een p5js programma. Het gedrag van zo’n functie wordt gestuurd door zijn parameters. Bijna elk P5js programma bevat de createCanvas() functie. Deze functie accepteert twee parameters: de breedte, en de hoogte, in die specifieke volgorde. Wanneer ik dus een canvas wil maken van 200 pixels breed en 100 pixels hoog doe ik dat zo :
vergeet niet op play te drukken!
Opdracht: Pas het canvas hierboven aan, zodat het een vierkant wordt
Coordinaten
We weten nu dat een canvas een breedte en een hoogte heeft, en hoe we het aanmaken. Een leeg canvas is natuurlijk nutteloos en saai. Wanneer we straks vormen of lijnen op het canvas willen tekenen, moeten we exact kunnen aangeven waar deze vormen terecht moeten komen.
Het canvas gebruikt een coordinaten systeem om een positie aan te geven. Dit is vergelijkbaar met het grid dat in het spel zeeslag wordt gebruikt.
Het grote verschil is echter dat het grid van het canvas vele malen nauwkeuriger is. Het heeft namelijk enorm veel coordinaten. Om erachter te komen hoeveel precies kan je de hoogte x breedte doen. Bij een canvas van 100 op 200, zijn er dus 20000 coordinaten!.
Als we een bepaald coordinaat willen aanduiden, doen we dat door eerst de breedtecoordinaat te noemen, daarna de lengtecoordinaat. Met andere woorden: eerst de x-coordinaat, dan de y-coordinaat. In onderstaand voorbeeld, staan er punten geplaatst op 1,0 en op 4,5.
Let op: het coordinatensysteem van een canvas heet zijn middelpunt linksboven. Dit is anders dan bij wiskundepapier bijvoorbeeld, waar het nulpunt in het midden staat. Voor de x-as zorgt dit niet voor veel extra problemen. Bij de y-as kan dit wel voor verwarring zorgen. Namelijk hoe groter de y-coordinaat, des te lager iets in het canvas wordt getekend!
Het onderstaande live voorbeeld toont 2 punten in het canvas op coordinaten 20,5 en 5,20.
Pas de waarden eens aan, probeer ermee te spelen en kijk waar de punten terecht komen.