Skip to content

P5 Vormen

P5.js biedt een eenvoudige manier om basisvormen te tekenen op een canvas. Deze vormen zijn de bouwstenen voor visuele creaties en grafische ontwerpen. Hier bespreken we enkele van de belangrijkste vormen die je in P5.js kunt gebruiken, samen met voorbeeldcode.

Cirkel (Ellipse)

Een cirkel of ellips wordt getekend met de functie ellipse(). Je geeft de x- en y-coördinaten van het midden, en de breedte en hoogte van de ellips op. De syntax is als volgt:

ellipse(x, y, w, h)
  • x: x-coördinaat van het midden
  • y: y-coördinaat van het midden
  • w: Breedte van de ellips
  • h: Hoogte van de ellips

createCanvas(400, 400);
background(220);
ellipse(200, 200, 100, 100); // Tekent een cirkel in het midden van het canvas

Rechthoek (Rectangle)

Een rechthoek wordt getekend met de functie rect(). Je geeft de x- en y-coördinaten van de linkerbovenhoek, en de breedte en hoogte op. De syntax is als volgt:

rect(x, y, w, h)
  • x: x-coördinaat van de linkerbovenhoek
  • y: y-coördinaat van de linkerbovenhoek
  • w: Breedte van de rechthoek
  • h: Hoogte van de rechthoek

createCanvas(400, 400);
background(220);
rect(150, 150, 100, 50); // Tekent een rechthoek op het canvas