update example and bug fix

ziyuan-linn · ziyuan-linn · commit 3c2dc8c7c749 · 2023-08-01T17:12:51.000-04:00
diff --git a/examples/PoseDetection/index.html b/examples/PoseDetection/index.html
@@ -8,7 +8,7 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <title>PoseNet example using p5.js</title>
+    <title>Pose detection example using p5.js</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
     <script src="../../dist/ml5.js"></script>
   </head>
diff --git a/examples/PoseDetection/sketch.js b/examples/PoseDetection/sketch.js
@@ -14,42 +14,41 @@ let poses = [];
 
 function setup() {
   createCanvas(640, 480);
+
+  // Create the video and hide it
   video = createCapture(VIDEO);
   video.size(width, height);
-
-  // Create a new poseNet method with a single detection
-  poseNet = ml5.poseDetection(video, modelReady);
-  // This sets up an event that fills the global variable "poses"
-  // with an array every time new poses are detected
-  poseNet.on("pose", function (results) {
-    poses = results;
-  });
-  // Hide the video element, and just show the canvas
   video.hide();
+
+  // Load the model and attach an event
+  poseDetector = ml5.poseDetection(video, modelReady);
+  poseDetector.on("pose", gotPoses);
 }
 
+// Event for pose detection
+function gotPoses(results) {
+  // Always save the latest output from the model in global variable "poses"
+  poses = results;
+}
+
+// Event for when model loaded
 function modelReady() {
-  console.log("Model Loaded!");
+  console.log("Model ready!");
 }
 
 function draw() {
+  console.log(poses);
+  // Draw the video
   image(video, 0, 0, width, height);
-  //console.log(poses);
-  // We can call both functions to draw all keypoints and the skeletons
-  drawKeypoints();
-  //drawSkeleton();
-}
 
-// A function to draw ellipses over the detected keypoints
-function drawKeypoints() {
-  // Loop through all the poses detected
+  // Draw all the tracked landmark points
+  // for each individual pose detected
   for (let i = 0; i < poses.length; i++) {
-    // For each pose detected, loop through all the keypoints
     let pose = poses[i];
+    // for each keypoint in the pose
     for (let j = 0; j < pose.keypoints.length; j++) {
-      // A keypoint is an object describing a body part (like rightArm or leftShoulder)
       let keypoint = pose.keypoints[j];
-      // Only draw an ellipse is the pose probability is bigger than 0.2
+      // Only draw an ellipse if the confidence score of the keypoint is bigger than 0.2
       if (keypoint.score > 0.2) {
         fill(255, 0, 0);
         noStroke();
@@ -58,23 +57,3 @@ function drawKeypoints() {
     }
   }
 }
-
-// A function to draw the skeletons
-function drawSkeleton() {
-  // Loop through all the skeletons detected
-  for (let i = 0; i < poses.length; i++) {
-    let skeleton = poses[i].skeleton;
-    // For every skeleton, loop through all body connections
-    for (let j = 0; j < skeleton.length; j++) {
-      let partA = skeleton[j][0];
-      let partB = skeleton[j][1];
-      stroke(255, 0, 0);
-      line(
-        partA.position.x,
-        partA.position.y,
-        partB.position.x,
-        partB.position.y
-      );
-    }
-  }
-}
diff --git a/src/PoseDetection/index.js b/src/PoseDetection/index.js
@@ -63,6 +63,7 @@ class PoseDetection extends EventEmitter {
       trackerType: this.config.trackerType ?? "boundingBox",
       trackerConfig: this.config.trackerConfig,
     };
+    // use multi-pose lightning model by default
     switch (this.config.modelType) {
       case "SINGLEPOSE_LIGHTNING":
         modelConfig.modelType =
@@ -71,7 +72,8 @@ class PoseDetection extends EventEmitter {
       case "SINGLEPOSE_THUNDER":
         modelConfig.modelType =
           bodyPoseDetection.movenet.modelType.SINGLEPOSE_THUNDER;
-      case "MULTIPOSE_LIGHTNING":
+        break;
+      default:
         modelConfig.modelType =
           bodyPoseDetection.movenet.modelType.MULTIPOSE_LIGHTNING;
     }
@@ -87,18 +89,7 @@ class PoseDetection extends EventEmitter {
     return this;
   }
 
-  //Add named keypoints to a MoveNet pose object
-  // mapParts(pose) {
-  //   const newPose = JSON.parse(JSON.stringify(pose));
-  //   newPose.keypoints.forEach((keypoint) => {
-  //     newPose[keypoint.part] = {
-  //       x: keypoint.position.x,
-  //       y: keypoint.position.y,
-  //       confidence: keypoint.score,
-  //     };
-  //   });
-  //   return newPose;
-  // }
+  //TODO: Add named keypoints to a MoveNet pose object
 
   /**
    * Given an image or video, returns an array of objects containing pose estimations
@@ -114,8 +105,7 @@ class PoseDetection extends EventEmitter {
     await mediaReady(image, false);
     const result = await this.model.estimatePoses(image);
 
-    //Add named keypoints to each pose object
-    //const result = poses.map((pose) => this.mapParts(pose));
+    // TODO: Add named keypoints to each pose object
 
     this.emit("pose", result);
 
