Merge pull request #15 from ml5js/model-handpose

model handpose
ml5js · Jul 12, 2023 · b751612 · b751612
2 parents 9365cd9 + 5259fa0
commit b751612
Show file tree

Hide file tree

Showing 7 changed files with 726 additions and 414 deletions.
diff --git a/examples/Handpose/index.html b/examples/Handpose/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
+    <script src="../../dist/ml5.js"></script>
+  </head>
+  <body>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/examples/Handpose/script.js b/examples/Handpose/script.js
@@ -0,0 +1,46 @@
+let handpose;
+let video;
+let hands = [];
+
+function setup() {
+  createCanvas(640, 480);
+  video = createCapture(VIDEO);
+  video.size(width, height);
+
+  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;
+  });
+
+  // Hide the video element, and just show the canvas
+  video.hide();
+}
+
+function modelReady() {
+  console.log("Model ready!");
+}
+
+function draw() {
+  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];
+      fill(0, 255, 0);
+      noStroke();
+      ellipse(keypoint.x, keypoint.y, 10, 10);
+    }
+  }
+}