Created by Winnie Soon and Geoff Cox, from Aesthetic Programming, https://aesthetic-programming.net/pages/4-data-capture.html#source-code-43307

​

check:

1. Face tracking library: https://github.com/auduno/clmtrackr

2. p5js + clmtracker.js: https://gist.github.com/lmccart/2273a047874939ad8ad1

*/

​

​

let ctracker;

let capture;

​

function setup() {

  createCanvas(640, 480);

  //web cam capture

  capture = createCapture(VIDEO);

  capture.size(640, 480);

  capture.hide();

​

  //setup face tracker

  ctracker = new clm.tracker();

  ctracker.init(pModel);

  ctracker.start(capture.elt);

​

}

​

function draw() {

  //draw the captured video on a screen with the image filter

  image(capture, 0,0, 640, 480);

  filter(INVERT);

​

  let positions = ctracker.getCurrentPosition();

  //check the availability of web cam tracking

  if (positions.length) {

     //point 60 is the mouth area

    //button.position(positions[23][0]-20, positions[23][1]);

    /*loop through all major points of a face

    (see: https://www.auduno.com/clmtrackr/docs/reference.html)*/

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

       noStroke();

       //color with alpha value

       fill(map(positions[i][0], 0, width, 100, 255), 0, 0, 120);

       //draw ellipse at each position point

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

    }

  }

}

​