diff --git a/p5js/BodyPix/BodyPix_Image/sketch.js b/p5js/BodyPix/BodyPix_Image/sketch.js
index b6721534..c8b20056 100644
--- a/p5js/BodyPix/BodyPix_Image/sketch.js
+++ b/p5js/BodyPix/BodyPix_Image/sketch.js
@@ -4,18 +4,11 @@ let img;
function preload() {
img = loadImage('data/harriet.jpg');
+ bodypix = ml5.bodyPix()
}
function setup() {
createCanvas(480, 560);
-
- // video.hide(); // Hide the video element, and just show the canvas
- bodypix = ml5.bodyPix(modelReady)
- // background(0);
-}
-
-function modelReady() {
- console.log('ready!')
bodypix.segment(img, gotResults)
}
@@ -24,13 +17,10 @@ function gotResults(err, result) {
console.log(err)
return
}
- // console.log(result);
+
segmentation = result;
background(0);
-
- // console.log(segmentation.maskPerson)
- // TODO: image seems to be repeating 4x
image(img, 0, 0, width, height)
image(segmentation.maskBackground, 0, 0, width, height)
diff --git a/p5js/BodyPix/BodyPix_Preload/data/ada.jpg b/p5js/BodyPix/BodyPix_Preload/data/ada.jpg
new file mode 100644
index 00000000..da50e2aa
Binary files /dev/null and b/p5js/BodyPix/BodyPix_Preload/data/ada.jpg differ
diff --git a/p5js/BodyPix/BodyPix_Preload/index.html b/p5js/BodyPix/BodyPix_Preload/index.html
new file mode 100644
index 00000000..4790ead4
--- /dev/null
+++ b/p5js/BodyPix/BodyPix_Preload/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+ BodyPix with Webcam
+
+
+
+
+
+
+
+
+
+
+ BodyPix with Image
+ images via: https://commons.wikimedia.org
+
+
+
+
\ No newline at end of file
diff --git a/p5js/BodyPix/BodyPix_Preload/sketch.js b/p5js/BodyPix/BodyPix_Preload/sketch.js
new file mode 100644
index 00000000..d1c98ccc
--- /dev/null
+++ b/p5js/BodyPix/BodyPix_Preload/sketch.js
@@ -0,0 +1,30 @@
+let bodypix;
+let segmentation;
+let img;
+
+function preload() {
+ img = loadImage('data/ada.jpg');
+ bodypix = ml5.bodyPix();
+}
+
+function setup() {
+ createCanvas(480, 640);
+ bodypix.segment(img, gotResults)
+}
+
+function gotResults(err, result) {
+ if (err) {
+ console.log(err)
+ return
+ }
+ // console.log(result);
+ segmentation = result;
+
+ background(0);
+
+ // console.log(segmentation.maskPerson)
+ // TODO: image seems to be repeating 4x
+ image(img, 0, 0, width, height)
+ image(segmentation.maskBackground, 0, 0, width, height)
+
+}
\ No newline at end of file
diff --git a/p5js/BodyPix/BodyPix_Webcam/index.html b/p5js/BodyPix/BodyPix_Webcam/index.html
index 9e348bd8..8b857448 100644
--- a/p5js/BodyPix/BodyPix_Webcam/index.html
+++ b/p5js/BodyPix/BodyPix_Webcam/index.html
@@ -3,8 +3,8 @@
BodyPix with Webcam
-
-
+
+
diff --git a/p5js/BodyPix/BodyPix_Webcam/sketch.js b/p5js/BodyPix/BodyPix_Webcam/sketch.js
index 579938cd..eb652c7b 100644
--- a/p5js/BodyPix/BodyPix_Webcam/sketch.js
+++ b/p5js/BodyPix/BodyPix_Webcam/sketch.js
@@ -8,19 +8,17 @@ const options = {
segmentationThreshold: 0.3 // 0 - 1, defaults to 0.5
}
+function preload(){
+ bodypix = ml5.bodyPix(options);
+}
+
function setup() {
createCanvas(320, 240);
-
// load up your video
video = createCapture(VIDEO);
video.size(width, height);
// video.hide(); // Hide the video element, and just show the canvas
- bodypix = ml5.bodyPix(video, modelReady)
-}
-
-function modelReady() {
- console.log('ready!')
- bodypix.segment(gotResults, options)
+ bodypix.segment(video, gotResults)
}
function gotResults(err, result) {
@@ -28,13 +26,13 @@ function gotResults(err, result) {
console.log(err)
return
}
- // console.log(result);
+
segmentation = result;
background(0);
image(video, 0, 0, width, height)
image(segmentation.maskBackground, 0, 0, width, height)
- bodypix.segment(gotResults, options)
+ bodypix.segment(video, gotResults)
}
\ No newline at end of file
diff --git a/p5js/BodyPix/BodyPix_Webcam_Parts/sketch.js b/p5js/BodyPix/BodyPix_Webcam_Parts/sketch.js
index 3c4c3941..4f927ac4 100644
--- a/p5js/BodyPix/BodyPix_Webcam_Parts/sketch.js
+++ b/p5js/BodyPix/BodyPix_Webcam_Parts/sketch.js
@@ -8,6 +8,10 @@ const options = {
segmentationThreshold: 0.3, // 0 - 1, defaults to 0.5
}
+function preload(){
+ bodypix = ml5.bodyPix(options)
+}
+
function setup() {
createCanvas(320, 240);
@@ -15,19 +19,16 @@ function setup() {
video = createCapture(VIDEO);
video.size(width, height);
// video.hide(); // Hide the video element, and just show the canvas
- bodypix = ml5.bodyPix(video, modelReady)
// Create a palette - uncomment to test below
createHSBPalette();
// createRGBPalette();
// createSimplePalette();
-}
-function modelReady() {
- console.log('ready!')
- bodypix.segmentWithParts(gotResults, options)
+ bodypix.segmentWithParts(video)
}
+
function gotResults(err, result) {
if (err) {
console.log(err)