​

let video;

let mask;

let bodyPose;

let connections;

​

let poses = [];

​

function preload() { 

  bodyPose = ml5.bodyPose("MoveNet", { flipped: true });

  mask = loadImage('mask.gif');

}

​

function gotPoses(results) {

  poses = results;

}

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO, { flipped: true });

  video.hide();

  bodyPose.detectStart(video, gotPoses);

}

​

function draw() {

  imageMode(CORNER);

  image(video, 0, 0);

​

  if (poses.length > 0) {

    let pose = poses[0];

    drawPoints(pose);

  }

}

​

function drawPoints(pose){

​

​

  fill(236, 1, 90);

  noStroke();

  circle(pose.nose.x, pose.nose.y, 20);

​

  let d = dist(pose.left_eye.x, pose.left_eye.y,

               pose.right_eye.x, pose.right_eye.y);

  push();

    imageMode(CENTER);

    translate(pose.nose.x, pose.nose.y );

    scale(d/140);

    image(mask,0,-d*2);

  pop();

​

  fill("blue");

  noStroke();

  circle(pose.left_eye.x, pose.left_eye.y, 50);

  fill("green");

  noStroke();

  circle(pose.right_eye.x, pose.right_eye.y, 50);

​

}