let video;
let detector;
let detections = [];
 
function setup() {
  createCanvas(640, 480);
  //de videoReady callback zorgt er voor dat het model wordt geladen nadat de video is gestart
  video = createCapture(VIDEO, videoReady);
  video.size(640, 480);
  video.hide();
}
//nadat het model is geladen kan het detectiewerk beginnen in modelReady
function videoReady() {
  detector = ml5.objectDetector('cocossd', modelReady);
}
//de object detector wordt gestart waarna de gotDetections lus wordt gestart
function modelReady() {
  detector.detect(video, gotDetections);
}
//In deze functie geeft de de callback "result" de gedetecteerde data aan het array "detections"
function gotDetections(error, result) {
  if (error) {
    console.error(error);
  }
  detections = result;
  detector.detect(video, gotDetections);
  //console.log(result); //uitgeschakeld ivm de snelheid
}
 
function modelReady() {
  detector.detect(video, gotDetections);
}
 
function draw() {
  image(video, 0, 0);
//De schets maakt, in alle cellen van het array, gebruik van x, y, width, height en label
//confidence wordt niet gebruikt maar kan eenvoudig als text worden toegevoegd
  for (let i = 0; i < detections.length; i += 1) {
    const object = detections[i];
    stroke(0, 255, 0);
    strokeWeight(4);
    noFill();
    rect(object.x, object.y, object.width, object.height);
    noStroke();
    fill(255);
    textSize(24);
    text(object.label, object.x + 10, object.y + 24);
  }
}