let clm_tracker

let vid

let positions

​

let initialMouthSize = -1000

let initialEyeSize = -1000

​

​

let mySound;

function preload() {

  soundFormats('mp3', 'ogg');

  mySound = loadSound('meow.mp3');

  catnose = loadImage("cat.png");

}

​

function setup() {

​

  vid = createCapture(VIDEO);

  vid.size(canvasWidth, canvasHeight);

  vid.style("z-index: 1");

  vid.position(0, 0);

  //vid.hide()

    // setup canvas

  cnv = createCanvas(canvasWidth, canvasHeight);

  cnv.position(0, 0);

  cnv.style("z-index: 2");

​

  // setup tracker

  clm_tracker = new clm.tracker();

  clm_tracker.init(pModel);

  clm_tracker.start(vid.elt);

​

  noStroke()

}

​

function draw() {

clear();

    //get the detection score, or how well the face is detected (from 0 to 1)

  const detectionScore = clm_tracker.getScore();

​

  if (detectionScore > 0) {

    // get array of face marker positions [x, y] format

    positions = clm_tracker.getCurrentPosition();

    /*

    You can find all the points here

    https://camo.githubusercontent.com/e967f92904c8ef84228b8950d3a278efb895b9d2/68747470733a2f2f617564756e6f2e6769746875622e696f2f636c6d747261636b722f6578616d706c65732f6d656469612f666163656d6f64656c5f6e756d626572696e675f6e65775f736d616c6c2e706e67

    */

 if(positions){

    const leftEyeX = positions[32][0];

    const leftEyeY = positions[32][1];

​

    const rightEyeX = positions[27][0];

    const rightEyeY = positions[27][1];

​

    const noseX = positions[62][0];

    const noseY = positions[62][1];

    const faceLeftX = positions[1][0];

    const faceLeftY = positions[1][1];

    const faceRightX = positions[13][0];

    const faceRightY = positions[13][1];

   const browLeftX = positions[20][0];

   const browLeftY = positions[20][1];

   const browRightX = positions[17][0];

   const browRightY = positions[17][1];

​

   // const whiskerLeftStartX = positions[44][0]

   // const whiskerLeftStartY = positions[44][1]

   //  const whiskerRightStartX = positions[50][0]

   // const whiskerRightStartY = positions[50][1]

    //the distance between the left point and the rightmost point is a good indication

    //of the size of the face or proximity to the camera and I can use it to scale my graphic elements

    const sz = dist(faceLeftX,faceLeftY, faceRightX, faceRightY);

    //draw the face

    //fill(220,0,220,200);

    //ellipse(noseX, noseY, sz, sz);

   fill(200, 200, 200, 100) 

   // rect(faceLeftX - sz/10, faceLeftY - sz/2, sz, sz, 10, 10, 10, 10)   

   const leftEyeSz =  leftEyeY - browLeftY;

   if (initialEyeSize == -1000) {

     initialEyeSize = leftEyeSz

   }

   let pupil_size = 20*(1-(leftEyeSz-initialEyeSize)/(initialEyeSize))

   if (pupil_size < 8) {

     pupil_size = 8 

   } 

   if (pupil_size > 20) {

     pupil_size = 20

   }

    //draw the eyes

     fill(255,255,255,200)

    ellipse(rightEyeX, rightEyeY, sz/5, sz/10);

    ellipse(leftEyeX, leftEyeY, sz/5, sz/10);

    fill(60, 60, 60, 220);

    ellipse(rightEyeX, rightEyeY, sz/pupil_size, sz/10);

    ellipse(leftEyeX, leftEyeY, sz/pupil_size, sz/10);

    var noseSize = sz/4

    //draw a nose

    //fill(20, 0, 220, 220);

   // ellipse(noseX, noseY, noseSize, noseSize);

   image(catnose,noseX-155,noseY-130, 350,350);

   const topMouthX = positions[48][0]; 

   const topMouthY = positions[48][0]; 

   const bottomMouthX = positions[53][0]; 

   const bottomMouthY = positions[53][1]; 

   if (initialMouthSize <= -1000) { 

     initialMouthSize = topMouthY-bottomMouthY; 

   }

  console.log(abs((topMouthY-bottomMouthY)/(initialMouthSize)))

   if (abs((topMouthY-bottomMouthY)/(initialMouthSize)) < 0.75) {

     if(!mySound.isPlaying()) {

       mySound.play();

     }

   } 

   //whiskers

   //drawWhiskersLeft(positions[44], sz)

   // drawWhiskersRight(positions[50], sz)

​

 }

  }

      /////When you click the mouse this draws all the detected positions

    if(mouseIsPressed) {

    for (var i = 0; i < positions.length; i++) {

      // set the color of the ellipse based on position on screen

      fill(255, 0, 0);

      // draw ellipse at each position point

      ellipse(positions[i][0], positions[i][1], 4, 4);

      text(i, positions[i][0], positions[i][1]);

    }

    }

}

​

function drawWhiskersLeft([x, y], sz){

  push()

     stroke(0)

   strokeWeight(1)

   line(x, y, x - sz/4, y)

  pop()

}

​

function drawWhiskersRight([x, y], sz){

  push()

     stroke(0)

   strokeWeight(1)

   line(x, y, x + sz/4, y)

  pop()

}