Skip to content

Commit 00558fe

Browse files
shiffmanshiffman
authored
Merge pull request #35 from ml5js/handpose-interface
Handpose interface
2 parents f04ce90 + 4036a00 commit 00558fe

File tree

9 files changed

+346
-75
lines changed

9 files changed

+346
-75
lines changed

‎examples/Handpose-p5-image/hand.jpg‎

17.4 KB
Loading

‎examples/Handpose/index.html‎ renamed to ‎examples/Handpose-p5-image/index.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Document</title>
8-
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
9-
<script src="../../dist/ml5.js"></script>
10-
</head>
11-
<body>
12-
<script src="sketch.js"></script>
13-
</body>
14-
</html>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>ml5.js Handpose p5 Image Example</title>
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
9+
<script src="../../dist/ml5.js"></script>
10+
</head>
11+
<body>
12+
<script src="sketch.js"></script>
13+
</body>
14+
</html>

‎examples/Handpose-p5-image/sketch.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
// Copyright (c) 2023 ml5
2+
//
3+
// This software is released under the MIT License.
4+
// https://opensource.org/licenses/MIT
5+
6+
let handpose;
7+
let video;
8+
let hands = [];
9+
10+
function preload() {
11+
//load the image to be detected
12+
img = loadImage("hand.jpg");
13+
// Load the handpose model.
14+
handpose = ml5.handpose();
15+
}
16+
17+
function setup() {
18+
createCanvas(640, 480);
19+
// Draw the image
20+
image(img, 0, 0);
21+
// Detect hands in an image
22+
handpose.detect(img, gotHands);
23+
}
24+
25+
function draw() {
26+
// Draw all the hand keypoints
27+
for (let i = 0; i < hands.length; i++) {
28+
let hand = hands[i];
29+
for (let j = 0; j < hand.keypoints.length; j++) {
30+
let keypoint = hand.keypoints[j];
31+
fill(0, 255, 0);
32+
noStroke();
33+
circle(keypoint.x, keypoint.y, 10);
34+
}
35+
}
36+
}
37+
38+
// Callback function for when handpose outputs data
39+
function gotHands(results) {
40+
// save the output to the hands variable
41+
hands = results;
42+
}

‎examples/Handpose-p5-start-stop/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>ml5.js Handpose p5 Start and Stop Example</title>
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
9+
<script src="../../dist/ml5.js"></script>
10+
</head>
11+
<body>
12+
<script src="sketch.js"></script>
13+
</body>
14+
</html>

‎examples/Handpose-p5-start-stop/sketch.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
// Copyright (c) 2023 ml5
2+
//
3+
// This software is released under the MIT License.
4+
// https://opensource.org/licenses/MIT
5+
6+
let handpose;
7+
let video;
8+
let hands = [];
9+
let isDetecting = false;
10+
11+
function preload() {
12+
// Load the handpose model.
13+
handpose = ml5.handpose();
14+
}
15+
16+
function setup() {
17+
createCanvas(640, 480);
18+
// Create the webcam video and hide it
19+
video = createCapture(VIDEO);
20+
video.size(width, height);
21+
video.hide();
22+
}
23+
24+
function draw() {
25+
// Draw the webcam video
26+
image(video, 0, 0, width, height);
27+
28+
// Draw all the tracked hand points
29+
for (let i = 0; i < hands.length; i++) {
30+
let hand = hands[i];
31+
for (let j = 0; j < hand.keypoints.length; j++) {
32+
let keypoint = hand.keypoints[j];
33+
fill(0, 255, 0);
34+
noStroke();
35+
circle(keypoint.x, keypoint.y, 10);
36+
}
37+
}
38+
39+
fill(255, 0, 0);
40+
textSize(25);
41+
text("Press mouse to toggle detection", 10, 30);
42+
if (isDetecting) {
43+
text("Detecting", 10, 60);
44+
} else {
45+
text("Not detecting", 10, 60);
46+
}
47+
}
48+
49+
//toggle detection when mouse is pressed
50+
function mousePressed() {
51+
toggleDetection();
52+
}
53+
54+
// call this function to start and stop detection
55+
function toggleDetection() {
56+
if (isDetecting) {
57+
handpose.detectStop();
58+
isDetecting = false;
59+
} else {
60+
handpose.detectStart(video, gotHands);
61+
isDetecting = true;
62+
}
63+
}
64+
65+
// Callback function for when handpose outputs data
66+
function gotHands(results) {
67+
// save the output to the hands variable
68+
hands = results;
69+
}

‎examples/Handpose-p5-webcam/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>ml5.js Handpose p5 Webcam Example</title>
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
9+
<script src="../../dist/ml5.js"></script>
10+
</head>
11+
<body>
12+
<script src="sketch.js"></script>
13+
</body>
14+
</html>

‎examples/Handpose/sketch.js‎ renamed to ‎examples/Handpose-p5-webcam/sketch.js‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,29 @@
1+
// Copyright (c) 2023 ml5
2+
//
3+
// This software is released under the MIT License.
4+
// https://opensource.org/licenses/MIT
5+
16
let handpose;
27
let video;
38
let hands = [];
49

10+
function preload() {
11+
// Load the handpose model.
12+
handpose = ml5.handpose();
13+
}
14+
515
function setup() {
616
createCanvas(640, 480);
7-
8-
// Create the video and hide it
17+
// Create the webcam video and hide it
918
video = createCapture(VIDEO);
1019
video.size(width, height);
1120
video.hide();
12-
13-
// Load the model and attach an event
14-
handpose = ml5.handpose(video, modelReady);
15-
handpose.on("hand", gotHands);
16-
}
17-
18-
// Event for hand detection
19-
function gotHands(results) {
20-
// Always save the latest output from the model in global variable "hands"
21-
hands = results;
22-
}
23-
24-
// Event for when model loaded
25-
function modelReady() {
26-
console.log("Model ready!");
21+
// start detecting hands from the webcam video
22+
handpose.detectStart(video, gotHands);
2723
}
2824

2925
function draw() {
30-
// Draw the video
26+
// Draw the webcam video
3127
image(video, 0, 0, width, height);
3228

3329
// Draw all the tracked hand points
@@ -41,3 +37,9 @@ function draw() {
4137
}
4238
}
4339
}
40+
41+
// Callback function for when handpose outputs data
42+
function gotHands(results) {
43+
// save the output to the hands variable
44+
hands = results;
45+
}

0 commit comments

Comments
 (0)