Difference between revisions of "FaceTracking with clmtrackr and P5JS"
From Digipool-Wiki
Line 29: | Line 29: | ||
<br> | <br> | ||
+ | |||
+ | == P5JS Code == | ||
+ | |||
+ | <pre> | ||
+ | |||
+ | var val = 5; | ||
+ | var positions; | ||
+ | |||
+ | function setup() { | ||
+ | |||
+ | // setup camera capture | ||
+ | var videoInput = createCapture(); | ||
+ | videoInput.size(400, 300); | ||
+ | videoInput.position(0, 0); | ||
+ | |||
+ | // setup canvas | ||
+ | var cnv = createCanvas(400, 400); | ||
+ | cnv.position(0, 0); | ||
+ | |||
+ | // setup tracker | ||
+ | ctracker = new clm.tracker(); | ||
+ | ctracker.init(pModel); | ||
+ | ctracker.start(videoInput.elt); | ||
+ | |||
+ | fill(255); | ||
+ | } | ||
+ | |||
+ | function draw() { | ||
+ | clear(); | ||
+ | |||
+ | // get array of face marker positions [x, y] format | ||
+ | positions = ctracker.getCurrentPosition(); | ||
+ | |||
+ | for (var i=0; i<positions.length; i++) { | ||
+ | |||
+ | // draw ellipse at each position point | ||
+ | ellipse(positions[i][0], positions[i][1], val, val); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </pre> |
Revision as of 23:01, 20 December 2017
clmtrackr by Audun Mathias Øygard - LINK
- clmtrackr is a open and free to use JavaScript Library for facetraking, which can be used with P5JS.
- Tutorial how to use clmtrackr with P5JS by Lauren McCarthy - LINK
Ressourcen
- Example: Clmtrackr-p5js.zip
- Reference
Run clmtrackr on the P5JS-Online-Editor
The easiest way to use clmtrackr is to use it in the p5js online editor.
- SERVER OVER HTTPS must be enabled to access the camera
- Click on the gearwheel settings icon top right
- Go to SKETCH SETTINGS
- Select SERVER OVER HTTPS
Run clmtrackr on your server
Attention! If you want to work on your own server, you need a domain that is protected by SSL in order to be able to access the camera.
P5JS Code
var val = 5; var positions; function setup() { // setup camera capture var videoInput = createCapture(); videoInput.size(400, 300); videoInput.position(0, 0); // setup canvas var cnv = createCanvas(400, 400); cnv.position(0, 0); // setup tracker ctracker = new clm.tracker(); ctracker.init(pModel); ctracker.start(videoInput.elt); fill(255); } function draw() { clear(); // get array of face marker positions [x, y] format positions = ctracker.getCurrentPosition(); for (var i=0; i<positions.length; i++) { // draw ellipse at each position point ellipse(positions[i][0], positions[i][1], val, val); } }