Skip to content

Instantly share code, notes, and snippets.

@lmccart
Last active February 18, 2024 21:57
Show Gist options
  • Save lmccart/2273a047874939ad8ad1 to your computer and use it in GitHub Desktop.
Save lmccart/2273a047874939ad8ad1 to your computer and use it in GitHub Desktop.
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
Copy link

wow thanks!

@stalgiag
Copy link

If anyone ended up here in 2020 (like me), this fork has a few updated lines to work with the latest p5 and clm.

Thanks!

@lmccart
Copy link
Author

lmccart commented Oct 29, 2020

thanks @stalgiag!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment