//https://openprocessing.org/sketch/1845926

let myTracker;

​

// Which data do you want to subscribe to? Hands, face, body?

let bComputeFace = true;

let bComputeHands = false;

let bComputeBody = false;

​

// Named points on the faces and hands.

// Don't delete or change these variable names.

// These are formatted as p5.Vector objects;

// See https://p5js.org/reference/#/p5.Vector

let eyeLeftPt, eyeRightPt;

let browLeftPt, browRightPt;

let nosePt, chinPt, foreheadPt;

let mouthLeftPt, mouthRightPt, mouthTopPt, mouthBottomPt;

let fingerIndexPt1,

  fingerMiddlePt1,

  fingerRingPt1,

  fingerPinkyPt1,

  thumbPt1,

  palmPt1;

let fingerIndexPt2,

  fingerMiddlePt2,

  fingerRingPt2,

  fingerPinkyPt2,

  thumbPt2,

  palmPt2;

let headPt, shoulderLeftPt, shoulderRightPt, elbowLeftPt, elbowRightPt;

let wristLeftPt, wristRightPt, hipLeftPt, hipRightPt;

let kneeLeftPt, kneeRightPt, footLeftPt, footRightPt;

​

//variable to control shape

let posX, posY;

let w, h;

let mouthScale = 1.0; 

//------------------------------------------

function setup() {

  // The canvas should match aspect ratio of your camera:

  createCanvas(640, 480);

  myTracker = new HandsAndFaceWrapper(

    bComputeFace,

    bComputeHands,

    bComputeBody

  );

}

​

//------------------------------------------

function draw() {

  background(255);

  myTracker.update();

  myTracker.drawVideoBackground(true);

  drawFacePoints();

​

  //do something with facial features.

  //look below for how these variables are calculated

  fill(200,250,10,100)

  rectMode(CENTER);

  rect(posX,posY - (h/2),w,h)

}

​

function calculateHead(chinPtX, chinPtY,foreheadPtX,foreheadPtY,mouthLeftX, mouthLeftY, mouthRightX, mouthRightY ) {

  // Compute the head size, head angle, mouth width, etc.

  var headSize = dist(chinPtX, chinPtY, foreheadPtX, foreheadPtY);

  var headAngle =

    HALF_PI + atan2(foreheadPtY - chinPtY, foreheadPtX - chinPtX);

  var fx = (chinPtX + foreheadPtX) / 2;

  var fy = (chinPtY + foreheadPtY) / 2;

​

  var mouthWidth = dist(

    mouthLeftX,

    mouthLeftY,

    mouthRightX,

    mouthRightY

  );

  var mouthFraction = mouthWidth / headSize;

  mouthScale =

    0.8 * mouthScale + 0.2 * map(mouthFraction, 0.25, 0.35, 1.0, 1.8, true);

​

  //control shape W, H with facial feature

  w = headSize * mouthScale;

  h = headSize * 1.25;

}

​

function drawFacePoints() {

  if (bComputeFace && myTracker.getDoesFaceExist()) {

    noStroke();

    fill("red");

    circle(nosePt.x, nosePt.y, 10);

    circle(eyeLeftPt.x, eyeLeftPt.y, 10);

    circle(eyeRightPt.x, eyeRightPt.y, 10);

    circle(mouthLeftPt.x, mouthLeftPt.y, 10);

    circle(mouthRightPt.x, mouthRightPt.y, 10);

    circle(mouthTopPt.x, mouthTopPt.y, 10);

    circle(mouthBottomPt.x, mouthBottomPt.y, 10);

    circle(chinPt.x, chinPt.y, 10);

    circle(browLeftPt.x, browLeftPt.y, 10);

    circle(browRightPt.x, browRightPt.y, 10);

    circle(foreheadPt.x, foreheadPt.y, 10);

​

    //control shape X, Y with facial feature

    posX = chinPt.x;

    posY = chinPt.y;

    calculateHead(chinPt.x, chinPt.y,foreheadPt.x, foreheadPt.y,mouthLeftPt.x, mouthLeftPt.y,mouthRightPt.x, mouthRightPt.y);

  }

}

​