Merge pull request #1062 from ml5js/posenet-examples

PoseNet examples

Author: joeyklee

examples/p5js/PoseNet/PoseNet_image_single/sketch.js

@@ -1,66 +1,41 @@
 let img;
 let poseNet;
-let poses = [];
 
-function setup() {
-  createCanvas(640, 360);
-
-  // create an image using the p5 dom library
-  // call modelReady() when it is loaded
-  img = createImg("data/runner.jpg", imageReady);
-  // set the image size to the size of the canvas
-  img.size(width, height);
-
-  img.hide(); // hide the image in the browser
-  frameRate(1); // set the frameRate to 1 since we don't need it to be running quickly in this case
+function preload() {
+  // load an image for pose detection
+  img = loadImage('data/runner.jpg');
 }
 
-// when the image is ready, then load up poseNet
-function imageReady() {
-  // set some options
-  const options = {
-    minConfidence: 0.1,
-    inputResolution: { width, height },
-  };
-
-  // assign poseNet
-  poseNet = ml5.poseNet(modelReady, options);
-  // This sets up an event that listens to 'pose' events
-  poseNet.on("pose", function(results) {
-    poses = results;
-  });
+function setup() {
+  createCanvas(640, 360);
+  image(img, 0, 0);
+  poseNet = ml5.poseNet(modelReady);
 }
 
 // when poseNet is ready, do the detection
 function modelReady() {
-  select("#status").html("Model Loaded");
-
+  select('#status').html('Model Loaded');
+  // If/When a pose is detected, poseNet.on('pose', ...) will be listening for the detection results 
+  poseNet.on('pose', function (poses) {
+    if (poses.length > 0) {
+      drawSkeleton(poses);
+      drawKeypoints(poses);
+    }
+  });
   // When the model is ready, run the singlePose() function...
-  // If/When a pose is detected, poseNet.on('pose', ...) will be listening for the detection results
-  // in the draw() loop, if there are any poses, then carry out the draw commands
   poseNet.singlePose(img);
 }
 
-// draw() will not show anything until poses are found
-function draw() {
-  if (poses.length > 0) {
-    image(img, 0, 0, width, height);
-    drawSkeleton(poses);
-    drawKeypoints(poses);
-    noLoop(); // stop looping when the poses are estimated
-  }
-}
-
 // The following comes from https://ml5js.org/docs/posenet-webcam
 // A function to draw ellipses over the detected keypoints
-function drawKeypoints() {
+function drawKeypoints(poses) {
   // Loop through all the poses detected
-  for (let i = 0; i < poses.length; i += 1) {
+  for (let i = 0; i < poses.length; i++) {
     // For each pose detected, loop through all the keypoints
-    const pose = poses[i].pose;
-    for (let j = 0; j < pose.keypoints.length; j += 1) {
+    let pose = poses[i].pose;
+    for (let j = 0; j < pose.keypoints.length; j++) {
       // A keypoint is an object describing a body part (like rightArm or leftShoulder)
-      const keypoint = pose.keypoints[j];
+      let keypoint = pose.keypoints[j];
       // Only draw an ellipse is the pose probability is bigger than 0.2
       if (keypoint.score > 0.2) {
         fill(255);
@@ -73,17 +48,17 @@ function drawKeypoints() {
 }
 
 // A function to draw the skeletons
-function drawSkeleton() {
+function drawSkeleton(poses) {
   // Loop through all the skeletons detected
-  for (let i = 0; i < poses.length; i += 1) {
-    const skeleton = poses[i].skeleton;
+  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 += 1) {
-      const partA = skeleton[j][0];
-      const partB = skeleton[j][1];
+    for (let j = 0; j < skeleton.length; j++) {
+      let partA = skeleton[j][0];
+      let partB = skeleton[j][1];
       stroke(255);
       strokeWeight(1);
       line(partA.position.x, partA.position.y, partB.position.x, partB.position.y);
     }
   }
-}
+}