In dit hoofdstuk leren we vormen naar het canvas tekenen. Het gaat om een punt, een lijn, een rechthoek en een ellips.

punt

Wanneer we een punt willen tekenen, doen we dat door het engelse woord “point();” neer te zetten (zonder hoofdletter) en vervolgens tussen haakjes de x en de y coördinaat, in die volgorde. Na elke lijn code komt een ; om de regel af te sluiten.

point(x,y);

Kan je het punt, door de code aan te passen, op de horizontale as naar rechts verschuiven? En verticaal naar boven?

Lijn

Een lijn bestaat uit 2 punten. Door het Engelse woord voor lijn (line();) te gebruiken, en vervolgens tussen de haken de coordinaten van 2 punten te plaatsen (in de volgorde x1, y1, x2, y2) maken we een lijn!

line(x1,y1,x2,y2);

Maak een diagonale lijn die omhoog helt.

Rechthoek

Om een rechthoek te tekenen naar het canvas beschikken we over een aantal opties. Standaard hanteert p5js de volgende: Wanneer we rect(); invoeren (afkorting van het Engelse rectangle), verwacht p5js dat er tussen de haken 4 getallen komen. De eerste 2 geven het coördinaat aan van de linkerbovenhoek van de rechthoek. De volgende 2 getallen bepalen de breedte en de hoogte van de rechthoek. Dat wil zeggen dat de volledige regel :

rect(x,y,breedte,hoogte);

wordt.

Kan je een vierkant maken ?

rectMode();

P5js biedt naast de standaard modus om een rechthoek te tekenen ook nog andere modi aan. Die kunnen we benutten als we VOORDAT we een rechthoek tekenen, de functie rectMode(); aan te roepen. Tussen de haken van deze functie geven we dan één van de modi aan die we willen gebruiken. De opties zijn CENTER, CORNERS en CORNER. CORNER is de default modus, die automatisch wordt gebruikt als rectMode niet wordt aangeroepen.

rectMode(CENTER);

rectMode(CORNERS);

de CORNERS modus aanvaard ook 4 getallen. Bij deze modus staan deze getallen voor de coordinaten van 2 punten. 1 punkt links bovenaan, en 1 punt rechts onderaan.

Ellips

Voor het tekenen van een ellips gelden eigenlijk dezelfde regels als voor een rechthoek. de functie ellipse(); accepteert 4 getallen. De twee eerste getallen vormen de coordinaat vanaf waar de cirkel wordt getekend, de laatste twee getallen staan voor de breedte en de hoogte van de ellips. De volledite code om een ellips te tekenen wordt dan:

ellipse(x,y,breedte,hoogte);

Er is wel één groot verschil. De standaar modus bij een ellipse is CENTER en niet CORNER. Dat wil zeggen dat als je geen ellipseMode(); aanroept, dat een cirkel altijd vanuit het centrum wordt getekend.

Uiteraard is het veranderen van modus bij een ellipse niet rectMode(); ,maar doen we dit aan de hand van de funcite ellipseMode(); Deze functie accepteert dezelfde waarden als rectMode(); dat wil zeggen: CORNER, CORNERS en CENTER.

 

Overzicht

Kleuren >