BodySegmentation: Add example to demonstrate .data

ml5js · Jun 20, 2024 · ed925fc · ed925fc
1 parent 4ad9c89
commit ed925fc
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 0 deletions.
diff --git a/examples/bodySegmentation-select-bodypart/index.html b/examples/bodySegmentation-select-bodypart/index.html
@@ -0,0 +1,22 @@
+<!--
+  👋 Hello! This is an ml5.js example made and shared with ❤️.
+  Learn more about the ml5.js project: https://ml5js.org/
+  ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md
+
+  This example demonstrates segmenting a person by body parts with ml5.bodySegmentation.
+-->
+
+<!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>ml5.js bodySegmentation Parts Example</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.2/p5.min.js"></script>
+    <script src="../../dist/ml5.js"></script>
+  </head>
+  <body>
+    <script src="sketch.js"></script>
+  </body>
+</html>
diff --git a/examples/bodySegmentation-select-bodypart/sketch.js b/examples/bodySegmentation-select-bodypart/sketch.js
@@ -0,0 +1,51 @@
+/*
+ * 👋 Hello! This is an ml5.js example made and shared with ❤️.
+ * Learn more about the ml5.js project: https://ml5js.org/
+ * ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md
+ *
+ * This example demonstrates segmenting a person by body parts with ml5.bodySegmentation.
+ */
+
+let bodySegmentation;
+let video;
+let segmentation;
+
+let options = {
+  maskType: "parts",
+};
+
+function preload() {
+  bodySegmentation = ml5.bodySegmentation("BodyPix", options);
+}
+
+function setup() {
+  createCanvas(640, 480);
+  // Create the video
+  video = createCapture(VIDEO);
+  video.size(width, height);
+  video.hide();
+
+  bodySegmentation.detectStart(video, gotResults);
+}
+
+function draw() {
+  background(255);
+  image(video, 0, 0);
+  if (segmentation) {
+    let gridSize = 10;
+    for (let x=0; x < video.width; x += gridSize) {
+      for (let y=0; y < video.height; y += gridSize) {
+        if (segmentation.data[y * video.width + x] == bodySegmentation.TORSO_FRONT) {
+          fill(255, 0, 0);
+          noStroke();
+          circle(x, y, gridSize);
+        }
+      }
+    }
+  }
+}
+
+// callback function for body segmentation
+function gotResults(result) {
+  segmentation = result;
+}