Updates bodypix examples to use preload() for p5js examples (#214)

* adds preload example * updates bodypix to use preload()
ml5js · Oct 13, 2019 · 03c349b · 03c349b
1 parent 58b3ee3
commit 03c349b
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 28 deletions.
diff --git 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
diff --git a/p5js/BodyPix/BodyPix_Preload/index.html b/p5js/BodyPix/BodyPix_Preload/index.html
@@ -0,0 +1,21 @@
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>BodyPix with Webcam</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
+  <script src="http://localhost:8080/ml5.js" type="text/javascript"></script>
+
+  <style></style>
+</head>
+
+<script src="sketch.js"></script>
+
+<body>
+    <h1>BodyPix with Image</h1>
+    <small>images via:  https://commons.wikimedia.org</small>
+
+</body>
+
+</html>
diff --git a/p5js/BodyPix/BodyPix_Preload/sketch.js 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)
+
+}
diff --git a/p5js/BodyPix/BodyPix_Webcam/index.html b/p5js/BodyPix/BodyPix_Webcam/index.html
@@ -3,8 +3,8 @@
 <head>
   <meta charset="UTF-8">
   <title>BodyPix with Webcam</title>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
   <script src="http://localhost:8080/ml5.js" type="text/javascript"></script>
 
   <style></style>

diff --git a/p5js/BodyPix/BodyPix_Webcam/sketch.js b/p5js/BodyPix/BodyPix_Webcam/sketch.js
@@ -8,33 +8,31 @@ 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) {
     if (err) {
         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)
 
 }
diff --git a/p5js/BodyPix/BodyPix_Webcam_Parts/sketch.js b/p5js/BodyPix/BodyPix_Webcam_Parts/sketch.js
@@ -8,26 +8,27 @@ 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)
 
     // 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)