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 mount=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("green");

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  drawBackground();

​

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

  // We can call both functions to draw all keypoints

  if(key == "1"){

    drawKeypoints();

  }

 else if(key=="2"){

   drawMoveballs();

 }

  drawForeground();

}

​

function drawForeground() {

  if(mouseX<width/2)  {

    fill("blue")

  } 

 if(mouseX>=width/2)  {

    fill("pink")

  }  rect(random(width),random(height),map(mouseX,0,width,0,100),map(mouseY,0,height,100,200))

}

​

​

function drawBackground() {

  if(mouseX<width/2){

    background("#FC6B46");

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

  }

   if(mouseX>=width/2)  {

    background("#EEFF27");

     fill("green")

     circle(random(width),random(height),map(mouseY,0,height,20,150))

   }

}

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

      if(j==410){

        textSize(50);

        text("",x,y)

      }

pop();

      if(j==120){

        textSize(40);

        text("🎾",x,y)

      }

  }

}

}

​

function drawMoveballs(){

  for (i = 0;i<5;i=i+1){

  fill("white");

  let dia=mount+i*70

  circle(dia,0,60);

  circle(0,dia,60);

  circle(width-dia,height,60);

  circle(width,height-dia,60);

  mount=mount+1;

  }

}

​

​