ml5js
diff --git a/‎examples/Handpose/index.html‎
Lines changed: 14 additions & 0 deletions b/‎examples/Handpose/index.html‎
Lines changed: 14 additions & 0 deletions
diff --git a/‎examples/Handpose/script.js‎
Lines changed: 45 additions & 0 deletions b/‎examples/Handpose/script.js‎
Lines changed: 45 additions & 0 deletions
@@ -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>
@@ -0,0 +1,45 @@
+let handpose;
+let video;
+let hands = [];
+
+function setup() {
+  createCanvas(640, 480);
+  video = createCapture(VIDEO);
+  video.size(width, height);
+
+  const options = { maxHands: 2 };
+  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 both functions to draw all keypoints and the skeletons
+  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);
+    }
+  }
+}