nucliweb
11/8/2014 - 1:35 AM

p5.js + p5.dom.js + clmtracker.js

p5.js + p5.dom.js + clmtracker.js

gistfile2.md
content_copyfile_download
  • Rendered
  • Source

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.

gistfile1.html
content_copyfile_download
<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>