FaceTracking with clmtrackr and P5JS
From Digipool-Wiki
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>
