Zo, nu hebben we een canvas waarop we kunnen tekenen. Voordat je begint met tekenen moet je de computer kunnen vertellen WAAR de tekening moet komen op jouw canvas.
Daarvoor gebruiken we coördinaten.
Het scherm waarin we tekenen is een soort ruitjespapier (of een assenstelsel). Op elk kruispunt van lijnen staat een pixel. De plek van die pixel noemen we een coördinaat. Een coördinaat bestaat uit twee getallen die een locatie aangeven. Als je naar een coördinaat verwijst, doe je dat door 2 getallen tussen haakjes te zetten, bijvoorbeeld (0, 0). In p5.js en Processing heeft de pixel in de linker bovenhoek de coördinaten (0, 0).
- Het eerste getal geeft aan hoeveel pixels je naar rechts gaat: het x-coördinaat.
- Het tweede getal geeft aan hoeveel pixels je naar onder gaat: het y-coördinaat.
(Dit laatste is precies andersom dan bij wiskunde! Daar wordt y groter als je naar boven gaat.)
In het plaatje hieronder kun je de coördinaten van een zwarte pixel zien. Hij zit 4 stappen naar rechts, dus het x-coördinaat is 4. Hij zit 3 stappen naar beneden, dus het y-coördinaat is 3. De coördinaten zijn dus (4, 3).
In de volgende les gaan we een cirkel tekenen op de coördinaten die je zelf wilt!
