From cbde5ccaa17a8be6baa6b6d0d49b554846115fcf Mon Sep 17 00:00:00 2001 From: carban Date: Fri, 11 Jul 2025 11:05:55 -0500 Subject: [PATCH 1/4] adding folder with init files --- examples/handPose-finger-detection/index.html | 16 ++++++++++++++++ examples/handPose-finger-detection/sketch.js | 0 2 files changed, 16 insertions(+) create mode 100644 examples/handPose-finger-detection/index.html create mode 100644 examples/handPose-finger-detection/sketch.js diff --git a/examples/handPose-finger-detection/index.html b/examples/handPose-finger-detection/index.html new file mode 100644 index 00000000..3028ffe9 --- /dev/null +++ b/examples/handPose-finger-detection/index.html @@ -0,0 +1,16 @@ + + + + + + + + + + + +
+
+ + + diff --git a/examples/handPose-finger-detection/sketch.js b/examples/handPose-finger-detection/sketch.js new file mode 100644 index 00000000..e69de29b From 29c4d7adaf03e05afb8959edf251eefdca90fc7b Mon Sep 17 00:00:00 2001 From: carban Date: Fri, 11 Jul 2025 15:34:25 -0500 Subject: [PATCH 2/4] adding fingers detection sketch --- examples/handPose-finger-detection/sketch.js | 56 ++++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/examples/handPose-finger-detection/sketch.js b/examples/handPose-finger-detection/sketch.js index e69de29b..89af9191 100644 --- a/examples/handPose-finger-detection/sketch.js +++ b/examples/handPose-finger-detection/sketch.js @@ -0,0 +1,56 @@ +// Fingers Detection with ml5.js + +let video; +let handPose; +let hands = []; + +function preload() { + handPose = ml5.handPose({ flipped: true }); +} + +function gotHands(results) { + hands = results; +} + +function setup() { + createCanvas(640, 480); + video = createCapture(VIDEO, { flipped: true }); + video.hide(); + // Start detecting hands + handPose.detectStart(video, gotHands); +} + +function draw() { + image(video, 0, 0); + // Ensure at least one hand is detected + if (hands.length > 0) { + for (let hand of hands) { + if (hand.confidence > 0.2) { + let thumb_finger = hand.thumb_tip; + let index_finger = hand.index_finger_tip; + let middle_finger = hand.middle_finger_tip; + let ring_finger = hand.ring_finger_tip; + let pinky_finger = hand.pinky_finger_tip; + let r = 20; + let offset = 15; + // Painting elements + noStroke(); + fill(255); + circle(thumb_finger.x, thumb_finger.y, r); + text("Thumb", thumb_finger.x-offset, thumb_finger.y-offset); + fill(255, 0, 0); + circle(index_finger.x, index_finger.y, r); + text("Index", index_finger.x-offset, index_finger.y-offset); + fill(0, 255, 0); + circle(middle_finger.x, middle_finger.y, r); + text("Middle", middle_finger.x-offset, middle_finger.y-offset); + fill(0, 0, 255); + circle(ring_finger.x, ring_finger.y, r); + text("Ring", ring_finger.x-offset, ring_finger.y-offset); + fill(255, 0, 255); + circle(pinky_finger.x, pinky_finger.y, r); + text("Pinky", pinky_finger.x-offset, pinky_finger.y-offset); + } + } + } +} From c7feb3128be78aac9c000a9526b9cce7fb8a306a Mon Sep 17 00:00:00 2001 From: carban Date: Fri, 11 Jul 2025 15:36:56 -0500 Subject: [PATCH 3/4] Adding handPose-fingers-detection link to README.md --- examples/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/README.md b/examples/README.md index 696ee277..c0a4e92e 100644 --- a/examples/README.md +++ b/examples/README.md @@ -28,6 +28,7 @@ Jump right into experimenting with ml5.js — no local setup needed. Browse and * [handPose-parts](https://editor.p5js.org/ml5/sketches/DNbSiIYKB) * [handPose-single-image](https://editor.p5js.org/ml5/sketches/8VK_l3XwE) * [handPose-skeletal-connections](https://editor.p5js.org/ml5/sketches/fnboooD-K) +* [handPose-fingers-detection](https://editor.p5js.org/carban/sketches/Woyb6Lozf) * [imageClassifier-single-image](https://editor.p5js.org/ml5/sketches/pjPr6XmPY) * [imageClassifier-teachable-machine](https://editor.p5js.org/ml5/sketches/VvGXajA36) * [imageClassifier-webcam](https://editor.p5js.org/ml5/sketches/K0sjaEO19) From 83681501a60cabf4e45695727484e3cbe2753562 Mon Sep 17 00:00:00 2001 From: carban Date: Fri, 11 Jul 2025 15:38:12 -0500 Subject: [PATCH 4/4] Renaming folder to handPose-fingers-detection --- .../index.html | 0 .../sketch.js | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename examples/{handPose-finger-detection => handPose-fingers-detection}/index.html (100%) rename examples/{handPose-finger-detection => handPose-fingers-detection}/sketch.js (100%) diff --git a/examples/handPose-finger-detection/index.html b/examples/handPose-fingers-detection/index.html similarity index 100% rename from examples/handPose-finger-detection/index.html rename to examples/handPose-fingers-detection/index.html diff --git a/examples/handPose-finger-detection/sketch.js b/examples/handPose-fingers-detection/sketch.js similarity index 100% rename from examples/handPose-finger-detection/sketch.js rename to examples/handPose-fingers-detection/sketch.js