let video;

let predictions = [];

let margin = 50;

let transparency =random(0,100);

​

function setup() {

  createCanvas(800, 600);

  video = createCapture(VIDEO);

  video.size(640, 480);

​

  facemesh = ml5.facemesh(video, 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();

  background("rgb(255,255,255)")

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  drawForeground()

  image(video, margin, margin, 640, 480);

  // We can call both functions to draw all keypoints

  drawKeypoints();

  drawBackground()

}

​

function drawForeground(){

}

​

function drawBackground(){

  circle(random(width),random(height), 50)

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

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

    const keypoints = predictions[i].scaledMesh;

​

    // Draw facial keypoints.

    for (let j = 0; j < keypoints.length; j += 1) {

      const [x, y] = keypoints[j];

      push()

      translate(margin,margin)

      fill(255,255,255,100);

      square(x, y, 10,2);

      pop()

    }

  }

}

​