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="p5.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.style('z-index', '9999');
cnv.position(0, 0);
// setup tracker
ctracker = new clm.tracker();
ctracker.init();
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>

Updated to work with p5 1.1.9 and clmtrackr 1.1.2. Just few lines updated:

  • no arg to ctracker.init
  • no model loaded (included in clmtrackr now)
  • no p5.dom (included in p5 now)
  • z-index style brought to front for p5 canvas

Example here

Or download an example here.

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