let video;

let predictions = [];

let margin = 50;

let dX=0,dY=0;//move the mask

let ease=1;

​

function mousePressed()

{

  ease=-ease;

}

​

function setup() 

{

  createCanvas(800, 600);

  video = createCapture(VIDEO);

  video.size(640,480);

​

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

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() 

{

  drawBackground()

  image(video,margin,margin, 640,480);

  // We can call both functions to draw all keypoints

  drawKeypoints();

  drawForeground();

}

​

function drawForeground()

{

  cursor(CROSS);

​

  let r=map((abs(dX)+abs(dY))/2,0,75,800,0)

  //get red value when not at ease

  let dRed=map(r,0,800,127,0)

  if(ease==1)//ease foreground

  {

    fill(245,222,179,130);

    noStroke();

    circle(mouseX,mouseY,r/2);

  }

  if(ease==-1)//unease foreground

  {

    fill(125+dRed,0,0,2*dRed);

    circle(0,0,r);

    circle(width,0,r);

    circle(0,height,r);

    circle(width,height,r);

  }

}

​

function drawBackground()

{

  //dynamic size of the background dots

  let sizeX=abs(dX);

  let sizeY=abs(dY);

  let size=(sizeX+sizeY)/2;

  if(ease==1)

  {

    background("white");

    let dGreen=map(size,0,75,0,110);

    fill(61,145+dGreen,64,145+dGreen)

    for(i=0;i<500;++i)

    {  

      circle(random(width) , random(height), 85-size);

    }

  }

  if(ease==-1)

  {

    background("black");

    let dRed=map(size,0,75,0,127)

    fill(125+dRed,0,0,2*dRed);

    for(i=0;i<500;++i)

    {  

      circle(random(width) , random(height), 10+size);

    }

  }

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() 

{

  //createCanvas(width,height);

  //background(125,23,24,1);

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

  {

    const keypoints = predictions[i].scaledMesh;

    /*

    //get middle point of the facemesh

    let middlePointX=0;

    let middlePointY=0;

    for (let j = 0; j < keypoints.length; j += 1)

    {

      middlePointX+=keypoints[i].x;

      middlePointY+=keypoints[i].y;

    }

    middlePointX=middlePointX/keypoints.length;

    middlePointY=middlePointY/keypoints.length;

    //print(middlePointX,middlePointY)

    let sizeX,sizeY=0;

    if(mouseX<=middlePointX)

    {

      sizeX=map(mouseX,0,middlePointX,20,0);

    }

    else

    {

      sizeX=map(mouseX,middlePointX,width,0,20);

    }

    if(mouseY<=middlePointY)

    {

      sizeY=map(mouseY,0,middlePointY,20,0);

    }

    else

    {

      sizeY=map(mouseY,middlePointY,height,0,20);

    }

    */

    // Draw facial keypoints.

    for (let j = 0; j < keypoints.length; j += 1) 

    {

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

      push()

      translate(margin,margin)

      //move the mask by mouse

      if(mouseX<x)

      {

        dX=map(mouseX,0,x,-75,0);

      }

      else

      {

        dX=map(mouseX,x,width,0,75);

      }

      if(mouseY<y)

      {

        dY=map(mouseY,0,y,-75,0);

      }

      else

      {

        dY=map(mouseY,y,height,0,75);

      }

      if(ease==1)//face at ease

      {

        fill(176,224,230,120);

        noStroke();

        circle(x,y,10);

      }

      if(ease==-1)//face not ease

      {

        fill(random(255));

        stroke(0);

        square(x+dX , y+dY , 10);

      }

      pop()

    }

  }

}

​

​

​

​

​

​

​

​

​

​

​