Vormen in p5¶

Leeswijzer

Om dit artikel goed te kunnen begrijpen, is het handig om eerst het artikel over het coördinatenstelsel in p5 door te nemen.

In p5 is het gebruik van verschillende vormen handig om onderscheid te kunnen maken tussen objecten in je applicaties. Deze vormen kunnen op een intuïtieve en eenvoudige manier worden getekend. In dit artikel worden de basisvormen in p5 behandeld, samen met voorbeelden en een oefening om je vaardigheden te testen.

Basisvormen in p5¶

In p5 zijn er verschillende basisvormen beschikbaar om te tekenen. Hieronder vind je een overzicht van deze vormen:

Vorm	Getekend vanuit	Code	Verander modus functie
Vierkant	Linkerbovenhoek	square(x, y, lengte van zijde)	rectMode(modus)
Rechthoek	Linkerbovenhoek	rect(x, y, breedte, hoogte)	rectMode(modus)
Cirkel	Midden	circle(x, y, diameter)	ellipseMode(modus)
Ovaal	Midden	ellipse(x, y, breedte, hoogte)	ellipseMode(modus)

Complexere vormen¶

Naast de basisvormen biedt p5.js ook de mogelijkheid om complexere vormen te maken met behulp van de beginShape() en endShape() functies. Met deze functies kun je complexe veelhoeken maken door de positie van de punten op te geven. Hierdoor kun je vormen maken die niet eenvoudig kunnen worden gemaakt met alleen de basisvormen.

Om een complexe vorm te maken, gebruik je beginShape() om aan te geven dat je een nieuwe veelhoek wilt beginnen. Vervolgens kun je met de functie vertex() de positie van de punten toevoegen die de vorm definiëren. Je kunt zoveel punten toevoegen als nodig is om de gewenste vorm te maken. Ten slotte sluit je de vorm af met endShape(), waarmee de vorm wordt voltooid en getekend. Als je in de endShape() functie de modus “CLOSE” toevoegt, wordt er automatisch een lijn getekend van het laatste punt naar het eerste punt, waardoor de vorm gesloten wordt.

Hier is een voorbeeld van het maken van een driehoek met de punten: (25, 25), (100, 175), (175, 25) in p5.js:

Voorbeeld

function setup() {
    createCanvas(200, 200);
}

function draw() {
    background(220);

    // Begin aangepaste vorm
    beginShape();
    vertex(25, 25); // Eerste punt
    vertex(100, 175); // Tweede punt
    vertex(175, 25); // Derde punt
    endShape(CLOSE); // Sluit de vorm af
}

Oefening

Hierboven een aantal gekleurde vormen zichtbaar.

Positie
Breedte
Hoogte
Code die uitgevoerd moet worden

Schrijf de code voor het maken van een hexagon (zeshoek). Maak gebruik van beginShape() en endShape(CLOSE).

Let op: Noteer al je antwoorden in een markdown-document.

Bronnen¶

Meer leren¶

Bron	Doel
P5 documentatie over coördinaten en vormen	Coördinaten en vormen begrijpen