let video;

let poseNet;

let currentPoses = [];

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.hide();

  // ml5js PoseNet

  poseNet = ml5.poseNet(video, onPoseNetModelReady);

​

  poseNet.on('pose', onPoseDetected);

  //frameRate(1);

}

​

function onPoseNetModelReady(){

  print("The PoseNet model is now ready...");

}

​

function onPoseDetected(poses){

  currentPoses = poses;

  //print(poses);

}

​

function draw() {

  background(220);

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

  // draw poses

  if(currentPoses.length > 0){

    const curPose = currentPoses[0];

    drawPose(curPose);

    drawNose(curPose);

    drawEyes(curPose);

  }

}

​

function drawNose(curPose){

  push();

  fill("red");

  noStroke();

  circle(curPose.pose.nose.x, curPose.pose.nose.y, 30);

  print(curPose.pose.nose);

  pop();

}

​

function drawEyes(curPose){

  push();

  fill("red");

  noStroke();

  circle(curPose.pose.nose.x, curPose.pose.nose.y, 30);

  print(curPose.pose.nose);

  pop();

}

​

​

function drawPose(curPose){

  const keypoints = curPose.pose.keypoints;

  for(let kpIndex = 0; kpIndex < keypoints.length; kpIndex++){

    const kp = keypoints[kpIndex];

    circle(kp.position.x, kp.position.y, 20);

  }

}

​