FaceTracking with clmtrackr and P5JS





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
 * File: clmtrackr.js
 * File: model_pca_20_svm.js
 * Include the two files in the HTML header code with this two lines
 * 
 * 
 * Alternatively, you can download the entire example as a package: [[Media:Clmtrackr-p5js.zip|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        