simplify handpose example

Author: shiffman

examples/Handpose/script.js

@@ -4,43 +4,40 @@ let hands = [];
 
 function setup() {
   createCanvas(640, 480);
+
+  // Create the video and hide it
   video = createCapture(VIDEO);
   video.size(width, height);
+  video.hide();
 
-  const options = {};
-  handpose = ml5.handpose(video, options, modelReady);
-
-  // This sets up an event that fills the global variable "predictions"
-  // with an array every time new hand poses are detected
-  handpose.on("hand", (results) => {
-    hands = results;
-  });
+  // Load the model and attach an event
+  handpose = ml5.handpose(video, modelReady);
+  handpose.on("hand", gotHands);
+}
 
-  // Hide the video element, and just show the canvas
-  video.hide();
+// Event for hand detection
+function gotHands(results) {
+  // Always save the latest output from the model in global variable "hands"
+  hands = results;
 }
 
+// Event for when model loaded
 function modelReady() {
   console.log("Model ready!");
 }
 
 function draw() {
+  // Draw the video
   image(video, 0, 0, width, height);
 
-  // We can call the drawKeypoints function to draw all keypoints
-
-  drawKeypoints();
-}
-
-// A function to draw ellipses over the detected keypoints
-function drawKeypoints() {
-  for (let i = 0; i < hands.length; i += 1) {
-    const hand = hands[i];
-    for (let j = 0; j < hand.keypoints.length; j += 1) {
-      const keypoint = hand.keypoints[j];
+  // Draw all the tracked hand points
+  for (let i = 0; i < hands.length; i++) {
+    let hand = hands[i];
+    for (let j = 0; j < hand.keypoints.length; j++) {
+      let keypoint = hand.keypoints[j];
       fill(0, 255, 0);
       noStroke();
-      ellipse(keypoint.x, keypoint.y, 10, 10);
+      circle(keypoint.x, keypoint.y, 10);
     }
   }
 }