let video;

let predictions = [];

let ready = false;

​

let xDiff = 0, yDiff = 0;

let startX = 320, startY = 240;

let pointX = startX, pointY = startY;

​

//crop sketch to give objects space to move

let margin = 150;

​

//scrolling coefficients

let bDiv = 15, mDiv = 5, fDiv = 3;

​

function preload(){

  front = loadImage("front.png");

  middle = loadImage("middle.png");

  back = loadImage("background.png");

  waldo = loadImage("waldo.png");

}

​

function setup() {

  const cnvWidth = front.width - margin;

  const cnvHeight = front.height - margin;

  createCanvas(cnvWidth, cnvHeight);

  // get webcam input

  video = createCapture(VIDEO);

  video.size(width, height);

  //create facemesh  (taken from ml5 documentation)

  facemesh = ml5.facemesh(video, modelReady);

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

    predictions = results;

  });

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

  video.hide();

}

​

function modelReady() {

  console.log("Model ready!");

  ready = true;

}

​

function draw() {

  background(220);

  drawKeypoints();

  // check if movement isnt too big, write it to xDiff and yDiff

  if(abs(pointX - startX)/fDiv <= margin/2){

    xDiff = pointX - startX;

  }

​

  if(abs(pointY - startY)/fDiv <= margin/2){

    yDiff = pointY - startY;

  }

  //dsiplay images

  image(back, xDiff/bDiv - margin/2, -yDiff/bDiv - margin/2);

  image(waldo, 468 + xDiff/bDiv - margin/2, 185 -yDiff/bDiv - margin/2, 30, waldo.height * (30/waldo.width));

  image(middle, xDiff/mDiv - margin/2, -yDiff/mDiv - margin/2);

  image(front, xDiff/fDiv - margin/2, -yDiff/fDiv - margin/2);

}

​

// A function to save the coordinates of the point between the eyes

function drawKeypoints() {

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

    const keypoints = predictions[i].scaledMesh;

​

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

    pointX = x;

    pointY = y;

​

  }

}