xxxxxxxxxx
77
//See this alternative as well by Sabrina: https://glitch.com/~p5js-mediapipe-blazepose
var capture
var blazeFaceModel;
var predictions;
// make preload function asynchronous to await the blazeface.load()
async function preload() {
blazeFaceModel = await blazeface.load();
}
function setup() {
createCanvas(640, 480);
capture = createCapture(VIDEO);
capture.hide();
}
// asynchronous function to load the predictions
async function loadPredictions() {
if(capture.loadedmetadata) {
predictions = await blazeFaceModel.estimateFaces(capture.elt);
}
}
function draw() {
background(255);
image(capture, 0, 0);
text(frameRate(), 10, 10)
loadPredictions(); // =>loads the predictions into the predictions array
if (predictions != null && predictions.length > 0) {
/*
`predictions` is an array of objects describing each detected face, for example:
[
{
topLeft: [232.28, 145.26],
bottomRight: [449.75, 308.36],
probability: [0.998],
landmarks: [
[295.13, 177.64], // right eye
[382.32, 175.56], // left eye
[341.18, 205.03], // nose
[345.12, 250.61], // mouth
[252.76, 211.37], // right ear
[431.20, 204.93] // left ear
]
}
]
*/
for (let i = 0; i < predictions.length; i++) {
const start = predictions[i].topLeft;
const end = predictions[i].bottomRight;
const keypoints = predictions[i].landmarks;
const faceSize = [end[0] - start[0], end[1] - start[1]];
// Render a rectangle over each detected face.
fill(255, 100);
rect(start[0], start[1], faceSize[0], faceSize[1]);
ellipse(keypoints[0][0], keypoints[0][1], 20, 20); //right eye
ellipse(keypoints[1][0], keypoints[1][1], 20, 20); //left eye
ellipse(keypoints[2][0], keypoints[2][1], 20, 20); //nose
ellipse(keypoints[3][0], keypoints[3][1], 20, 20); //mouth
ellipse(keypoints[4][0], keypoints[4][1], 20, 20); //right ear
ellipse(keypoints[5][0], keypoints[5][1], 20, 20); //left ear
}
}
}