P5.js: een tekenprogramma

P5.js integreren in je pagina

Je kan P5.js eenvoudig linken aan je eigen webpagina's, door de onderstaande regel te plakken, ergens tussen <head> en </head>.

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>    

Of je start met een volledig nieuw HTML-sjabloon. In het onderstaande sjabloon zie je de beste plaats voor het linken van het script. 

<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>
</head>
<body>

</body>
</html>

P5: startfuncties

De eigenlijke programmeercode achter P5.js blijft verborgen. Je moet zelfs niet weten hoe het precies allemaal werkt. Net zoals we zeiden: de eigenlijke code zit onder de motorkap. Maar als de webpagina zelf jouw dashboard is, kan je nu zelf bepalen wat P5.js in jouw pagina moet doen.  Tussen <body> en </body> voeg je nu je eigen code toe om de functionaliteit te activeren. 

Standaard activeer je P5.js met 2 functies:

  1. setup(): hoe groot is het tekengebied, achtergrondkleur enz.
  2. draw(): wat wil je doen/tekenen in het tekengebied
<script>
function setup(){

}

function draw(){

}
</script>

In de setupfunctie stellen we vervolgens de grootte en de achtergrondkleur in. 

  1. background: daar tussen schrijf je de waardes voor R, G en B (variërend tussen 0 en 255)
  2. size: de breedte en de hoogte in pixels.
<script>
function setup(){
    background(255,255,255);
    size(400,300);
}

function draw(){
    
}
</script>

Een tekenprogramma maken

In de draw-functie kunnen we nu bepalen wat er moet gebeuren. Ik wil kunnen tekenen met de muis. We tekenen een cirkeltje van 20 bij 20 pixels op de plaats waar de muis zicht bevindt (mouseX en mouseY). We vullen de tekening met "zwart" (fill(0). Immers: geen kleur = 0). We geven de cirkel geen rand (noStroke()). 

<script>
function setup(){
    background(255,255,255);
    size(400,300);
}

function draw(){
    fill(0);
    noStroke();
    ellipse(mouseX, mouseY, 20, 20);
}
</script>

Het zou echter handig zijn indien het bolletje enkel wordt getekend als we de muis ingedrukt houden. 

<script>
function setup(){
    background(255,255,255);
    size(400,300);
}

function draw(){
    if(mouseIsPressed){
        fill(0);
        noStroke();
        ellipse(mouseX, mouseY, 20, 20);
    }
}
</script>

Wissen en bewaren

We voorzien ook een manier om de tekening te wissen en om de tekening te bewaren. Hiervoor voegen we een derde functie toe tussen <script> en </script>.  We willen de onderstaande mogelijkheid:

  • Als iemand op "d" drukt op het toetsenbord, dan wissen we de tekening.
  • Als iemand op "s" drukt op het toetsenbord, dan bewaren we de gemaakte tekening.
function keyPressed(e){
   if(e.key == "s"){
      saveCanvas("mijntekening", "jpg");
   }

   if(e.key == "d"){
      background(255,255,255);
   }
}
Demo: https://www.leerschool.be/api/examples/teken.html
Volgende pagina