ml5js
diff --git a/‎examples/Handpose-p5-webcam/index.html‎ renamed to ‎examples/Handpose-keypoints/index.html‎ b/‎examples/Handpose-p5-webcam/index.html‎ renamed to ‎examples/Handpose-keypoints/index.html‎
diff --git a/‎examples/Handpose-p5-webcam/sketch.js‎ renamed to ‎examples/Handpose-keypoints/sketch.js‎ b/‎examples/Handpose-p5-webcam/sketch.js‎ renamed to ‎examples/Handpose-keypoints/sketch.js‎
diff --git a/‎examples/Handpose-parts/index.html‎
Lines changed: 14 additions & 0 deletions b/‎examples/Handpose-parts/index.html‎
Lines changed: 14 additions & 0 deletions
diff --git a/‎examples/Handpose-parts/sketch.js‎
Lines changed: 57 additions & 0 deletions b/‎examples/Handpose-parts/sketch.js‎
Lines changed: 57 additions & 0 deletions
diff --git a/‎examples/Handpose-p5-image/hand.jpg‎ renamed to ‎examples/Handpose-single-image/hand.jpg‎ b/‎examples/Handpose-p5-image/hand.jpg‎ renamed to ‎examples/Handpose-single-image/hand.jpg‎
diff --git a/‎examples/Handpose-p5-image/index.html‎ renamed to ‎examples/Handpose-single-image/index.html‎ b/‎examples/Handpose-p5-image/index.html‎ renamed to ‎examples/Handpose-single-image/index.html‎
diff --git a/‎examples/Handpose-p5-image/sketch.js‎ renamed to ‎examples/Handpose-single-image/sketch.js‎ b/‎examples/Handpose-p5-image/sketch.js‎ renamed to ‎examples/Handpose-single-image/sketch.js‎
diff --git a/‎examples/Handpose-p5-start-stop/index.html‎ renamed to ‎examples/Handpose-start-stop/index.html‎ b/‎examples/Handpose-p5-start-stop/index.html‎ renamed to ‎examples/Handpose-start-stop/index.html‎
diff --git a/‎examples/Handpose-p5-start-stop/sketch.js‎ renamed to ‎examples/Handpose-start-stop/sketch.js‎ b/‎examples/Handpose-p5-start-stop/sketch.js‎ renamed to ‎examples/Handpose-start-stop/sketch.js‎
@@ -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>ml5.js Handpose p5 Webcam Example</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="sketch.js"></script>
+  </body>
+</html>
@@ -0,0 +1,57 @@
+// Copyright (c) 2023 ml5
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+let handpose;
+let video;
+let hands = [];
+
+// A variable to track a pinch between thumb and index
+let pinch = 0;
+
+function preload() {
+  // Load the handpose model.
+  handpose = ml5.handpose();
+}
+
+function setup() {
+  createCanvas(640, 480);
+  // Create the webcam video and hide it
+  video = createCapture(VIDEO);
+  video.size(width, height);
+  video.hide();
+  // start detecting hands from the webcam video
+  handpose.detectStart(video, gotHands);
+}
+
+function draw() {
+  // Draw the webcam video
+  image(video, 0, 0, width, height);
+
+  // If there is at least one hand
+  if (hands.length > 0) {
+    // Find the index finger tip and thumb tip
+    let finger = hands[0].index_finger_tip;
+    let thumb = hands[0].thumb_tip;
+
+    // Draw circles at finger positions
+    let centerX = (finger.x + thumb.x) / 2;
+    let centerY = (finger.y + thumb.y) / 2;
+    // Calculate the pinch "distance" between finger and thumb
+    let pinch = dist(finger.x, finger.y, thumb.x, thumb.y);
+
+    // This circle's size is controlled by a "pinch" gesture
+    fill(0, 255, 0, 200);
+    stroke(0);
+    strokeWeight(2);
+    circle(centerX, centerY, pinch);
+  }
+}
+
+// Callback function for when handpose outputs data
+function gotHands(results) {
+  // save the output to the hands variable
+  hands = results;
+  console.log(hands);
+}