Separation tracking(face) / tracking(eyes+mouth
This commit is contained in:
parent
21a153b02c
commit
8909d5f86d
|
@ -34,14 +34,17 @@
|
||||||
var process = function(){};
|
var process = function(){};
|
||||||
var exec = false;
|
var exec = false;
|
||||||
var last;
|
var last;
|
||||||
var trackerTask;
|
var featureTrackerTask;
|
||||||
var trackerTask;
|
var faceTrackerTask;
|
||||||
|
var trackerCallback;
|
||||||
|
|
||||||
var Controller,
|
var Controller,
|
||||||
init,
|
init,
|
||||||
zones,
|
featureZones,
|
||||||
|
faceZones,
|
||||||
track,
|
track,
|
||||||
tracker,
|
featureTracker,
|
||||||
|
faceTracker,
|
||||||
initialized = false;
|
initialized = false;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -61,54 +64,62 @@ ControllerRememberer.fetch(function(loaded_data){
|
||||||
/* (1) Image par défaut */
|
/* (1) Image par défaut */
|
||||||
this.src = 'front/male/1.jpg';
|
this.src = 'front/male/1.jpg';
|
||||||
|
|
||||||
/* (2) Attachement de dat.GUI */
|
/* (2) Initialization */
|
||||||
|
last = this.src;
|
||||||
|
initialized = true;
|
||||||
|
|
||||||
|
/* (3) Attachment to dat.GUI */
|
||||||
Controller.addFolder('Source Picture');
|
Controller.addFolder('Source Picture');
|
||||||
Controller.remember(this);
|
Controller.remember(this);
|
||||||
Controller.add(this, 'src', this._images).listen();
|
Controller.add(this, 'src', this._images).listen();
|
||||||
|
|
||||||
last = this.src;
|
|
||||||
|
|
||||||
initialized = true;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/* (2) Gestion de tracking.js */
|
/* (2) Gestion de tracking.js */
|
||||||
zones;
|
featureZones = [];
|
||||||
|
faceZones = [];
|
||||||
|
|
||||||
/* (3) Gestion du track de l'image */
|
/* (3) Gestion du track de l'image */
|
||||||
track = {
|
track = {
|
||||||
track: function(){
|
trackFeatures: function(){
|
||||||
zones = [];
|
featureZones = [];
|
||||||
trackerTask = tracking.track(_CAN, tracker);
|
featureTrackerTask = tracking.track(_CAN, featureTracker);
|
||||||
|
},
|
||||||
|
|
||||||
|
trackFace: function(){
|
||||||
|
faceZones = [];
|
||||||
|
faceTrackerTask = tracking.track(_CAN, faceTracker);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);
|
/* (4) Initializing `Tracking.js` */
|
||||||
|
faceTracker = new tracking.ObjectTracker(['face']);
|
||||||
|
featureTracker = new tracking.ObjectTracker(['eye', 'mouth']);
|
||||||
|
|
||||||
tracker.setStepSize(1.9);
|
faceTracker.setStepSize(1.5);
|
||||||
|
featureTracker.setStepSize(1.5);
|
||||||
|
|
||||||
Controller.addFolder('Tracking.js');
|
trackerCallback = function(zones, e){
|
||||||
Controller.add(track, 'track');
|
|
||||||
|
|
||||||
tracker.on('track', function(event){
|
zones.length = 0;
|
||||||
|
|
||||||
event.data.forEach(function(rect){
|
|
||||||
|
|
||||||
|
e.data.forEach(function(rect){
|
||||||
zones.push({
|
zones.push({
|
||||||
x: rect.x / _CAN.width,
|
x: rect.x / _CAN.width,
|
||||||
y: rect.y / _CAN.height,
|
y: rect.y / _CAN.height,
|
||||||
w: rect.width / _CAN.width,
|
w: rect.width / _CAN.width,
|
||||||
h: rect.height / _CAN.height
|
h: rect.height / _CAN.height
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// On enregistre dans `zones` les zones trackées
|
// On enregistre dans `featureZones` les featureZones trackées
|
||||||
log('Recognition done', '[Tracking.js]');
|
log('Recognition done', '[Tracking.js]');
|
||||||
|
|
||||||
// On met à jour le rendu (affichage des zones)
|
// On met à jour le rendu (affichage des featureZones)
|
||||||
process.bind(DOM.imageLoader)();
|
process.apply(DOM.imageLoader);
|
||||||
|
}
|
||||||
|
|
||||||
});
|
faceTracker.on('track', function(e){ return trackerCallback.apply(this, [faceZones, e]); });
|
||||||
|
featureTracker.on('track', function(e){ return trackerCallback.apply(this, [featureZones, e]); });
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -125,7 +136,8 @@ ControllerRememberer.fetch(function(loaded_data){
|
||||||
/* [0.0] Gestion du changement d'image
|
/* [0.0] Gestion du changement d'image
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
if( this.src != last ){
|
if( this.src != last ){
|
||||||
zones = [];
|
faceZones = [];
|
||||||
|
featureZones = [];
|
||||||
exec = false;
|
exec = false;
|
||||||
last = this.src;
|
last = this.src;
|
||||||
}
|
}
|
||||||
|
@ -179,11 +191,12 @@ ControllerRememberer.fetch(function(loaded_data){
|
||||||
=========================================================*/
|
=========================================================*/
|
||||||
|
|
||||||
/* (1) On reporte chaque zone trackée sur le `<canvas>` */
|
/* (1) On reporte chaque zone trackée sur le `<canvas>` */
|
||||||
for( var i in zones ){
|
var i, x, y, w, h;
|
||||||
var x = zones[i].x * _CAN.width;
|
for( i in featureZones ){
|
||||||
var y = zones[i].y * _CAN.height;
|
x = featureZones[i].x * _CAN.width;
|
||||||
var w = zones[i].w * _CAN.width;
|
y = featureZones[i].y * _CAN.height;
|
||||||
var h = zones[i].h * _CAN.height;
|
w = featureZones[i].w * _CAN.width;
|
||||||
|
h = featureZones[i].h * _CAN.height;
|
||||||
_CON.beginPath();
|
_CON.beginPath();
|
||||||
_CON.moveTo( x, y );
|
_CON.moveTo( x, y );
|
||||||
_CON.lineTo( x, y+h );
|
_CON.lineTo( x, y+h );
|
||||||
|
@ -195,7 +208,23 @@ ControllerRememberer.fetch(function(loaded_data){
|
||||||
_CON.stroke();
|
_CON.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
for( i in faceZones ){
|
||||||
|
x = faceZones[i].x * _CAN.width;
|
||||||
|
y = faceZones[i].y * _CAN.height;
|
||||||
|
w = faceZones[i].w * _CAN.width;
|
||||||
|
h = faceZones[i].h * _CAN.height;
|
||||||
|
_CON.beginPath();
|
||||||
|
_CON.moveTo( x, y );
|
||||||
|
_CON.lineTo( x, y+h );
|
||||||
|
_CON.lineTo( x+w, y+h );
|
||||||
|
_CON.lineTo( x+w, y );
|
||||||
|
_CON.lineTo( x, y );
|
||||||
|
_CON.lineWidth = 5;
|
||||||
|
_CON.strokeStyle = '#ff0';
|
||||||
|
_CON.stroke();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{ /* [5] Filtrage post-processing
|
{ /* [5] Filtrage post-processing
|
||||||
|
@ -228,6 +257,9 @@ ControllerRememberer.fetch(function(loaded_data){
|
||||||
Controller.remember(filterManager.get('gaussian'));
|
Controller.remember(filterManager.get('gaussian'));
|
||||||
|
|
||||||
/* (4) On attache tout à dat.GUI */
|
/* (4) On attache tout à dat.GUI */
|
||||||
|
Controller.addFolder('Tracking.js');
|
||||||
|
Controller.add(track, 'trackFace');
|
||||||
|
Controller.add(track, 'trackFeatures');
|
||||||
Controller.addFolder('Image Resolution');
|
Controller.addFolder('Image Resolution');
|
||||||
Controller.add(filterManager.get('resolution'), 'width', 0, 2).step(0.1);//listen();
|
Controller.add(filterManager.get('resolution'), 'width', 0, 2).step(0.1);//listen();
|
||||||
Controller.add(filterManager.get('resolution'), 'height', 0, 2).step(0.1);//listen();
|
Controller.add(filterManager.get('resolution'), 'height', 0, 2).step(0.1);//listen();
|
||||||
|
|
|
@ -1,8 +1,9 @@
|
||||||
var DOM={body:$("body"),canvas:$("canvas"),imageLoader:$("#image-loader")},_CAN=DOM.canvas;_CAN.width=_CAN.height=1E3;var _CON=_CAN.getContext("2d"),iL,filterManager,process=function(){},exec=!1,last,trackerTask,Controller,init,zones,track,tracker,initialized=!1,ControllerRememberer=new PermanentStorage;
|
var DOM={body:$("body"),canvas:$("canvas"),imageLoader:$("#image-loader")},_CAN=DOM.canvas;_CAN.width=_CAN.height=1E3;var _CON=_CAN.getContext("2d"),iL,filterManager,process=function(){},exec=!1,last,featureTrackerTask,faceTrackerTask,trackerCallback,Controller,init,featureZones,faceZones,track,featureTracker,faceTracker,initialized=!1,ControllerRememberer=new PermanentStorage;
|
||||||
ControllerRememberer.fetch(function(f){log("Preset loaded.","[PermanentStorage]");Controller=new dat.GUI({load:JSON.parse(f),preset:"default"});init=function(){this.src="front/male/1.jpg";Controller.addFolder("Source Picture");Controller.remember(this);Controller.add(this,"src",this._images).listen();last=this.src;initialized=!0};zones;track={track:function(){zones=[];trackerTask=tracking.track(_CAN,tracker)}};tracker=new tracking.ObjectTracker(["face","eye","mouth"]);tracker.setStepSize(1.9);Controller.addFolder("Tracking.js");
|
ControllerRememberer.fetch(function(f){log("Preset loaded.","[PermanentStorage]");Controller=new dat.GUI({load:JSON.parse(f),preset:"default"});init=function(){last=this.src="front/male/1.jpg";initialized=!0;Controller.addFolder("Source Picture");Controller.remember(this);Controller.add(this,"src",this._images).listen()};featureZones=[];faceZones=[];track={trackFeatures:function(){featureZones=[];featureTrackerTask=tracking.track(_CAN,featureTracker)},trackFace:function(){faceZones=[];faceTrackerTask=
|
||||||
Controller.add(track,"track");tracker.on("track",function(b){b.data.forEach(function(a){zones.push({x:a.x/_CAN.width,y:a.y/_CAN.height,w:a.width/_CAN.width,h:a.height/_CAN.height})});log("Recognition done","[Tracking.js]");process.bind(DOM.imageLoader)()});process=function(){if(initialized&&this instanceof HTMLImageElement){console.time("PROCESS");this.src!=last&&(zones=[],exec=!1,last=this.src);exec||(this.defaultWidth=this.width,this.defaultHeight=this.height,log("Image copied","[Canvas]"),exec=
|
tracking.track(_CAN,faceTracker)}};faceTracker=new tracking.ObjectTracker(["face"]);featureTracker=new tracking.ObjectTracker(["eye","mouth"]);faceTracker.setStepSize(1.5);featureTracker.setStepSize(1.5);trackerCallback=function(a,c){a.length=0;c.data.forEach(function(b){a.push({x:b.x/_CAN.width,y:b.y/_CAN.height,w:b.width/_CAN.width,h:b.height/_CAN.height})});log("Recognition done","[Tracking.js]");process.apply(DOM.imageLoader)};faceTracker.on("track",function(a){return trackerCallback.apply(this,
|
||||||
!0);_CON.clearRect(0,0,_CAN.width,_CAN.height);filterManager.get("resolution").apply();filterManager.get("contrast").apply();filterManager.get("sobel").apply();filterManager.get("gaussian").apply();filterManager.get("canny").apply();for(var b in zones){var a=zones[b].x*_CAN.width,c=zones[b].y*_CAN.height,d=zones[b].w*_CAN.width,e=zones[b].h*_CAN.height;_CON.beginPath();_CON.moveTo(a,c);_CON.lineTo(a,c+e);_CON.lineTo(a+d,c+e);_CON.lineTo(a+d,c);_CON.lineTo(a,c);_CON.lineWidth=5;_CON.strokeStyle="#f00";
|
[faceZones,a])});featureTracker.on("track",function(a){return trackerCallback.apply(this,[featureZones,a])});process=function(){if(initialized&&this instanceof HTMLImageElement){console.time("PROCESS");this.src!=last&&(faceZones=[],featureZones=[],exec=!1,last=this.src);exec||(this.defaultWidth=this.width,this.defaultHeight=this.height,log("Image copied","[Canvas]"),exec=!0);_CON.clearRect(0,0,_CAN.width,_CAN.height);filterManager.get("resolution").apply();filterManager.get("contrast").apply();filterManager.get("sobel").apply();
|
||||||
_CON.stroke()}console.timeEnd("PROCESS")}};filterManager=new ReactiveFilterManager(DOM.imageLoader,_CAN,process);filterManager.add("resolution",reactiveResolution);filterManager.add("contrast",reactiveContrast);filterManager.add("sobel",reactiveSobel);filterManager.add("gaussian",reactiveGaussianBlur);filterManager.add("canny",reactiveCanny);Controller.remember(filterManager.get("resolution"));Controller.remember(filterManager.get("contrast"));Controller.remember(filterManager.get("sobel"));Controller.remember(filterManager.get("canny"));
|
filterManager.get("gaussian").apply();filterManager.get("canny").apply();var a,c,b,d,e;for(a in featureZones)c=featureZones[a].x*_CAN.width,b=featureZones[a].y*_CAN.height,d=featureZones[a].w*_CAN.width,e=featureZones[a].h*_CAN.height,_CON.beginPath(),_CON.moveTo(c,b),_CON.lineTo(c,b+e),_CON.lineTo(c+d,b+e),_CON.lineTo(c+d,b),_CON.lineTo(c,b),_CON.lineWidth=5,_CON.strokeStyle="#f00",_CON.stroke();for(a in faceZones)c=faceZones[a].x*_CAN.width,b=faceZones[a].y*_CAN.height,d=faceZones[a].w*_CAN.width,
|
||||||
Controller.remember(filterManager.get("gaussian"));Controller.addFolder("Image Resolution");Controller.add(filterManager.get("resolution"),"width",0,2).step(.1);Controller.add(filterManager.get("resolution"),"height",0,2).step(.1);Controller.addFolder("Basic Image Processing");Controller.add(filterManager.get("contrast"),"contrast",0,100);Controller.addFolder("Gaussian Blur");Controller.add(filterManager.get("gaussian"),"sigma",0,10).step(.5);Controller.add(filterManager.get("gaussian"),"radius",
|
e=faceZones[a].h*_CAN.height,_CON.beginPath(),_CON.moveTo(c,b),_CON.lineTo(c,b+e),_CON.lineTo(c+d,b+e),_CON.lineTo(c+d,b),_CON.lineTo(c,b),_CON.lineWidth=5,_CON.strokeStyle="#ff0",_CON.stroke();console.timeEnd("PROCESS")}};filterManager=new ReactiveFilterManager(DOM.imageLoader,_CAN,process);filterManager.add("resolution",reactiveResolution);filterManager.add("contrast",reactiveContrast);filterManager.add("sobel",reactiveSobel);filterManager.add("gaussian",reactiveGaussianBlur);filterManager.add("canny",
|
||||||
1,11).step(1);Controller.addFolder("Convolution Filters");Controller.add(filterManager.get("sobel"),"sobelActive");Controller.add(filterManager.get("canny"),"canny_radius");Controller.__save_row.children[2].addEventListener("click",function(){Controller.save();try{var b=JSON.stringify(Controller.getSaveObject());ControllerRememberer.store(b,function(){log("dat.GUI preset stored.","[PermanentStorage]");return!0})}catch(a){log("Corrupted data.","[PermanentStorage]")}},!1);iL=new ImageLoader(DOM.imageLoader,
|
reactiveCanny);Controller.remember(filterManager.get("resolution"));Controller.remember(filterManager.get("contrast"));Controller.remember(filterManager.get("sobel"));Controller.remember(filterManager.get("canny"));Controller.remember(filterManager.get("gaussian"));Controller.addFolder("Tracking.js");Controller.add(track,"trackFace");Controller.add(track,"trackFeatures");Controller.addFolder("Image Resolution");Controller.add(filterManager.get("resolution"),"width",0,2).step(.1);Controller.add(filterManager.get("resolution"),
|
||||||
init,process);return!0});
|
"height",0,2).step(.1);Controller.addFolder("Basic Image Processing");Controller.add(filterManager.get("contrast"),"contrast",0,100);Controller.addFolder("Gaussian Blur");Controller.add(filterManager.get("gaussian"),"sigma",0,10).step(.5);Controller.add(filterManager.get("gaussian"),"radius",1,11).step(1);Controller.addFolder("Convolution Filters");Controller.add(filterManager.get("sobel"),"sobelActive");Controller.add(filterManager.get("canny"),"canny_radius");Controller.__save_row.children[2].addEventListener("click",
|
||||||
|
function(){Controller.save();try{var a=JSON.stringify(Controller.getSaveObject());ControllerRememberer.store(a,function(){log("dat.GUI preset stored.","[PermanentStorage]");return!0})}catch(c){log("Corrupted data.","[PermanentStorage]")}},!1);iL=new ImageLoader(DOM.imageLoader,init,process);return!0});
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
{"preset":"test1","remembered":{"default":{"0":{"width":1.8,"height":0.5},"1":{"contrast":0},"2":{"sobelActive":false},"3":{"canny_radius":3},"4":{"sigma":0,"radius":3},"5":{"src":"front/male/1.jpg"}},"test1":{"0":{"width":1.8,"height":0.5},"1":{"contrast":55.27520549370516},"2":{"sobelActive":false},"3":{"canny_radius":3},"4":{"sigma":0,"radius":3},"5":{"src":"front/male/1.jpg"}}},"closed":false,"folders":{"Tracking.js":{"preset":"Default","closed":true,"folders":{}},"Image Resolution":{"preset":"Default","closed":true,"folders":{}},"Basic Image Processing":{"preset":"Default","closed":true,"folders":{}},"Gaussian Blur":{"preset":"Default","closed":true,"folders":{}},"Convolution Filters":{"preset":"Default","closed":true,"folders":{}},"Source Picture":{"preset":"Default","closed":true,"folders":{}}}}
|
{"preset":"default","remembered":{"default":{"0":{"width":1,"height":1},"1":{"contrast":0},"2":{"sobelActive":false},"3":{"canny_radius":3},"4":{"sigma":6,"radius":3},"5":{"src":"front/male/1.jpg"}},"test1":{"0":{"width":1.8,"height":0.5},"1":{"contrast":55.27520549370516},"2":{"sobelActive":false},"3":{"canny_radius":3},"4":{"sigma":0,"radius":3},"5":{"src":"front/male/1.jpg"}}},"closed":false,"folders":{"Tracking.js":{"preset":"Default","closed":true,"folders":{}},"Image Resolution":{"preset":"Default","closed":true,"folders":{}},"Basic Image Processing":{"preset":"Default","closed":true,"folders":{}},"Gaussian Blur":{"preset":"Default","closed":true,"folders":{}},"Convolution Filters":{"preset":"Default","closed":true,"folders":{}},"Source Picture":{"preset":"Default","closed":true,"folders":{}}}}
|
Loading…
Reference in New Issue