let video;

let predictions = [];

let canvas_w = 700;

let canvas_h = 600;

let video_w = 640;

let video_h = 480;

let margin_left = 30;

let margin_top = 50;

let clr = random()

let keypointsX = [];

​

var pic;

​

function rasterizeVideo(){

  let tiles = float(100);

  let tileSize = float(canvas_w/tiles) * 0.8;

  translate(margin_left + tileSize/2,margin_top + tileSize/2);

  let x, y;

  colorMode(HSB, 255);

  for (x = 0; x < tiles; x++) {

    for (y = 0; y < tiles; y++) {

      let c = video.get((x * tileSize), (y * tileSize));

      let brightnessVal = brightness(c);

      let size = map(brightnessVal, 0, 255, tileSize, 0);

      fill("green");

      noStroke();

      rect(x * tileSize, y * tileSize, size, size);

    }

  }

}

function preload() {

  monitor = loadImage("monitor.png");

  keyboard = loadImage("keyboard.png");

  mouse = loadImage("mouse.png");

  wall = loadImage("wall.png");

  city = loadImage("city.png");

  desk = loadImage("desk.png");

}

​

function setup() {

  createCanvas(canvas_w, canvas_h);

  video = createCapture(VIDEO);

  video.size(video_w, video_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("red");

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  drawBackground();

  fill("black");

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

    rasterizeVideo();

    resetMatrix();

    colorMode(RGB, 255);

    // We can call both functions to draw all keypoints

  drawKeypoints();

  drawForeground();

  paraWind = map(mouseX,0, width, -10, 10);

  paraWall = map(mouseX,0, width, -10, 10);

  paraComp = map(mouseX,0, width, -5, 5);

  paraKey  = map(mouseX,0, width, -15, 15);

​

//background window

    noStroke();

    fill("rgb(91,91,91)");

    translate(paraWind,0);

    rect (-20,0,220,800);

    rect (500,0,200,800);

    rect (0,0,800,100);

    rect (0,400,800,200);

  image(city,paraWind,0);

//background wall

    //noStroke();

   // fill("rgb(26,110,61)");

    translate(paraWall,0);

    rect (-20,0,220,800); //left

    rect (460,0,200,8); //right

    rect (0,0,800,100); //top

    rect (0,400,800,200); //bottom

  image(wall,paraWall,0);

//desk

    image(desk,paraKey,0);

//mouse 

  image(mouse,paraKey+40,-50);

//computer monitor   

 // fill("purple");

    //translate(paraComp,0);

  fill(0,0,0,120)

    rect (210,120,280,270); //monitor black mirror 

  image(monitor,paraComp,0);

​

//computer keyboard  

  //fill("rgb(80,0,80)");

    //translate(paraKey,0);

   // rect (180,500,400,120); //left

    image(keyboard,paraKey,0);

​

​

//mouse 

  //image(mouse,paraKey+2,0);

}

function drawForeground() {

  //circle(random(width), random(height), map(mouseY, 0, height, 0, 100));

//reflection

  stroke ("white");

  line(180, 120,380,420);

}

​

function drawBackground() {

  background("black");

  //rect(random(width), 0, map(mouseX, 0, width, 10, 100), height);

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

  let keypointsX = [];

​

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

      keypointsX[j] = x;

      push();

      translate(margin_left, margin_top);

      textAlign( CENTER, CENTER);

      //fill(random(255), 0, 0);

      if (key == "1") {

        if(j == 6) {

        imageMode(CENTER)

        image(pic, x, y);

        }

      }

      if (key == "2") {

      stroke(255, 20);

      line(x, y, 100, 0);

      line(x, y, 100, 200);

      line(x, y, 600, 200);

      line(x, y, 600, 0);

      line(x, y, 300, 0);

      line(x, y, 300, 450);

      }  

      if (key == "3") {3

      noStroke();

      fill("red")

      circle(x,y,5)

      }

      pop();

      rect(keypointsX,200,50,50);

    }

  }

}