let video;

let predictions = [];

var eyepoint = 168;

​

var pointX;

var pointY;

var centervaluex = 320;

var centervaluey = 240;

var xDiff;

var yDiff;

​

var background;

var front;

var middle;

​

function preload(){

   background = loadImage("background.png");

   middle = loadImage("middle.png");

  front = loadImage("front.png");

}

​

function setup() {

  createCanvas(800, 794);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  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();

  stroke(255);

  strokeWeight(3);

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

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

  image(background, xDiff/15, yDiff/15);

  image(middle, xDiff/10, yDiff/10);

  image(front, xDiff/5, yDiff/5);

​

  // We can call both functions to draw all keypoints

  drawKeypoints();

  console.log(pointX, pointY);

}

​

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

       [pointX, pointY] = keypoints[eyepoint];

​

      // point(pointX,pointY);

      xDiff = pointX - centervaluex;

      yDiff = pointY - centervaluey; 

    if(xDiff > 800){

      xDiff = 800;

    }

    if(xDiff < 0){

      xDiff = 0;

    }

    if(yDiff > 794){

      yDiff = 794;

    }

    if(yDiff < 0){

      yDiff = 0;

    }

    }

}

​