xxxxxxxxxx
let faceapi;
let video;
let detections;
let pplCount = 0;
// font
let RedHatDisplay;
// particle system
let physics;
var PHYS_GRAVITY = 0.1;
var PHYS_DRAG = 0.01;
// by default all options are set to true
const detection_options = {
withLandmarks: true,
withDescriptors: false,
}
function setup() {
createCanvas(360 *2, 270 *2);
textAlign(CENTER);
// font
textFont(RedHatDisplay);
// particle system
physics = new ParticleSystem(PHYS_GRAVITY, PHYS_DRAG);
// load up your video
video = createCapture(VIDEO);
video.size(width, height);
video.hide(); // Hide the video element, and just show the canvas
faceapi = ml5.faceApi(video, detection_options, modelReady);
}
function preload(){
img = loadImage('smiley_new.png');
Emoji01 = loadImage('Emoji-02.png');
RedHatDisplay = loadFont('RedHatDisplay-Black.ttf');
}
function modelReady() {
console.log('ready!');
console.log(faceapi);
faceapi.detect(gotResults);
}
function gotResults(err, result) {
if (err) {
console.log(err);
return
}
detections = result;
}
function draw() {
background(255);
image(video, 0, 0, width, height);
fill(255);
stroke(200);
strokeWeight(1);
noStroke();
textSize(15);
if (detections) {
if (detections.length > 0) {
// for = do it for every face detected
for (let i = 0; i < detections.length; i++) {
const eyeLeft = [detections[i].parts.leftEye[0]._x, detections[i].parts.leftEye[0]._y];
const eyeRight = [detections[i].parts.rightEye[0]._x, detections[i].parts.rightEye[0]._y];
// get face center x & y
const faceCenter = [detections[i].parts.nose[0]._x, detections[i].parts.nose[0]._y];
//text("center", faceCenter[0], faceCenter[1]);
// get mouth landmarks
const mouth = detections[i].parts.mouth;
let mouthL = [mouth[0]._x, mouth[0]._y]; // left
let mouthR = [mouth[6]._x, mouth[6]._y]; // right
let mouthT = [mouth[3]._x, mouth[3]._y]; // center top
let mouthB = [mouth[9]._x, mouth[9]._y]; // center bottom
// draw important mouth landmarks
//text("left", mouthL[0], mouthL[1]);
//text("right", mouthR[0], mouthR[1]);
//text("top", mouthT[0], mouthT[1]);
//text("bottom", mouthB[0], mouthB[1]);
if (mouthL[1] <= mouthT[1] + 3 && mouthR[1] <= mouthT[1] + 3) {
// person smiling
// particles start
push();
translate(0, -150);
physics.tick();
for (i=0; i<physics.particles.length; i++) {
let particle = physics.particles[i];
//ellipse(particle.position.x, particle.position.y, 20, 20);
let c = map(particle.position.y, 0, faceCenter[1], 0, 255);
tint(255, c);
image(Emoji01, particle.position.x, particle.position.y, 40, 40);
noTint();
}
// Wasserfall
//let p = physics.makeParticle(1, width/2, height/2, 0.0);
// Ablenkungskraft in x-Richtung
//p.velocity = createVector(random(-1, 1), 0);
// Alle Richtungen
let p = physics.makeParticle(-0.1, faceCenter[0], faceCenter[1], 0.25);
// Ablenkungskraft in x-Richtung
//p.velocity = createVector(random(-1, 1), random(1, -1));
// particles end
pop();
} else {
censor(mouthB, eyeLeft, eyeRight);
if (detections.length === 1) {
// one person, not smiling
push();
//background(0);
//image(img, width/2, height/2,270,270);
textSize(40);
textAlign(CENTER,CENTER);
fill(0);
text("Bitte lächeln!", width/2, 50);
pop();
} else {
// multiple person, one not smiling
push();
textSize(40);
textAlign(CENTER,CENTER);
fill(0);
text("Lächel auch mal!", width/2, 50);
pop();
}
}
}
} else {
// no people
push();
//background(0);
//image(img, width/2, height/2,270,270);
textSize(40);
textAlign(CENTER,CENTER);
fill(0);
text("Komm näher!", width/2, 50);
pop();
}
fill(20);
pplCount = detections.length;
text(pplCount, 20, 20);
}
faceapi.detect(gotResults);
}
function censor(mouthB, eyeLeft, eyeRight) {
var xleftEye = eyeLeft[0];
var xrightEye = eyeRight[0];
var yEye = eyeLeft[1];
var ymouth = mouthB[1];
let d = dist(eyeLeft[0], eyeLeft[1], mouthB[0], mouthB[1]);
//only take the space of the face to do censoring
push();
translate((eyeLeft[0] - (d/2)),(eyeLeft[1] - (d-(d/4))));
for (var y = 0; y < (2*d); y+= 10) {
for (var x = 0; x < (2*d); x+= 10) {
noStroke();
fill( random(100, 200));
//square(x, y, 10);
}
}
pop();
image(Emoji01, (eyeLeft[0] - (d/2)),(eyeLeft[1] - (d-(d/4))), d*2, d*2);
}