// original from Check https://github.com/auduno/clmtrackr

​

var capture;

var tracker

var w = 320;

var h = 240;

​

class SimplifiedFace {

  constructor() {

    this.positions = [

      []

    ];

    this.face = {

      left_eyebrow: [],

      right_eyebrow: [],

      nose: [],

      left_eye: [],

      right_eye: [],

      mouth: []

    };

​

  }

​

  getCenterPoint(_x1, _y1, _x2, _y2) {

    let dist_x = _x2 - _x1;

    let dist_y = _y2 - _y1;

    var return_data = {

      x: (_x1 + dist_x / 2),

      y: (_y1 + dist_y / 2)

    }

    return return_data;

  }

  setFaceTrackerPositions(_positions) {

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

      this.positions[i] = _positions[i].concat();

    }

    this.face_scale = 1.0 / dist(this.positions[15][0], this.positions[15][1], this.positions[53][0], this.positions[53][1]);

    var max_position = {

      x: this.positions[15][0],

      y: this.positions[53][1]

    };

    var min_position = {

      x: this.positions[19][0],

      y: this.positions[20][1]

    };

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

      this.positions[i][0] = this.face_scale * (this.positions[i][0] - min_position.x);

      this.positions[i][1] = this.face_scale * (this.positions[i][1] - min_position.y);

    }

    var center = this.getCenterPoint(this.positions[44][0], this.positions[44][1], this.positions[50][0], this.positions[50][1]);

    this.face = {

      left_eyebrow: [this.positions[15][0], this.positions[15][1], this.positions[18][0], this.positions[18][1]],

      right_eyebrow: [this.positions[19][0], this.positions[19][1], this.positions[22][0], this.positions[22][1]],

      nose: [this.positions[62][0], this.positions[62][1], 0.1],

      left_eye: [this.positions[32][0], this.positions[32][1],

        dist(this.positions[28][0], this.positions[28][1], this.positions[30][0], this.positions[30][1]),

        dist(this.positions[29][0], this.positions[29][1], this.positions[31][0], this.positions[31][1])

      ],

      right_eye: [this.positions[27][0], this.positions[27][1],

        dist(this.positions[23][0], this.positions[23][1], this.positions[25][0], this.positions[25][1]),

        dist(this.positions[24][0], this.positions[24][1], this.positions[26][0], this.positions[26][1])

      ],

      mouth: [center.x, center.y,

        dist(this.positions[44][0], this.positions[44][1], this.positions[50][0], this.positions[50][1]),

        dist(this.positions[60][0], this.positions[60][1], this.positions[53][0], this.positions[53][1])

      ]

    };

​

  }

  draw(_x, _y, _w, _h) {

    // left eyebrow

    line(

      _x + _w*this.face.left_eyebrow[0] ,

      _y + _h*this.face.left_eyebrow[1] ,

      _x + _w*this.face.left_eyebrow[2] ,

      _y + _h*this.face.left_eyebrow[3] );

    // right eyebrow

    line(

      _x + _w*this.face.right_eyebrow[0] ,

      _y + _h*this.face.right_eyebrow[1] ,

      _x + _w*this.face.right_eyebrow[2] ,

      _y + _h*this.face.right_eyebrow[3] );

    // left eye

    ellipse(

      _x + _w*this.face.left_eye[0],

      _y + _h*this.face.left_eye[1], 

      _w*this.face.left_eye[2],

      _h*this.face.left_eye[3]);

    // right eye

    ellipse(

      _x + _w*this.face.right_eye[0],

      _y + _h*this.face.right_eye[1], 

      _w*this.face.right_eye[2],

      _h*this.face.right_eye[3]);

    // nose

    ellipse(

      _x + _w*this.face.nose[0],

      _y + _h*this.face.nose[1], 

      _w*this.face.nose[2],

      _h*this.face.nose[2]);

    // mouth

    ellipse(

      _x + _w*this.face.mouth[0],

      _y + _h*this.face.mouth[1], 

      _w*this.face.mouth[2],

      _h*this.face.mouth[3]);

  }

​

}

​

var simplified_face;

​

function setup() {

  capture = createCapture({

    audio: false,

    video: {

            deviceId: 'f9627ee514a6db304d8307e3d881458cd8f09ce82cb8cedc2abae198e4461c34',

//      deviceId: '8a2194e73d62072bd00c0d6da9a69e475f146af78e84b96aeb4e4deed91d6b9d',

      width: w,

      height: h,

      frameRate:10

    }

  }, function() {

    console.log('capture ready.')

  });

​

  capture.elt.setAttribute('playsinline', '');

  createCanvas(w, h);

  capture.size(w, h);

  capture.hide();

​

  tracker = new clm.tracker();

  tracker.init();

  tracker.start(capture.elt);

​

  simplified_face = new SimplifiedFace();

}

​

var flg_show_camera = true;

​

function draw() {

  background(100);

  if (flg_show_camera) image(capture, 0, 0, w, h);

  var positions_original = tracker.getCurrentPosition();

  var positions = [

    []

  ];

​

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

    positions[i] = positions_original[i].concat();

  }

​

​

  noFill();

  stroke(255);

  strokeWeight(2.0);

​

  if (positions.length == 71) {

    simplified_face.setFaceTrackerPositions(positions_original);

    simplified_face.draw(mouseX, mouseY, 200,200);

  }

​

​

​

​

}

​

​

function keyPressed() {

  flg_show_camera = !flg_show_camera;

}