​

let angle = 0;

let video;

let poseNet;

let poses = [];

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  poseNet = ml5.poseNet(video);

  poseNet.on('pose', function(results) {

    poses = results;

  });

  // Hide the video element, and just show the canvas

  video.hide();

​

}

​

function draw() {

  image(video, 0, 0, width, height);

  drawEyeClass();

}

​

​

function drawEyeClass() {

  poses.forEach((e) => {

    const leftEye = e.pose.leftEye;

    const rightEye = e.pose.rightEye;

    const width = Math.abs(leftEye.x - rightEye.x) / 1.3

    eyeClass(leftEye, rightEye, width, width - 10)

  })

}

​

function eyeClass(leftEye, rightEye, width, height) {

  if (leftEye && rightEye) {

    happyFace(leftEye.x + 10, leftEye.y + 5, width / 3);

    happyFace(rightEye.x, rightEye.y + 5, width / 3);

    strokeWeight(4);

    fill(random(255), random(100,200), random(100), random(200,255));

    line(leftEye.x - width / 2 + 20,leftEye.y, rightEye.x + width / 2,rightEye.y);

    rect(leftEye.x - 20, leftEye.y - 20, width, height, 20);

    rect(rightEye.x - 30,rightEye.y - 20,width, width -10, 20);

  }

}

​

function happyFace (x, y, diam) {

      // Face

      fill(255, 255, 0);

      stroke(0);

      strokeWeight(2);

      ellipse(x, y, diam, diam);

​

      // Smile

      var startAng = .1*PI

      var endAng = .9*PI

      var smileDiam = .6*diam;

      arc(x, y, smileDiam, smileDiam, startAng, endAng);

​

      // Eyes

      var offset = .2*diam;

      var eyeDiam = .1*diam;

      fill(0);

      ellipse(x-offset, y-offset, eyeDiam, eyeDiam);

      ellipse(x+offset, y-offset, eyeDiam, eyeDiam);

}

​

function mousePressed() {

  console.log(poses);

}