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 move_x = 3;

let move_y = 3;

let x,

  fixed_x = 0;

let y,

  fixed_y = 0;

let place_x = 0;

let place_y = 0;

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

  fill("black");

}

​

function modelReady() {

  console.log("Model ready!");

 }

function draw() {

  if (keyIsPressed == "1") {

    class Paddle {

      constructor(isLeft) {

        this.y = height / 2;

        this.w = 20;

        this.h = 100;

        this.ychange = 0;

​

        if (isLeft) {

          this.x = this.w;

        } else {

          this.x = width - this.w;

        }

      }

​

      update() {

        this.y += this.ychange;

        this.y = constrain(this.y, this.h / 2, height - this.h / 2);

      }

​

      move(steps) {

        this.ychange = steps;

      }

​

      show() {

        fill(255);

        rectMode(CENTER);

        rect(this.x, mouseY, this.w, this.h);

      }

    }

  } else if (keyIsPressed == "2") {

    var x2, y2;

    x = width / 2;

    y = height;

    stroke(50);

    fill(100);

    ellipse(x, y, 24, 24);

    x = x + random(-1, 1);

    y = y + random(-1, 1);

    if (y < 0 || y > height) {

      y = height;

    } else if (x < 0 || x > width) {

      x = width / 2;

    }

  } else if (keyIsPressed=="3") {

    image(video, x, y, mouseY, movedX);

  }

}

​

function draw() {

  drawBackground();

​

  imageMode(CENTER);

  image(video, place_x, place_y, 200, 200);

  place_x = random(width);

  place_y = random(height);

  if (frameCount%60==0){

  }

  // We can call both functions to draw all keypoints

  drawKeypoints();

  drawForeground();

}

function mousePressed() {

  if (mouseX == place_x && mouseY == place_y) {

    fixed_x = place_x;

    fixed_y = place_y;

    image(video, fixed_x, fixed_y, 200, 200);

  }

}

function drawForeground() {

  circle(mouseX, mouseY, 40);

}

function drawBackground() {

  background(255);

  fill("black");

  noStroke();

  rect(0, 30, canvas_w / 3, 10);

  rect(0, y + (canvas_h * 1.5) / 8, canvas_w, 10);

  rect(0, y + (canvas_h * 2.5) / 8, canvas_w, 10);

  rect(0, y + (canvas_h * 5.5) / 8, canvas_w, 10);

  rect(0, y + (canvas_h * 6.5) / 8, canvas_w, 10);

  rect(x + canvas_w / 3, 0, 10, canvas_h); //v

  rect(x + (canvas_w * 2) / 3, 0, 10, canvas_h); //v

  rect(canvas_w - 40, canvas_h / 3 - 5, 10, canvas_h / 3 + 20);

  rect(canvas_w - 10, canvas_h / 3 - 5, 10, canvas_h / 3 + 20);

  fill("red");

  rect(0, 0, canvas_w / 3, 30);

  fill("yellow");

  rect(canvas_w - 30, canvas_h / 3 - 5, 20, canvas_h / 3 + 20);

  if (x > width || x < 0) {

    move_x = move_x * -1;

  }

​

  if (y > height || y < 0) {

    move_y = move_y * -1;

  }

  if (millis() > 3 * 1000) {

    x = x + move_x;

    y = y + move_y;

  }

}

​

// 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_left, margin_top);

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

      circle(x, y, random(10, 20));

      pop();

    }

  }

}

​