Skip to content

Commit 9a4dd7e

Browse files
ziyuan-linnshiffman
ziyuan-linn
and
shiffman
authored
add getConnections and getUVCoords functions (#223)
* add getConnections and getUVCoords functions * add uv map example Co-Authored-By: Daniel Shiffman <[email protected]> * remove from uv x coordinates --------- Co-authored-by: Daniel Shiffman <[email protected]>
1 parent cb4118f commit 9a4dd7e

File tree

5 files changed

+601
-0
lines changed

5 files changed

+601
-0
lines changed

‎examples/faceMesh-uv-map/clouds.jpg‎

93.4 KB
Loading

‎examples/faceMesh-uv-map/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!--
2+
👋 Hello! This is an ml5.js example made and shared with ❤️.
3+
Learn more about the ml5.js project: https://ml5js.org/
4+
ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md
5+
6+
This example demonstrates UV mapping with ml5.faceMesh.
7+
-->
8+
9+
<!DOCTYPE html>
10+
<html lang="en">
11+
<head>
12+
<meta charset="UTF-8" />
13+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
14+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
15+
<title>ml5.js faceMesh Webcam Example</title>
16+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
17+
<script src="../../dist/ml5.js"></script>
18+
</head>
19+
<body>
20+
<script src="sketch.js"></script>
21+
</body>
22+
</html>

‎examples/faceMesh-uv-map/sketch.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/*
2+
* 👋 Hello! This is an ml5.js example made and shared with ❤️.
3+
* Learn more about the ml5.js project: https://ml5js.org/
4+
* ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md
5+
*
6+
* This example demonstrates UV mapping with ml5.faceMesh.
7+
*/
8+
9+
let faceMesh;
10+
let video;
11+
let faces = [];
12+
let options = { maxFaces: 1, refineLandmarks: false, flipped: true };
13+
14+
let uvMapImage;
15+
16+
let triangulation;
17+
let uvCoords;
18+
19+
function preload() {
20+
// Load the faceMesh model
21+
faceMesh = ml5.faceMesh(options);
22+
uvMapImage = loadImage("clouds.jpg");
23+
}
24+
25+
function setup() {
26+
createCanvas(640, 480, WEBGL);
27+
// Create the webcam video and hide it
28+
video = createCapture(VIDEO);
29+
video.size(640, 480);
30+
video.hide();
31+
// Start detecting faces from the webcam video
32+
faceMesh.detectStart(video, gotFaces);
33+
// Get the Coordinates for the uv mapping
34+
triangulation = faceMesh.getTriangles();
35+
uvCoords = faceMesh.getUVCoords();
36+
}
37+
38+
function draw() {
39+
translate(-width / 2, -height / 2);
40+
background(51);
41+
42+
for (let i = 0; i < faces.length; i++) {
43+
let face = faces[i];
44+
45+
// Draw all the triangles
46+
noStroke();
47+
texture(uvMapImage);
48+
textureMode(NORMAL);
49+
beginShape(TRIANGLES);
50+
for (let i = 0; i < triangulation.length; i++) {
51+
let indexA = triangulation[i][0];
52+
let indexB = triangulation[i][1];
53+
let indexC = triangulation[i][2];
54+
let a = face.keypoints[indexA];
55+
let b = face.keypoints[indexB];
56+
let c = face.keypoints[indexC];
57+
const uvA = { x: uvCoords[indexA][0], y: uvCoords[indexA][1] };
58+
const uvB = { x: uvCoords[indexB][0], y: uvCoords[indexB][1] };
59+
const uvC = { x: uvCoords[indexC][0], y: uvCoords[indexC][1] };
60+
vertex(a.x, a.y, uvA.x, uvA.y);
61+
vertex(b.x, b.y, uvB.x, uvB.y);
62+
vertex(c.x, c.y, uvC.x, uvC.y);
63+
}
64+
endShape();
65+
}
66+
}
67+
68+
// Callback function for when faceMesh outputs data
69+
function gotFaces(results) {
70+
// Save the output to the faces variable
71+
faces = results;
72+
}

‎src/FaceMesh/index.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import handleArguments from "../utils/handleArguments";
2525
import { mediaReady } from "../utils/imageUtilities";
2626
import handleOptions from "../utils/handleOptions";
2727
import { handleModelName } from "../utils/handleOptions";
28+
import { UV_COORDS } from "./uv_coords";
2829

2930
/**
3031
* User provided options object for FaceMesh. See config schema below for default and available values.
@@ -346,6 +347,25 @@ class FaceMesh {
346347

347348
return triangles;
348349
}
350+
351+
/**
352+
* Returns the pairs of keypoint indices that are connected in the face mesh.
353+
* @returns {number[][]} an array of keypoint indices that form each face contour.
354+
* @public
355+
*/
356+
getConnections() {
357+
return faceLandmarksDetection.util.getAdjacentPairs(
358+
faceLandmarksDetection.SupportedModels.MediaPipeFaceMesh
359+
);
360+
}
361+
362+
/**
363+
* Returns the UV coordinates for the face mesh.
364+
* @returns {number[][]} an array of UV coordinates for the face mesh.
365+
*/
366+
getUVCoords() {
367+
return UV_COORDS;
368+
}
349369
}
350370

351371
/**

0 commit comments

Comments
 (0)