Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
p5.js + p5.dom.js + clmtracker.js
<script src="clmtrackr.js"></script>
<script src="model_pca_20_svm.js"></script>
<script src="p5.js"></script>
<script src="p5.dom.js"></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();
function draw() {
// 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);
<style> body { padding: 0; margin: 0} </style>

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.

Copy link

nmvuong92 commented May 21, 2018

wow thanks!

Copy link

stalgiag commented Oct 29, 2020

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


Copy link

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