Difference between revisions of "FaceTracking with clmtrackr and P5JS"
From Digipool-Wiki
(→Run clmtrackr on the P5JS-Online-Editor) |
|||
(24 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
+ | [[File:Facetracking-p5js-clmtrackr.jpg|600px]] | ||
+ | |||
+ | <br> | ||
+ | |||
[[File:Clmtrackr-face.jpeg|right]] [[File:Clmtrackr-facemodel numbering.png|right]] | [[File:Clmtrackr-face.jpeg|right]] [[File:Clmtrackr-facemodel numbering.png|right]] | ||
− | '''clmtrackr''' by [https://www.auduno.com/ Audun Mathias Øygard] | + | '''clmtrackr''' by [https://www.auduno.com/ Audun Mathias Øygard] - [https://github.com/auduno/clmtrackr LINK] |
− | https://github.com/auduno/clmtrackr | + | |
+ | * '''clmtrackr''' is a open and free to use JavaScript Library for facetraking, which can be used with [https://p5js.org/ P5JS]. | ||
+ | * Tutorial how to use '''clmtrackr with P5JS''' by [http://lauren-mccarthy.com/ Lauren McCarthy] - [https://gist.github.com/lmccart/2273a047874939ad8ad1 LINK] | ||
+ | |||
+ | <br> | ||
+ | |||
+ | == Instructions == | ||
+ | |||
+ | * Place library files in your sketch folder | ||
+ | ** File: [https://github.com/auduno/clmtrackr/raw/dev/build/clmtrackr.js clmtrackr.js] | ||
+ | ** File: [https://github.com/auduno/clmtrackr/blob/gh-pages/models/model_pca_20_svm.js model_pca_20_svm.js] | ||
+ | * Include the two files in the HTML header code with this two lines | ||
+ | ** <script src="clmtrackr.js"></script> | ||
+ | ** <script src="model_pca_20_svm.js"></script> | ||
+ | * Alternatively, you can download the entire example as a package: [[Media:Clmtrackr-p5js.zip|Clmtrackr-p5js.zip]] | ||
+ | * Have a look at the reference to edit your own code! - [https://www.auduno.com/clmtrackr/docs/reference.html Reference] | ||
+ | |||
+ | <br> | ||
+ | |||
+ | == Run clmtrackr on the P5JS-Online-Editor == | ||
+ | |||
+ | The easiest way to use clmtrackr is to use it in the p5js online editor. | ||
+ | * Login to your own p5*js account to enable file upload. (top right) | ||
+ | * 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 | ||
+ | |||
+ | <br> | ||
+ | |||
+ | == 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. | ||
+ | |||
+ | <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> | ||
+ | |||
+ | <br> | ||
+ | |||
+ | == HTML Code == | ||
+ | |||
+ | <pre> | ||
+ | |||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script> | ||
+ | <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script> | ||
+ | <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script> | ||
+ | <script src="model_pca_20_svm.js"></script> | ||
+ | <script src="clmtrackr.js"></script> | ||
+ | <link rel="stylesheet" type="text/css" href="style.css"> | ||
+ | <meta charset="utf-8" /> | ||
+ | </head> | ||
+ | <body> | ||
+ | <script src="sketch.js"></script> | ||
+ | </body> | ||
+ | </html> | ||
+ | |||
+ | </pre> |
Latest revision as of 16:00, 22 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
Contents
Instructions
- Place library files in your sketch folder
- File: clmtrackr.js
- File: model_pca_20_svm.js
- Include the two files in the HTML header code with this two lines
- <script src="clmtrackr.js"></script>
- <script src="model_pca_20_svm.js"></script>
- Alternatively, you can download the entire example as a package: Clmtrackr-p5js.zip
- Have a look at the reference to edit your own code! - Reference
Run clmtrackr on the P5JS-Online-Editor
The easiest way to use clmtrackr is to use it in the p5js online editor.
- Login to your own p5*js account to enable file upload. (top right)
- 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); } }
HTML Code
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script> <script src="model_pca_20_svm.js"></script> <script src="clmtrackr.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <script src="sketch.js"></script> </body> </html>