From 8909d5f86d7c81a61f41436c9540117c3830f103 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Thu, 3 Nov 2016 13:25:56 +0100 Subject: [PATCH] Separation tracking(face) / tracking(eyes+mouth --- public_html/js/action-script.js | 100 ++++++++++++++------- public_html/js/min/action-script.js | 17 ++-- public_html/permanent-storage/storage.json | 2 +- 3 files changed, 76 insertions(+), 43 deletions(-) diff --git a/public_html/js/action-script.js b/public_html/js/action-script.js index ca4df82..4f3c866 100644 --- a/public_html/js/action-script.js +++ b/public_html/js/action-script.js @@ -34,14 +34,17 @@ var process = function(){}; var exec = false; var last; - var trackerTask; - var trackerTask; + var featureTrackerTask; + var faceTrackerTask; + var trackerCallback; var Controller, init, - zones, + featureZones, + faceZones, track, - tracker, + featureTracker, + faceTracker, initialized = false; } @@ -61,54 +64,62 @@ ControllerRememberer.fetch(function(loaded_data){ /* (1) Image par défaut */ 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.remember(this); - Controller.add(this, 'src', this._images).listen(); - - last = this.src; - - initialized = true; + Controller.add(this, 'src', this._images).listen(); }; /* (2) Gestion de tracking.js */ - zones; + featureZones = []; + faceZones = []; /* (3) Gestion du track de l'image */ track = { - track: function(){ - zones = []; - trackerTask = tracking.track(_CAN, tracker); + trackFeatures: function(){ + featureZones = []; + 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'); - Controller.add(track, 'track'); + trackerCallback = function(zones, e){ - tracker.on('track', function(event){ - - event.data.forEach(function(rect){ + zones.length = 0; + e.data.forEach(function(rect){ zones.push({ x: rect.x / _CAN.width, y: rect.y / _CAN.height, w: rect.width / _CAN.width, 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]'); - // On met à jour le rendu (affichage des zones) - process.bind(DOM.imageLoader)(); + // On met à jour le rendu (affichage des featureZones) + 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,9 +136,10 @@ ControllerRememberer.fetch(function(loaded_data){ /* [0.0] Gestion du changement d'image =========================================================*/ if( this.src != last ){ - zones = []; - exec = false; - last = this.src; + faceZones = []; + featureZones = []; + exec = false; + last = this.src; } @@ -179,11 +191,12 @@ ControllerRememberer.fetch(function(loaded_data){ =========================================================*/ /* (1) On reporte chaque zone trackée sur le `` */ - for( var i in zones ){ - var x = zones[i].x * _CAN.width; - var y = zones[i].y * _CAN.height; - var w = zones[i].w * _CAN.width; - var h = zones[i].h * _CAN.height; + var i, x, y, w, h; + for( i in featureZones ){ + x = featureZones[i].x * _CAN.width; + y = featureZones[i].y * _CAN.height; + w = featureZones[i].w * _CAN.width; + h = featureZones[i].h * _CAN.height; _CON.beginPath(); _CON.moveTo( x, y ); _CON.lineTo( x, y+h ); @@ -195,9 +208,25 @@ ControllerRememberer.fetch(function(loaded_data){ _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 =========================================================*/ @@ -228,6 +257,9 @@ ControllerRememberer.fetch(function(loaded_data){ Controller.remember(filterManager.get('gaussian')); /* (4) On attache tout à dat.GUI */ + 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(0.1);//listen(); Controller.add(filterManager.get('resolution'), 'height', 0, 2).step(0.1);//listen(); diff --git a/public_html/js/min/action-script.js b/public_html/js/min/action-script.js index 95258b9..85bdc7a 100644 --- a/public_html/js/min/action-script.js +++ b/public_html/js/min/action-script.js @@ -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; -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"); -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= -!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"; -_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")); -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", -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, -init,process);return!0}); +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(){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= +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, +[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(); +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, +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", +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"), +"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}); diff --git a/public_html/permanent-storage/storage.json b/public_html/permanent-storage/storage.json index 8eed8f4..f32f4a4 100644 --- a/public_html/permanent-storage/storage.json +++ b/public_html/permanent-storage/storage.json @@ -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":{}}}} \ No newline at end of file +{"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":{}}}} \ No newline at end of file