let video;

let predictions = [];

​

const options = {

  output_face_blendshapes: true,

};

​

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  facemesh = ml5.facemesh(video, options, modelReady);

​

  // This sets up an event that fills the global variable "predictions"

  // with an array every time new predictions are made

  facemesh.on("predict", (results) => {

    predictions = results;

  });

​

  // Hide the video element, and just show the canvas

  video.hide();

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  console.log(predictions);

  push();

  translate(width, 0);

  scale(-1, 1);

  image(video, 0, 0, width, height);

    // We can call both functions to draw all keypoints

  if( predictions.length > 0) {

  drawKeypoints();

  //console.log(predictions);

   }

  pop();

​

​

}

​

​

​

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

  if (predictions.length >0) {

  for (let i = 0; i < predictions.length; i += 1) {

    const prediction = predictions[i];

    let boxX = prediction.boundingBox.topLeft[i][0];

    let boxY = prediction.boundingBox.topLeft[i][1];

    let boxBotX = prediction.boundingBox.bottomRight[i][0];

    let boxBotY =prediction.boundingBox.bottomRight[i][1];

    rect(boxX, boxY, boxBotX- boxX, boxBotY - boxY);

    circle(boxX +200, boxY +30, 50);

  }

  }

}

​

​

​

​