This example uses clmtracker along with p5.js and p5.dom.js. Make sure you have version 0.1.5 or higher of p5.dom.js - you can grab it [here](https://github.com/lmccart/p5.js/blob/master/lib/addons/p5.dom.js).
You will need to run this with a local server, see this [tutorial](https://github.com/lmccart/p5.js/wiki/Local-server) for help.
* https://github.com/auduno/clmtrackr - download of clmtrackr.js and models.
* http://p5js.org - download of p5.js and p5.dom.js.
__Or download an example [here](http://cl.ly/2g171C1n1p1H).__
<html>
<head>
<script src="clmtrackr.js"></script>
<script src="model_pca_20_svm.js"></script>
<script src="p5.js"></script>
<script src="p5.dom.js"></script>
<script>
var ctracker;
function setup() {
// setup camera capture
var videoInput = createCapture();
videoInput.size(400, 300);
videoInput.position(0, 0);
// setup canvas
var cnv = createCanvas(400, 300);
cnv.position(0, 0);
// setup tracker
ctracker = new clm.tracker();
ctracker.init(pModel);
ctracker.start(videoInput.elt);
noStroke();
}
function draw() {
clear();
// get array of face marker positions [x, y] format
var positions = ctracker.getCurrentPosition();
for (var i=0; i<positions.length; i++) {
// set the color of the ellipse based on position on screen
fill(map(positions[i][0], width*0.33, width*0.66, 0, 255), map(positions[i][1], height*0.33, height*0.66, 0, 255), 255);
// draw ellipse at each position point
ellipse(positions[i][0], positions[i][1], 8, 8);
}
}
</script>
<style> body { padding: 0; margin: 0} </style>
</head>
<body>
</body>
</html>