​

let video;

let bodyPose;

let poses = [];

​

function preload() {

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

}

​

function setup() {

  createCanvas(640, 480);

​

  // Create the video and hide it

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

  video.size(width, height);

  video.hide();

​

  // Start detecting poses in the webcam video

  bodyPose.detectStart(video, gotPoses);

}

​

// This "callback" function gets executed whenever

// a pose estimation has finished

function gotPoses(results) {

  // Save the result in the global "poses" variable

  // we'll use inside draw()

  poses = results;

  console.log(results);

}

​

function draw() {

  // Draw the webcam video

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

​

  // Draw all the tracked (landmark) points

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

    let pose = poses[i];

    // draw a bounding box

    stroke(0, 255, 0);

    noFill();

    rect(pose.box.xMin, pose.box.yMin, pose.box.width, pose.box.height);

    // draw a select keypoint

    //fill(255, 0, 0);

    //noStroke();

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

​

    // draw all keypoints

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

      let keypoint = pose.keypoints[j];

      if (keypoint.confidence > 0.1) {

        fill(0, 255, 0);

        noStroke();

        circle(keypoint.x, keypoint.y, 10);

      }

    }

  }

}

​