ml5js · shiffman · Jun 20, 2024 · Jun 19, 2024
diff --git a/examples/faceMesh-bounding-box/index.html b/examples/faceMesh-bounding-box/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 bounding box facial tracking on live video through ml5.faceMesh.
+-->
+
+<!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 faceMesh Bounding Box 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/faceMesh-bounding-box/sketch.js b/examples/faceMesh-bounding-box/sketch.js
@@ -0,0 +1,56 @@
+/*
+ * 👋 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 bounding box facial tracking on live video through ml5.faceMesh.
+ */
+
+let faceMesh;
+let video;
+let faces = [];
+let options = { maxFaces: 1, refineLandmarks: false, flipHorizontal: false };
+
+function preload() {
+  faceMesh = ml5.faceMesh(options);
+}
+
+function setup() {
+  createCanvas(640, 480);
+
+  video = createCapture(VIDEO);
+  video.size(640, 480);
+  video.hide();
+
+  faceMesh.detectStart(video, gotFaces);
+}
+
+function draw() {
+  // draw the webcam video
+  image(video, 0, 0, width, height);
+
+  // draw the faces' bounding boxes
+  for (let i = 0; i < faces.length; i++) {
+    let face = faces[i];
+    let x = face.box.xMin;
+    let y = face.box.yMin;
+    let w = face.box.width;
+    let h = face.box.height;
+    let centerX = (face.box.xMin + face.box.xMax) / 2; // average of xMin and xMax
+    let centerY = (face.box.yMin + face.box.yMax) / 2; // average of yMin and yMax
+
+    stroke(0, 255, 0);
+    fill(0, 255, 0, 50);
+    rect(x, y, w, h);
+    text(i, x, y - 10);
+
+    // draw the center of the face
+    noStroke();
+    fill(255, 0, 0);
+    circle(centerX, centerY, 10);
+  }
+}
+
+function gotFaces(results) {
+  faces = results;
+}
diff --git a/examples/faceMesh-keypoints-from-parts/index.html b/examples/faceMesh-keypoints-from-parts/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 keypoint tracking of facial features on live video through ml5.faceMesh.
+-->
+
+<!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 faceMesh Keypoints from 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/faceMesh-keypoints-from-parts/sketch.js b/examples/faceMesh-keypoints-from-parts/sketch.js
@@ -0,0 +1,90 @@
+/*
+ * 👋 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 keypoint tracking of facial features on live video through ml5.faceMesh.
+ */
+
+let faceMesh;
+let video;
+let faces = [];
+let options = { maxFaces: 1, refineLandmarks: false, flipHorizontal: false };
+
+function preload() {
+  faceMesh = ml5.faceMesh(options);
+}
+
+function setup() {
+  createCanvas(640, 480);
+
+  video = createCapture(VIDEO);
+  video.size(640, 480);
+  video.hide();
+
+  faceMesh.detectStart(video, gotFaces);
+}
+
+function draw() {
+  // draw the webcam video
+  image(video, 0, 0, width, height);
+
+  // draw the faces' bounding boxes
+  for (let j = 0; j < faces.length; j++) {
+    let face = faces[j];
+
+    strokeWeight(5);
+    // draw the lips
+    stroke(255, 0, 255);
+    for (let i = 0; i < face.lips.keypoints.length; i++) {
+      let keypoint = face.lips.keypoints[i];
+      let x = keypoint.x;
+      let y = keypoint.y;
+      point(x, y);
+    }
+    // draw the left eye
+    stroke(255, 255, 0);
+    for (let i = 0; i < face.leftEye.keypoints.length; i++) {
+      let keypoint = face.leftEye.keypoints[i];
+      let x = keypoint.x;
+      let y = keypoint.y;
+      point(x, y);
+    }
+    // draw the left eyebrow
+    stroke(0, 255, 0);
+    for (let i = 0; i < face.leftEyebrow.keypoints.length; i++) {
+      let keypoint = face.leftEyebrow.keypoints[i];
+      let x = keypoint.x;
+      let y = keypoint.y;
+      point(x, y);
+    }
+    // draw the right eye
+    stroke(0, 255, 255);
+    for (let i = 0; i < face.rightEye.keypoints.length; i++) {
+      let keypoint = face.rightEye.keypoints[i];
+      let x = keypoint.x;
+      let y = keypoint.y;
+      point(x, y);
+    }
+    // draw the right eyebrow
+    stroke(0, 0, 255);
+    for (let i = 0; i < face.rightEyebrow.keypoints.length; i++) {
+      let keypoint = face.rightEyebrow.keypoints[i];
+      let x = keypoint.x;
+      let y = keypoint.y;
+      point(x, y);
+    }
+    // draw the face oval
+    stroke(255, 0, 0);
+    for (let i = 0; i < face.faceOval.keypoints.length; i++) {
+      let keypoint = face.faceOval.keypoints[i];
+      let x = keypoint.x;
+      let y = keypoint.y;
+      point(x, y);
+    }
+  }
+}
+
+function gotFaces(results) {
+  faces = results;
+}
diff --git a/examples/faceMesh-parts-bounding-box/index.html b/examples/faceMesh-parts-bounding-box/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 bounding box tracking of facial features on live video through ml5.faceMesh.
+-->
+
+<!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 faceMesh Parts Bounding Box 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/faceMesh-parts-bounding-box/sketch.js b/examples/faceMesh-parts-bounding-box/sketch.js
@@ -0,0 +1,85 @@
+/*
+ * 👋 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 bounding box tracking of facial features on live video through ml5.faceMesh.
+ */
+
+let faceMesh;
+let video;
+let faces = [];
+let options = { maxFaces: 1, refineLandmarks: false, flipHorizontal: false };
+
+function preload() {
+  faceMesh = ml5.faceMesh(options);
+}
+
+function setup() {
+  createCanvas(640, 480);
+
+  video = createCapture(VIDEO);
+  video.size(640, 480);
+  video.hide();
+
+  faceMesh.detectStart(video, gotFaces);
+}
+
+function draw() {
+  // draw the webcam video
+  image(video, 0, 0, width, height);
+
+  // draw the faces' bounding boxes
+  for (let i = 0; i < faces.length; i++) {
+    let face = faces[i];
+
+    // draw the bounding box of face parts
+    fill(0, 255, 0, 50);
+    stroke(0, 255, 0);
+    rect(face.lips.x, face.lips.y, face.lips.width, face.lips.height);
+    rect(
+      face.leftEye.x,
+      face.leftEye.y,
+      face.leftEye.width,
+      face.leftEye.height
+    );
+    rect(
+      face.leftEyebrow.x,
+      face.leftEyebrow.y,
+      face.leftEyebrow.width,
+      face.leftEyebrow.height
+    );
+    rect(
+      face.rightEye.x,
+      face.rightEye.y,
+      face.rightEye.width,
+      face.rightEye.height
+    );
+    rect(
+      face.rightEyebrow.x,
+      face.rightEyebrow.y,
+      face.rightEyebrow.width,
+      face.rightEyebrow.height
+    );
+    rect(
+      face.faceOval.x,
+      face.faceOval.y,
+      face.faceOval.width,
+      face.faceOval.height
+    );
+
+    // draw the center points of face parts
+    noStroke();
+    fill(255, 0, 0);
+    circle(face.lips.centerX, face.lips.centerY, 10);
+    circle(face.leftEye.centerX, face.leftEye.centerY, 10);
+    circle(face.leftEyebrow.centerX, face.leftEyebrow.centerY, 10);
+    circle(face.rightEye.centerX, face.rightEye.centerY, 10);
+    circle(face.rightEyebrow.centerX, face.rightEyebrow.centerY, 10);
+    circle(face.faceOval.centerX, face.faceOval.centerY, 10);
+  }
+}
+
+function gotFaces(results) {
+  faces = results;
+}
diff --git a/examples/faceMesh-shapes-from-parts/index.html b/examples/faceMesh-shapes-from-parts/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 drawing custom shapes on facial features using ml5.faceMesh.
+-->
+
+<!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 faceMesh Shapes from 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>