Difference between revisions of "FaceTracking with clmtrackr and P5JS"

From Digipool-Wiki
Jump to: navigation, search
(→‎Run clmtrackr on the P5JS-Online-Editor)
 
(23 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>
  
−
clmtrackr is a open free to use JavaScript Library for facetraking, witch ca be used with P5JS.
+
<!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>
  
−
Tutorial how to use clmtrackr with P5JS by Lauren McCarthy - [https://gist.github.com/lmccart/2273a047874939ad8ad1 LINK]
+
</pre>

Latest revision as of 16:00, 22 December 2017

Facetracking-p5js-clmtrackr.jpg


Clmtrackr-face.jpeg
Clmtrackr-facemodel numbering.png

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


Instructions

  • Place library files in your sketch folder
  • 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>
Retrieved from "http://www.digipool.info/m/index.php?title=FaceTracking_with_clmtrackr_and_P5JS&oldid=90639"