// https://learn.ml5js.org/#/reference/posenet

//

// For a version with full bounding box around pose:

// https://editor.p5js.org/jonfroehlich/sketches/6goDO_od5

//

// See:

// https://makeabilitylab.github.io/physcomp/communication/ml5js-serial.html

//

// Based loosely on the official ml5.js PoseNet example:

// https://github.com/ml5js/ml5-library/blob/main/examples/p5js/PoseNet/PoseNet_webcam/sketch.js

//

// As linked to from:

// https://ml5js.org/reference/api-PoseNet/

// 

// By Jon E. Froehlich

// http://makeabilitylab.io/

​

let video;

let poseNet;

let currentPoses = [];

​

​

function setup() {

  createCanvas(640, 480); // make this the same size as the video stream

  video = createCapture(VIDEO);

  //video.size(width, height);

  video.hide(); // Try commenting this out

​

  // Setup PoseNet. This can take a while, so we load it 

  // asynchronously (when it's done, it will call modelReady)

  poseNet = ml5.poseNet(video, onPoseNetModelReady); //call onModelReady when setup

  // PoseNet has one and only one event subscription called 'pose', which is

  // called when pose is detected

  poseNet.on('pose', onPoseDetected); // call onPoseDetected when pose detected

  //frameRate(1);

}

​

/**

 * Callback function called by ml5.js PoseNet when the PoseNet model is ready

 * Will be called once and only once

 */

function onPoseNetModelReady() {

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

}

​

/**

 * Callback function called by ml5.js PosetNet when a pose has been detected

 */

function onPoseDetected(poses) {

  currentPoses = poses;

}

​

function draw() {

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

​

  // Iterate through all poses and print them out

  if(currentPoses){

    for (let i = 0; i < currentPoses.length; i++) {

      drawPose(currentPoses[i], i);

    }

  }

}

​

function drawPose(pose, poseIndex){

  // Draw skeleton

  const skeletonColor = color(255, 255, 255, 128);

  stroke(skeletonColor); 

  strokeWeight(2);

  const skeleton = pose.skeleton;

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

    const partA = skeleton[j][0];

    const partB = skeleton[j][1];

    line(partA.position.x, partA.position.y, partB.position.x, partB.position.y);

  }

  // Draw keypoints with text

  const kpFillColor = color(255, 255, 255, 200);

  const kpOutlineColor = color(0, 0, 0, 150);

  strokeWeight(1);

​

  const keypoints = pose.pose.keypoints;

  const kpSize = 10;

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

    // A keypoint is an object describing a body part (like rightArm or leftShoulder)

    const kp = keypoints[j];

​

    fill(kpFillColor); 

    noStroke();

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

​

    noFill();

    stroke(kpOutlineColor);

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

  }

}