| <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.
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!