Skip to content

p5 onderdelen

Setup()

De setup() functie is een speciale functie in p5.js die slechts één keer wordt uitgevoerd wanneer je programma wordt gestart. Het is het eerste stukje code dat wordt uitgevoerd en wordt gebruikt om de initiële instellingen van je canvas en je p5.js-applicatie te configureren.

In de setup() functie kun je verschillende dingen instellen, zoals het creëren van een canvas met een specifieke breedte en hoogte, en het initialiseren van variabelen en objecten die je in je draw() functie wilt gebruiken.

Draw()

De draw() functie is een andere belangrijke functie in p5.js en wordt continu herhaald, afhankelijk van de frameRate(). Het wordt gebruikt om de dynamische elementen van je p5.js-applicatie te creëren, zoals animaties of interactieve elementen.

In de draw() functie plaats je de code die je wilt herhalen om de status van je canvas te wijzigen.

In het onderstaande voorbeeld wordt een cirkel getekend op basis van de horizontale positie van de muis, waardoor de cirkel horizontaal beweegt terwijl de muis wordt verplaatst.

Voorbeeld draw() 

```js
function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(220);
    // Gebruik constrain om de x-positie in het scherm te houden.
    let x = constrain(mouseX, 0, width);
    let y = height / 2;
    let diameter = 50;
    ellipse(x, y, diameter, diameter);
}
```
</div>
<div id="drawExample"></div>

Structuur

In de diagrammen hieronder kun je alle functies vinden die p5 automatisch aanroept.

In het onderdeel “Events” staan functies die worden aangeroepen door p5 als je browser een event van dat type ontvangt. Als je deze functies zelf implementeert, kun je de staat van je sketch veranderen wanneer een van deze “Events” wordt waargenomen.

Voor meer informatie over de functies kun je erop klikken en dan word je doorverwezen naar de documentatiepagina van p5.js.

    flowchart TB
    subgraph Loop
        direction TB
        subgraph Initialize
            direction LR
            preload("preload()") --> setup("setup()")
            click preload "https://p5js.org/reference/#/p5/preload" _blank
            click setup "https://p5js.org/reference/#/p5/setup" _blank
        end

        subgraph Draw
            direction LR
            draw("draw()") --> isLooping{"isLooping()"} -- true --> draw
            isLooping -- false --> isLooping
            click draw "https://p5js.org/reference/#/p5/draw" _blank
            click isLooping "https://p5js.org/reference/#/p5/isLooping" _blank
        end
        setup --> draw
    end

Events

Events zijn acties die je browser binnenkrijgt. In p5.js zijn er al een aantal vooraf gedefinieerd en verbonden aan functies. Als je één van deze functies zelf implementeert, kun je de staat van je sketch veranderen wanneer een van deze “Events” wordt waargenomen.

    flowchart TB
    subgraph Events
        direction TB
        subgraph Key
            direction LR
            keyPressed("keyPressed()")
            keyReleased("keyReleased()")
            keyTyped("keyTyped()")
            %% TODO: _blank does not work for new pages dont know why
            click keyPressed "https://p5js.org/reference/#/p5/keyPressed" _blank
            click keyReleased "https://p5js.org/reference/#/p5/keyReleased" _blank
            click keyTyped "https://p5js.org/reference/#/p5/keyTyped" _blank
        end    

        subgraph Mouse
            direction LR
            mouseMoved("mouseMoved()")
            mouseDragged("mouseDragged()")
            mousePressed("mousePressed()")
            mouseReleased("mouseReleased()")
            mouseClicked("mouseClicked()")
            doubleClicked("doubleClicked()")
            mouseWheel("mouseWheel()")
            click mouseMoved "https://p5js.org/reference/#/p5/mouseMoved" _blank
            click mouseDragged "https://p5js.org/reference/#/p5/mouseDragged" _blank
            click mousePressed "https://p5js.org/reference/#/p5/mousePressed" _blank
            click mouseReleased "https://p5js.org/reference/#/p5/mouseReleased" _blank
            click mouseClicked "https://p5js.org/reference/#/p5/mouseClicked" _blank
            click doubleClicked "https://p5js.org/reference/#/p5/doubleClicked" _blank
            click mouseWheel "https://p5js.org/reference/#/p5/mouseWheel" _blank
        end
    end

Samenvatting

  • De preload() functie wordt eenmaal uitgevoerd voordat de setup() functie wordt uitgevoerd om plaatjes en andere bestanden in te laden.
  • De setup() functie wordt eenmaal uitgevoerd bij het starten van je programma.
  • De draw() functie wordt continu herhaald om dynamische elementen in je p5.js-applicatie te creëren.
  • Events zijn acties die je browser binnenkrijgt. In p5.js zijn er al een aantal vooraf gedefinieerd en verbonden aan functies.

Door gebruik te maken van deze twee functies en Events, kun je statische en interactieve grafische applicaties maken met p5.js.

Meer leren

Gerelateerde onderwerpen