Update BodyPix to version 2.0 #40
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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.7.0/p5.js"></script> | ||
| <script src="../../dist/ml5.js"></script> | ||
| </head> | ||
| <body> | ||
| <script src="sketch.js"></script> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| // Copyright (c) 2020-2023 ml5 | ||
| // | ||
| // This software is released under the MIT License. | ||
| // https://opensource.org/licenses/MIT | ||
|
|
||
| /* === | ||
| ml5 Example | ||
| BodyPix | ||
| === */ | ||
|
|
||
| let bodypix; | ||
| let video; | ||
| let segmentation; | ||
|
|
||
| let options = { | ||
| outputStride: 16, //adjust the output stride and see which one works best! | ||
| multiSegmentation: false, | ||
| segmentBodyParts: true, | ||
| flipHorizontal: true, | ||
|
Member
There was a problem hiding this comment. Is this something that the BodyPix model does natively or something you all added? I wonder if we should include an option like this for other models as well?
Contributor
There was a problem hiding this comment. Hi Dan! If your question meant "why these four paramters", that's the latter three (multiSegmentation, segmentBodyParts, flipHorizontal) actually depends case by case. For example, if the user wants to detect multiple people and output different segmentation, then multiSegmentation needs to be turned on. As for outputStride, that's because I noticed this parameter could affect model performance, in terms of accuracy, so I thought this might be a good way to familiarize our users to machine learning. |
||
| }; | ||
|
|
||
| function setup() { | ||
| createCanvas(480, 360); | ||
| // Create the video | ||
| video = createCapture(VIDEO); | ||
| video.size(width, height); | ||
| video.hide(); | ||
| bodypix = ml5.bodyPix(video, options, modelReady); | ||
| bodypix.on("bodypix", gotResults); | ||
| } | ||
|
|
||
| // Event for body segmentation | ||
| function gotResults(result) { | ||
| // Save the latest part mask from the model in global variable "segmentation" | ||
| segmentation = result; | ||
| //Draw the video | ||
| image(video, 0, 0, width, height); | ||
|
Member
There was a problem hiding this comment. For students to work from, in my experience it's best to have the drawing in |
||
| image(segmentation.backgroundMask, 0, 0, width, height); | ||
| tint(255, 128); // opacity tuning | ||
| } | ||
|
|
||
| // Event when model is loaded | ||
| function modelReady() { | ||
| console.log("Model ready!"); | ||
| } | ||
|
|
||
| function draw() { | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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.7.0/p5.js"></script> | ||
| <script src="../../dist/ml5.js"></script> | ||
| </head> | ||
| <body> | ||
| <script src="sketch.js"></script> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| // Copyright (c) 2020-2023 ml5 | ||
| // | ||
| // This software is released under the MIT License. | ||
| // https://opensource.org/licenses/MIT | ||
|
|
||
| /* === | ||
| ml5 Example | ||
| BodyPix | ||
| === */ | ||
|
|
||
| let bodypix; | ||
| let video; | ||
| let segmentation; | ||
|
|
||
| let options = { | ||
| outputStride: 16, //adjust the output stride and see which one works best! | ||
| multiSegmentation: false, | ||
| segmentBodyParts: true, | ||
| flipHorizontal: true, | ||
| }; | ||
|
|
||
| function setup() { | ||
| createCanvas(480, 360); | ||
| // Create the video | ||
| video = createCapture(VIDEO); | ||
| video.size(width, height); | ||
| video.hide(); | ||
| bodypix = ml5.bodyPix(video, options, modelReady); | ||
| bodypix.on("bodypix", gotResults); | ||
| } | ||
|
|
||
| // Event for body segmentation | ||
| function gotResults(result) { | ||
| // Save the latest part mask from the model in global variable "segmentation" | ||
| segmentation = result; | ||
| //Draw the video | ||
| image(video, 0, 0, width, height); | ||
| image(segmentation.partMask, 0, 0, width, height); | ||
| tint(255, 128); //opacity tuning | ||
| } | ||
|
|
||
| // Event when model is loaded | ||
| function modelReady() { | ||
| console.log("Model ready!"); | ||
| } | ||
|
|
||
| function draw() { | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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.7.0/p5.js"></script> | ||
| <script src="../../dist/ml5.js"></script> | ||
| </head> | ||
| <body> | ||
| <script src="sketch.js"></script> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| // Copyright (c) 2020-2023 ml5 | ||
| // | ||
| // This software is released under the MIT License. | ||
| // https://opensource.org/licenses/MIT | ||
|
|
||
| /* === | ||
| ml5 Example | ||
| BodyPix | ||
| === */ | ||
|
|
||
| let bodypix; | ||
| let video; | ||
| let segmentation; | ||
|
|
||
| let options = { | ||
| outputStride: 16, //adjust the output stride and see which one works best! | ||
| multiSegmentation: false, | ||
| segmentBodyParts: true, | ||
| flipHorizontal: true, | ||
| }; | ||
|
|
||
| function setup() { | ||
| createCanvas(480, 360); | ||
| // Create the video | ||
| video = createCapture(VIDEO); | ||
| video.size(width, height); | ||
| video.hide(); | ||
| bodypix = ml5.bodyPix(video, options, modelReady); | ||
| bodypix.on("bodypix", gotResults); | ||
| } | ||
|
|
||
| // Event for body segmentation | ||
| function gotResults(result) { | ||
| // Save the latest part mask from the model in global variable "segmentation" | ||
| segmentation = result; | ||
| //Draw the video | ||
| image(video, 0, 0, width, height); | ||
| image(segmentation.personMask, 0, 0, width, height); | ||
| tint(255, 128); //opacity tuning | ||
| } | ||
|
|
||
| // Event when model is loaded | ||
| function modelReady() { | ||
| console.log("Model ready!"); | ||
| } | ||
|
|
||
| function draw() { | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| export default { | ||
| leftFace: { | ||
| id: 0, | ||
| color: [110, 64, 170], | ||
| }, | ||
| rightFace: { | ||
| id: 1, | ||
| color: [143, 61, 178], | ||
| }, | ||
| leftUpperArmFront: { | ||
| id: 2, | ||
| color: [178, 60, 178], | ||
| }, | ||
| leftUpperArmBack: { | ||
| id: 3, | ||
| color: [210, 62, 167], | ||
| }, | ||
| rightUpperArmFront: { | ||
| id: 4, | ||
| color: [238, 67, 149], | ||
| }, | ||
| rightUpperArmBack: { | ||
| id: 5, | ||
| color: [255, 78, 125], | ||
| }, | ||
| leftLowerArmFront: { | ||
| id: 6, | ||
| color: [255, 94, 99], | ||
| }, | ||
| leftLowerArmBack: { | ||
| id: 7, | ||
| color: [255, 115, 75], | ||
| }, | ||
| rightLowerArmFront: { | ||
| id: 8, | ||
| color: [255, 140, 56], | ||
| }, | ||
| rightLowerArmBack: { | ||
| id: 9, | ||
| color: [239, 167, 47], | ||
| }, | ||
| leftHand: { | ||
| id: 10, | ||
| color: [217, 194, 49], | ||
| }, | ||
| rightHand: { | ||
| id: 11, | ||
| color: [194, 219, 64], | ||
| }, | ||
| torsoFront: { | ||
| id: 12, | ||
| color: [175, 240, 91], | ||
| }, | ||
| torsoBack: { | ||
| id: 13, | ||
| color: [135, 245, 87], | ||
| }, | ||
| leftUpperLegFront: { | ||
| id: 14, | ||
| color: [96, 247, 96], | ||
| }, | ||
| leftUpperLegBack: { | ||
| id: 15, | ||
| color: [64, 243, 115], | ||
| }, | ||
| rightUpperLegFront: { | ||
| id: 16, | ||
| color: [40, 234, 141], | ||
| }, | ||
| rightUpperLegBack: { | ||
| id: 17, | ||
| color: [28, 219, 169], | ||
| }, | ||
| leftLowerLegFront: { | ||
| id: 18, | ||
| color: [26, 199, 194], | ||
| }, | ||
| leftLowerLegBack: { | ||
| id: 19, | ||
| color: [33, 176, 213], | ||
| }, | ||
| rightLowerLegFront: { | ||
| id: 20, | ||
| color: [47, 150, 224], | ||
| }, | ||
| rightLowerLegBack: { | ||
| id: 21, | ||
| color: [65, 125, 224], | ||
| }, | ||
| leftFoot: { | ||
| id: 22, | ||
| color: [84, 101, 214], | ||
| }, | ||
| rightFoot: { | ||
| id: 23, | ||
| color: [99, 81, 195], | ||
| }, | ||
| }; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just noting we might want to include a "hello world" version of this that just uses defaults. The options can sometimes overwhelm / confuse a beginner.