xxxxxxxxxx
104
// Magritte webcam
// Adapted from the Face-Api examples here:
// https://learn.ml5js.org/#/reference/face-api
// Particularly https://editor.p5js.org/ml5/sketches/FaceApi_Video_Landmarks
let faceapi;
let video;
let detections;
let apple;
let cx;
let cy;
let sc;
let detected = -1;
// by default all options are set to true
const detection_options = {
withLandmarks: true,
withDescriptors: false,
};
function preload() {
// https://www.rawpixel.com/image/6037223/photo-image-background-public-domain-green
apple = loadImage("apple.png");
}
function setup() {
createCanvas(640, 480);
// load up your video
video = createCapture(VIDEO);
video.size(width, height);
video.hide();
faceapi = ml5.faceApi(video, detection_options, modelReady);
}
function modelReady() {
faceapi.detect(gotResults);
}
function gotResults(err, result) {
if (err) {
console.log(err);
return;
}
detections = result;
if (detections.length > 0) {
const r = detections[0].alignedRect;
let w = r._box._width;
let h = r._box._height;
let cur_cx = r._box._x + w / 2;
let cur_cy = r._box._y + h / 2;
let cur_sc = min(w / apple.width, h / apple.height);
if (detected >= 0) {
cx = lerp(cx, cur_cx, 0.25);
cy = lerp(cy, cur_cy, 0.25);
sc = lerp(sc, cur_sc, 0.25);
} else {
cx = cur_cx;
cy = cur_cy;
sc = cur_sc;
}
detected = frameCount;
}
faceapi.detect(gotResults);
}
function draw() {
image(video, 0, 0, width, height);
if (detected >= 0 && frameCount - detected < 100) {
imageMode(CENTER);
image(apple, cx, cy, sc * apple.width, sc * apple.height);
imageMode(CORNER);
} else {
detected = -1;
}
}
function drawBox(detections) {
for (let i = 0; i < detections.length; i++) {
const alignedRect = detections[i].alignedRect;
const x = alignedRect._box._x;
const y = alignedRect._box._y;
const boxWidth = alignedRect._box._width;
const boxHeight = alignedRect._box._height;
let sc = min(boxWidth / apple.width, boxHeight / apple.height);
imageMode(CENTER);
image(
apple,
x + boxWidth / 2,
y + boxHeight / 2,
apple.width * sc,
apple.height * sc
);
imageMode(CORNER);
}
}