poseNet single image function

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);
  }
  }
-}
+}