updates and cleanup for examples

examples/p5js/BodyPix/BodyPix_Image/sketch.js

@@ -1,26 +1,33 @@
+// Copyright (c) 2020 ml5
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+/* ===
+ml5 Example
+BodyPix
+=== */
+
 let bodypix;
 let segmentation;
 let img;
 
 function preload() {
  img = loadImage('data/harriet.jpg');
- bodypix = ml5.bodyPix()
+ bodypix = ml5.bodyPix();
 }
 
 function setup() {
  createCanvas(480, 560);
- bodypix.segment(img, gotResults)
+ bodypix.segment(img, gotResults);
 }
 
 function gotResults(err, result) {
  if (err) {
- console.log(err)
- return
+ console.log(err);
+ return;
  }
-
  segmentation = result;
-
  background(0);
- image(segmentation.backgroundMask, 0, 0, width, height)
-
-}
+ image(segmentation.backgroundMask, 0, 0, width, height);
+}

examples/p5js/BodyPix/BodyPix_Webcam/sketch.js

@@ -1,14 +1,24 @@
+// Copyright (c) 2020 ml5
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+/* ===
+ml5 Example
+BodyPix
+=== */
+
 let bodypix;
 let video;
 let segmentation;
 let img;
 
 const options = {
  outputStride: 8, // 8, 16, or 32, default is 16
- segmentationThreshold: 0.3 // 0 - 1, defaults to 0.5 
-}
+ segmentationThreshold: 0.3, // 0 - 1, defaults to 0.5
+};
 
-function preload(){
+function preload() {
  bodypix = ml5.bodyPix(options);
 }
 
@@ -17,21 +27,21 @@ function setup() {
  // load up your video
  video = createCapture(VIDEO);
  video.size(width, height);
- // video.hide(); // Hide the video element, and just show the canvas
- bodypix.segment(video, gotResults)
+ bodypix.segment(video, gotResults);
 }
 
-function gotResults(err, result) {
- if (err) {
-  console.log(err)
- return
+function draw() {
+ background(0);
+ if (segmentation) {
+ image(segmentation.backgroundMask, 0, 0, width, height);
  }
+}
 
+function gotResults(error, result) {
+ if (error) {
+ console.log(error);
+ return;
+ }
  segmentation = result;
-
- background(0);
- image(segmentation.backgroundMask, 0, 0, width, height)
-
- bodypix.segment(video, gotResults)
-
-}
+ bodypix.segment(video, gotResults);
+}

examples/p5js/BodyPix/BodyPix_Webcam_Parts/sketch.js

@@ -1,79 +1,87 @@
+// Copyright (c) 2020 ml5
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+/* ===
+ml5 Example
+BodyPix
+=== */
+
 let bodypix;
 let video;
 let segmentation;
 let img;
 
 const options = {
-  outputStride: 8, // 8, 16, or 32, default is 16
-  segmentationThreshold: 0.3, // 0 - 1, defaults to 0.5 
-}
+ outputStride: 8, // 8, 16, or 32, default is 16
+ segmentationThreshold: 0.3, // 0 - 1, defaults to 0.5
+};
 
-function preload(){
-  bodypix = ml5.bodyPix(options)
+function preload() {
+ bodypix = ml5.bodyPix(options);
 }
 
 function setup() {
-  createCanvas(320, 240);
+ 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
+ // load up your video
+ video = createCapture(VIDEO);
+ video.size(width, height);
+ // video.hide(); // Hide the video element, and just show the canvas
 
-  // Create a palette - uncomment to test below
-  createHSBPalette();
-  // createRGBPalette();
-  // createSimplePalette();
+ // Create a palette - uncomment to test below
+ createHSBPalette();
+ // createRGBPalette();
+ // createSimplePalette();
 
-  bodypix.segmentWithParts(video, gotResults, options)
+ bodypix.segmentWithParts(video, gotResults, options);
 }
 
-
 function gotResults(err, result) {
- if (err) {
- console.log(err)
- return
- }
- segmentation = result;
-
- background(255, 0, 0);
- // image(video, 0, 0, width, height)
- image(segmentation.partMask, 0, 0, width, height)
+ if (err) {
+ console.log(err);
+ return;
+ }
+ segmentation = result;
 
- bodypix.segmentWithParts(video, gotResults, options)
+ background(255, 0, 0);
+ // image(video, 0, 0, width, height)
+ image(segmentation.partMask, 0, 0, width, height);
 
+ bodypix.segmentWithParts(video, gotResults, options);
 }
 
 function createSimplePalette() {
-  options.palette = bodypix.config.palette;
-  Object.keys(bodypix.palette).forEach(part => {
-  const r = floor(random(255));
-  const g = floor(random(255));
-  const b = floor(random(255));
-  options.palette[part].color = [r, g, b]
-  });
+ options.palette = bodypix.config.palette;
+ Object.keys(bodypix.palette).forEach(part => {
+ const r = floor(random(255));
+ const g = floor(random(255));
+ const b = floor(random(255));
+ options.palette[part].color = [r, g, b];
+ });
 }
 
 function createHSBPalette() {
-  colorMode(HSB);
-  options.palette = bodypix.config.palette;
-  Object.keys(options.palette).forEach(part => {
-  const h = floor(random(360));
-  const s = floor(random(100));
-  const b = floor(random(100));
-  const c = color(h, s, b)
-  options.palette[part].color = c;
-  });
+ colorMode(HSB);
+ options.palette = bodypix.config.palette;
+ Object.keys(options.palette).forEach(part => {
+ const h = floor(random(360));
+ const s = floor(random(100));
+ const b = floor(random(100));
+ const c = color(h, s, b);
+ options.palette[part].color = c;
+ });
 }
 
 function createRGBPalette() {
-  colorMode(RGB);
-  options.palette = bodypix.config.palette;
-  Object.keys(options.palette).forEach(part => {
-  const r = floor(random(255));
-  const g = floor(random(255));
-  const b = floor(random(255));
-  const c = color(r, g, b)
-  options.palette[part].color = c;
-  });
-}
+ colorMode(RGB);
+ options.palette = bodypix.config.palette;
+ Object.keys(options.palette).forEach(part => {
+ const r = floor(random(255));
+ const g = floor(random(255));
+ const b = floor(random(255));
+ const c = color(r, g, b);
+ options.palette[part].color = c;
+ });
+}