happy mirror 2

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);

}