Skip to content

Commit f611aee

Browse files
pearminipearmini
authored
Async constructors for p5 2.0 (#258)
* Async constructor for p5 2.x * Rename to examples-p5-2.0 * Update preload name * Move all the 2.0 examples into examples folder * Add some useful comments * Update scripts/updateP5Version to handle different versions of p5 * Update p5 versions * Add updateExamplesREADME.js
1 parent 34969ad commit f611aee

File tree

125 files changed

+3884
-62
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

125 files changed

+3884
-62
lines changed

‎examples/bodyPose-blazePose-keypoints-p5-2.0/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!--
2+
👋 Hello! This is an ml5.js example made and shared with ❤️.
3+
Learn more about the ml5.js project: https://ml5js.org/
4+
ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md
5+
6+
This example demonstrates pose tracking on live video through ml5.bodyPose with BlazePose model.
7+
-->
8+
9+
<html>
10+
<head>
11+
<meta charset="UTF-8" />
12+
<title>ml5.js bodyPose BlazePose Detection Example</title>
13+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
14+
<script src="../../dist/ml5.js"></script>
15+
</head>
16+
17+
<body>
18+
<script src="sketch.js"></script>
19+
</body>
20+
</html>

‎examples/bodyPose-blazePose-keypoints-p5-2.0/sketch.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/*
2+
* 👋 Hello! This is an ml5.js example made and shared with ❤️.
3+
* Learn more about the ml5.js project: https://ml5js.org/
4+
* ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md
5+
*
6+
* This example demonstrates pose tracking on live video through ml5.bodyPose with BlazePose model
7+
*/
8+
9+
let video;
10+
let bodyPose;
11+
let poses = [];
12+
13+
async function setup() {
14+
createCanvas(640, 480);
15+
16+
bodyPose = await ml5.bodyPose("BlazePose");
17+
18+
// Create the video and hide it
19+
video = createCapture(VIDEO);
20+
video.size(640, 480);
21+
video.hide();
22+
23+
// Start detecting poses in the webcam video
24+
bodyPose.detectStart(video, gotPoses);
25+
}
26+
27+
function draw() {
28+
// Draw the webcam video
29+
image(video, 0, 0, width, height);
30+
31+
// Draw all the tracked landmark points
32+
for (let i = 0; i < poses.length; i++) {
33+
let pose = poses[i];
34+
for (let j = 0; j < pose.keypoints.length; j++) {
35+
let keypoint = pose.keypoints[j];
36+
fill(0, 255, 0);
37+
noStroke();
38+
circle(keypoint.x, keypoint.y, 10);
39+
}
40+
}
41+
}
42+
43+
// Callback function for when bodyPose outputs data
44+
function gotPoses(results) {
45+
// Save the output to the poses variable
46+
poses = results;
47+
}

‎examples/bodyPose-blazePose-keypoints/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<head>
1111
<meta charset="UTF-8" />
1212
<title>ml5.js bodyPose BlazePose Detection Example</title>
13-
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.9/p5.min.js"></script>
1414
<script src="../../dist/ml5.js"></script>
1515
</head>
1616

‎examples/bodyPose-blazePose-skeleton-p5-2.0/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!--
2+
👋 Hello! This is an ml5.js example made and shared with ❤️.
3+
Learn more about the ml5.js project: https://ml5js.org/
4+
ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md
5+
6+
This example demonstrates drawing skeletons on poses for the BlazePose model.
7+
-->
8+
9+
<html>
10+
<head>
11+
<meta charset="UTF-8" />
12+
<title>ml5.js bodyPose BlazePose Skeleton Example</title>
13+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
14+
<script src="../../dist/ml5.js"></script>
15+
</head>
16+
17+
<body>
18+
<script src="sketch.js"></script>
19+
</body>
20+
</html>

‎examples/bodyPose-blazePose-skeleton-p5-2.0/sketch.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/*
2+
* 👋 Hello! This is an ml5.js example made and shared with ❤️.
3+
* Learn more about the ml5.js project: https://ml5js.org/
4+
* ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md
5+
*
6+
* This example demonstrates drawing skeletons on poses for the BlazePose model.
7+
*/
8+
9+
let video;
10+
let bodyPose;
11+
let poses = [];
12+
let connections;
13+
14+
async function setup() {
15+
createCanvas(640, 480);
16+
17+
bodyPose = await ml5.bodyPose("BlazePose");
18+
19+
// Create the video and hide it
20+
video = createCapture(VIDEO);
21+
video.size(640, 480);
22+
video.hide();
23+
24+
// Start detecting poses in the webcam video
25+
bodyPose.detectStart(video, gotPoses);
26+
// Get the skeleton connection information
27+
connections = bodyPose.getSkeleton();
28+
}
29+
30+
function draw() {
31+
// Draw the webcam video
32+
image(video, 0, 0, width, height);
33+
34+
// Draw the skeleton connections
35+
for (let i = 0; i < poses.length; i++) {
36+
let pose = poses[i];
37+
for (let j = 0; j < connections.length; j++) {
38+
let pointAIndex = connections[j][0];
39+
let pointBIndex = connections[j][1];
40+
let pointA = pose.keypoints[pointAIndex];
41+
let pointB = pose.keypoints[pointBIndex];
42+
43+
stroke(255, 0, 0);
44+
strokeWeight(2);
45+
line(pointA.x, pointA.y, pointB.x, pointB.y);
46+
}
47+
}
48+
49+
// Draw all the tracked landmark points
50+
for (let i = 0; i < poses.length; i++) {
51+
let pose = poses[i];
52+
for (let j = 0; j < pose.keypoints.length; j++) {
53+
let keypoint = pose.keypoints[j];
54+
fill(0, 255, 0);
55+
noStroke();
56+
circle(keypoint.x, keypoint.y, 10);
57+
}
58+
}
59+
}
60+
61+
// Callback function for when bodyPose outputs data
62+
function gotPoses(results) {
63+
// Save the output to the poses variable
64+
poses = results;
65+
}

‎examples/bodyPose-blazePose-skeleton/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<head>
1111
<meta charset="UTF-8" />
1212
<title>ml5.js bodyPose BlazePose Skeleton Example</title>
13-
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.9/p5.min.js"></script>
1414
<script src="../../dist/ml5.js"></script>
1515
</head>
1616

‎examples/bodyPose-keypoints-p5-2.0/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!--
2+
👋 Hello! This is an ml5.js example made and shared with ❤️.
3+
Learn more about the ml5.js project: https://ml5js.org/
4+
ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md
5+
6+
This example demonstrates pose tracking on live video through ml5.bodyPose with MoveNet model.
7+
-->
8+
9+
<html>
10+
<head>
11+
<meta charset="UTF-8" />
12+
<title>ml5.js bodyPose Detection Example</title>
13+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
14+
<script src="../../dist/ml5.js"></script>
15+
</head>
16+
17+
<body>
18+
<script src="sketch.js"></script>
19+
</body>
20+
</html>

‎examples/bodyPose-keypoints-p5-2.0/sketch.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/*
2+
* 👋 Hello! This is an ml5.js example made and shared with ❤️.
3+
* Learn more about the ml5.js project: https://ml5js.org/
4+
* ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md
5+
*
6+
* This example demonstrates pose tracking on live video through ml5.bodyPose with MoveNet model.
7+
*/
8+
9+
let video;
10+
let bodyPose;
11+
let poses = [];
12+
13+
async function setup() {
14+
createCanvas(640, 480);
15+
16+
// Load the bodyPose model asynchronously
17+
bodyPose = await ml5.bodyPose();
18+
19+
// Create the video and hide it
20+
video = createCapture(VIDEO);
21+
video.size(640, 480);
22+
video.hide();
23+
24+
// Start detecting poses in the webcam video
25+
bodyPose.detectStart(video, gotPoses);
26+
}
27+
28+
function draw() {
29+
// Draw the webcam video
30+
image(video, 0, 0, width, height);
31+
32+
// Draw all the tracked landmark points
33+
for (let i = 0; i < poses.length; i++) {
34+
let pose = poses[i];
35+
for (let j = 0; j < pose.keypoints.length; j++) {
36+
let keypoint = pose.keypoints[j];
37+
// Only draw a circle if the keypoint's confidence is bigger than 0.1
38+
if (keypoint.confidence > 0.1) {
39+
fill(0, 255, 0);
40+
noStroke();
41+
circle(keypoint.x, keypoint.y, 10);
42+
}
43+
}
44+
}
45+
}
46+
47+
// Callback function for when bodyPose outputs data
48+
function gotPoses(results) {
49+
// Save the output to the poses variable
50+
poses = results;
51+
}

‎examples/bodyPose-keypoints/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<head>
1111
<meta charset="UTF-8" />
1212
<title>ml5.js bodyPose Detection Example</title>
13-
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.9/p5.min.js"></script>
1414
<script src="../../dist/ml5.js"></script>
1515
</head>
1616

‎examples/bodyPose-skeletal-connections-p5-2.0/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!--
2+
👋 Hello! This is an ml5.js example made and shared with ❤️.
3+
Learn more about the ml5.js project: https://ml5js.org/
4+
ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md
5+
6+
This example demonstrates drawing skeletons on poses for the MoveNet model.
7+
-->
8+
9+
<html>
10+
<head>
11+
<meta charset="UTF-8" />
12+
<title>ml5.js bodyPose Skeleton Example</title>
13+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
14+
<script src="../../dist/ml5.js"></script>
15+
</head>
16+
17+
<body>
18+
<script src="sketch.js"></script>
19+
</body>
20+
</html>

0 commit comments

Comments
 (0)