let video;

let predictions = [];

let canvas_w = 800;

let canvas_h = 600;

let video_w = 640;

let video_h = 480;

let margin_left = 50;

let margin_top = 50;

let dia = map(mouseX, 0, width, 20,100)

​

function setup() {

  createCanvas(canvas_w, canvas_h);

  video = createCapture(VIDEO);

  video.size(canvas_w, canvas_h);

​

  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("#19B1B121");

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  drawBackground();

  let dia = map(mouseX, 0, video_w, 5, 10)

  push();

  translate(canvas_w/2 - 75, canvas_h/2 - 60);

  rotate(dia)

  shearX(dia)

  imageMode(CENTER)

  image(video, margin_left, margin_top, video_w, video_h);

  // We can call both functions to draw all keypoints

  pop();

  drawKeypoints();

  drawForeground();

}

​

function drawForeground() {

}

​

function drawBackground() {

  background("rgb(134,205,167)");

  rect(width+200, 0, 0, height);

}

​

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

    let dia = map(mouseY, 0, video_w, 10, 15)

    // Draw facial keypoints.

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

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

      push();

      translate(margin_left, margin_top);

      rotate(dia)

      shearX(dia)

      fill("white");

      noStroke()

      circle(x+200, y-200, random(2, 4));

      circle(x-200, y+200, random(2, 4));

      circle(x, y, random(4, 2));

      pop();

    }

  }

}

​