Merge pull request #21 from ml5js/handpose-example

ziyuan-linn · web-flow · commit abcc23cd55bc · 2023-08-03T16:32:16.000-04:00
Simplify Handpose Example
diff --git a/examples/Handpose/index.html b/examples/Handpose/index.html
@@ -9,6 +9,6 @@
     <script src="../../dist/ml5.js"></script>
   </head>
   <body>
-    <script src="script.js"></script>
+    <script src="sketch.js"></script>
   </body>
 </html>
diff --git a/examples/Handpose/script.js b/examples/Handpose/script.js
diff --git a/examples/Handpose/sketch.js b/examples/Handpose/sketch.js
@@ -0,0 +1,43 @@
+let handpose;
+let video;
+let hands = [];
+
+function setup() {
+  createCanvas(640, 480);
+
+  // Create the video and hide it
+  video = createCapture(VIDEO);
+  video.size(width, height);
+  video.hide();
+
+  // Load the model and attach an event
+  handpose = ml5.handpose(video, modelReady);
+  handpose.on("hand", gotHands);
+}
+
+// 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);
+
+  // 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();
+      circle(keypoint.x, keypoint.y, 10);
+    }
+  }
+}
