let video;

let poses = [];

let connections;

​

function preload() {

  // Load the bodyPose model

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

}

​

function setup() {

  createCanvas(640, 480);

​

  // Create the video and hide it

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

  video.size(640, 480);

  video.hide();

​

  // Start detecting poses in the webcam video

  bodyPose.detectStart(video, gotPoses);

  connections = bodyPose.getSkeleton();

}

​

function draw() {

  background(220);

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

​

  // Draw the skeleton connections

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

  //     let pose = poses[i];

  //     for (let j = 0; j < connections.length; j++) {

  //       let pointAIndex = connections[j][0];

  //       let pointBIndex = connections[j][1];

  //       let pointA = pose.keypoints[pointAIndex];

  //       let pointB = pose.keypoints[pointBIndex];

  //       if (pointA.confidence > 0.1 && pointB.confidence > 0.1) {

  //         stroke(255, 0, 0);

  //         strokeWeight(2);

  //         line(pointA.x, pointA.y, pointB.x, pointB.y);

  //       }

  //     }

  //   }

​

  //   // Iterate through all the poses (keypoints)

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

    let pose = poses[i];

    // Iterate through all the keypoints for each pose

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

      let keypointA = pose.keypoints[9];

      let keypointB = pose.keypoints[10];

      // Only draw a circle if the keypoint's confidence is greater than 0.1

      if (keypointA.confidence > 0.1 && keypointB.confidence > 0.1) {

        fill(0, 255, 0);

        noStroke();

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

​

        fill(255, 0, 0);

        noStroke();

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

        let keypointDistance = dist(keypointA.x, keypointA.y, keypointB.x, keypointB.y);

        // if(keypointDistance < 100){

        //   stroke('magenta');

        //   line(keypointA.x, keypointA.y, keypointB.x, keypointB.y)

        // }

        noFill();

        stroke(255);

        circle(width/2, height/2, keypointDistance);

      }

    }

  }

}

​

// Callback function for when the model returns pose data

function gotPoses(results) {

  // Store the model's results in a global variable

  poses = results;

}

​