FaceTracking with clmtrackr and P5JS

From Digipool-Wiki
Jump to: navigation, search

Facetracking-p5js-clmtrackr.jpg


Clmtrackr-face.jpeg
Clmtrackr-facemodel numbering.png

clmtrackr by Audun Mathias Øygard - LINK

  • clmtrackr is a open and free to use JavaScript Library for facetraking, which can be used with P5JS.
  • Tutorial how to use clmtrackr with P5JS by Lauren McCarthy - LINK


Instructions

  • Place library files in your sketch folder
  • Include the two files in the HTML header code with this two lines
    • <script src="clmtrackr.js"></script>
    • <script src="model_pca_20_svm.js"></script>
  • Alternatively, you can download the entire example as a package: Clmtrackr-p5js.zip
  • Have a look at the reference to edit your own code! - Reference


Run clmtrackr on the P5JS-Online-Editor

The easiest way to use clmtrackr is to use it in the p5js online editor.

  • Login to your own p5*js account to enable file upload. (top right)
  • SERVER OVER HTTPS must be enabled to access the camera
    • Click on the gearwheel settings icon top right
    • Go to SKETCH SETTINGS
    • Select SERVER OVER HTTPS


Run clmtrackr on your server

Attention! If you want to work on your own server, you need a domain that is protected by SSL in order to be able to access the camera.


P5JS Code


var val = 5;
var positions;

function setup() {

  // setup camera capture
  var videoInput = createCapture();
  videoInput.size(400, 300);
  videoInput.position(0, 0);
  
  // setup canvas
  var cnv = createCanvas(400, 400);
  cnv.position(0, 0);

  // setup tracker
  ctracker = new clm.tracker();
  ctracker.init(pModel);
  ctracker.start(videoInput.elt);
  
  fill(255);
}

function draw() {
  clear();
  
  // get array of face marker positions [x, y] format
  positions = ctracker.getCurrentPosition();
  
  for (var i=0; i<positions.length; i++) {
    
    // draw ellipse at each position point
    ellipse(positions[i][0], positions[i][1], val, val);
  }
}


HTML Code


<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>
    <script src="model_pca_20_svm.js"></script>
    <script src="clmtrackr.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>