Skip to content

Instantly share code, notes, and snippets.

@petecleary
Created October 17, 2017 04:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save petecleary/798859652de5b824d0efbd00334247ba to your computer and use it in GitHub Desktop.
Save petecleary/798859652de5b824d0efbd00334247ba to your computer and use it in GitHub Desktop.
Head tracking using Tracking.Js - this example is linked into a synth made in tone.js - for more details see https://www.piandmash.com/experiments/head-tracking-synth/
window.onload = function () {
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var tracker = new tracking.ObjectTracker('face');
try{
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
tracking.track('#video', tracker, { camera: true });
$("imgSad").hide();
}
catch(err) {
}
tracker.on('track', function(event) {
context.clearRect(0, 0, canvas.width, canvas.height);
//I am running a counter for the specified use of this script, remove or alter accordingly
counter += 1;
console.log(counter);
if (counter > 75) {
//specific code to trigger a connected synth script - change for your use
synth.triggerRelease();
}
event.data.forEach(function (rect) {
context.strokeStyle = '#a64ceb';
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
context.font = '11px Helvetica';
context.fillStyle = "#fff";
context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
if (playing) {
var averageX = rect.x + (rect.width / 2);
var averageY = rect.y + (rect.height / 2);
var xposPercentage = (100 / video.videoWidth) * averageX;
var yposPercentage = (100 / video.videoHeight) * averageY;
var valX = parseInt(((synthNotes.length) / 100) * xposPercentage);
var valY = ((2 - 0) / 100) * yposPercentage;
//specific code to trigger a connected synth script - change for your use
synth.triggerAttack(synthNotes[valX]);
synth.vibratoAmount.value = valY;
//specific code to trigger a connected synth script - change for your use
}
counter = 0;
});
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment