Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
p5.js + p5.dom.js + clmtracker.js
<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>

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.

You will need to run this with a local server, see this tutorial for help.

Or download an example here.

@nmvuong92

This comment has been minimized.

Copy link

commented May 21, 2018

wow thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.