P5.js: Een fototoestel maken

Starten met P5.js

Bekijk zeker eerst de vorige les over P5.js. Je kan een nieuwe lege HTML-pagina maken en daarin de onderstaande code plakken.  Je merkt dat het P5-framework is toegevoegd in de <head>-sectie van het document:

<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>

De startfuncties toevoegen

Voeg de onderstaande code toe tussen <body> en </body>. 

<script>
var camera;
var capture;

function setup(){
     camera = createCanvas(400, 300);
     background(0);
}
function draw(){
}
</script>

De camera activeren

Vervolgens vragen we aan de browser of we de camera mogen gebruiken. Als de gebruiker de toestemming geeft, kan je het camerabeeld (van de webcam) tonen in de pagina.

<script>
var camera;
var capture;

function setup(){
     camera = createCanvas(400, 300);
     background(0);
     capture = createCapture(VIDEO);
     capture.size(400, 300);
     capture.hide();
}
function draw(){
     image(capture, 0, 0, 400, 300);
}
</script>

De foto van de camera bewaren

Net zoals in het vorige voorbeeld, kunnen we ook hier het camerabeeld bewaren. 

function keyPressed(e){
   if(e.key=="s"){
      saveCanvas("mijnfoto", "jpg");
   }
}
Demo: https://www.leerschool.be/api/examples/film.html
Volgende pagina