diff --git a/public_html/js/action-script.js b/public_html/js/action-script.js index b9fac63..8e5e769 100644 --- a/public_html/js/action-script.js +++ b/public_html/js/action-script.js @@ -270,6 +270,7 @@ ControllerRememberer.fetch(function(loaded_data){ Controller.add(filterManager.get('contrast'), 'contrast', 0, 100); Controller.add(filterManager.get('grayscale'), 'grayscale'); Controller.addFolder('Gaussian Blur'); + Controller.add(filterManager.get('gaussian'), 'active'); Controller.add(filterManager.get('gaussian'), 'sigma', 0, 10).step(0.5); Controller.add(filterManager.get('gaussian'), 'radius', 1, 11).step(1); Controller.addFolder('Sobel Filter'); diff --git a/public_html/js/lib/min/reactive-filter.js b/public_html/js/lib/min/reactive-filter.js index 98c4995..02398ee 100644 --- a/public_html/js/lib/min/reactive-filter.js +++ b/public_html/js/lib/min/reactive-filter.js @@ -1,16 +1,16 @@ -var ReactiveFilter=function(a){this._manager={_process:function(){}};this._attr=a instanceof Object?a:{};for(var c in this._attr)this.__defineGetter__(c,function(a){return this._attr[a]}.bind(this,c)),this.__defineSetter__(c,function(a,b){return function(c){a._attr[b]=c;a._manager.process()}}(this,c));this.apply=function(){}},ReactiveFilterManager=function(a,c,d){this._target=a instanceof HTMLImageElement?a:null;if(!this._target)throw Error("Param 1 expected to be an HTMLImageElement (), but "+ -a.constructor.name+" received");this._canvas=c instanceof HTMLCanvasElement?c:null;if(!this._canvas)throw Error("Param 2 expected to be an HTMLCanvasElement (), but "+c.constructor.name+" received");this._context=this._canvas.getContext("2d");this._process=d instanceof Function?d:null;if(!this._process)throw Error("Param 3 expected to be a Function, but "+d.constructor.name+" received");this._filter={}}; -ReactiveFilterManager.prototype.add=function(a,c){a="string"===typeof a?a:null;if(!a)throw Error("Param 1 expected to be a `string`, but "+a.constructor.name+" received");c=c instanceof ReactiveFilter?c:null;if(!c)throw Error("Param 2 expected to be a `ReactiveFilter`, but "+c.constructor.name+" received");if(null!=this._filter[a])return!0;this._filter[a]=c;c._manager=this}; +var ReactiveFilter=function(a){this._manager={_process:function(){}};this._attr=a instanceof Object?a:{};for(var e in this._attr)this.__defineGetter__(e,function(a){return this._attr[a]}.bind(this,e)),this.__defineSetter__(e,function(a,b){return function(c){a._attr[b]=c;a._manager.process()}}(this,e));this.apply=function(){}},ReactiveFilterManager=function(a,e,d){this._target=a instanceof HTMLImageElement?a:null;if(!this._target)throw Error("Param 1 expected to be an HTMLImageElement (), but "+ +a.constructor.name+" received");this._canvas=e instanceof HTMLCanvasElement?e:null;if(!this._canvas)throw Error("Param 2 expected to be an HTMLCanvasElement (), but "+e.constructor.name+" received");this._context=this._canvas.getContext("2d");this._process=d instanceof Function?d:null;if(!this._process)throw Error("Param 3 expected to be a Function, but "+d.constructor.name+" received");this._filter={}}; +ReactiveFilterManager.prototype.add=function(a,e){a="string"===typeof a?a:null;if(!a)throw Error("Param 1 expected to be a `string`, but "+a.constructor.name+" received");e=e instanceof ReactiveFilter?e:null;if(!e)throw Error("Param 2 expected to be a `ReactiveFilter`, but "+e.constructor.name+" received");if(null!=this._filter[a])return!0;this._filter[a]=e;e._manager=this}; ReactiveFilterManager.prototype.get=function(a){a="string"===typeof a?a:null;if(!a)throw Error("Param 1 expected to be a `string`, but "+a.constructor.name+" received");return null!=this._filter[a]?this._filter[a]:!1};ReactiveFilterManager.prototype.process=function(){this._process.bind(this._target)()}; -ConvolutionFilter=function(a,c,d,b){var e,g,f,h,q=parseInt(b.length/2),p=parseInt(b[0].length/2),l=d.slice(0),k,n,m,r,t,u;for(n=q;n=127+b&&(d[e]=255),d[e]<=127-b&&(d[e]=0));c.putImageData(a,0,0)}};var reactiveGrayscale=new ReactiveFilter({grayscale:!1}); -reactiveGrayscale.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.grayscale){for(var a=this._manager._canvas,c=this._manager._context,a=c.getImageData(0,0,a.width,a.height),d=a.data,b=this.contrast;1>31)-(f>>31)|0,agy=(h^h>>31)-(h>>31)|0,0agy?(m=k[a+p],r=k[a+p+-l],f=k[a-p],h=k[a-p+l],m=(agx-agy)*m+agy*r,f=(agx-agy)*f+agy*h,h=k[a]*agx,n[a]=h>=m&&h>f?agx&255:0):(m=k[a+-l],r=k[a+p+-l],f=k[a+l],h=k[a-p+l],m=(agy-agx)*m+agx*r,f=(agy-agx)*f+agx* -h,h=k[a]*agy,n[a]=h>=m&&h>f?agy&255:0);data_u32=new Uint32Array(d.data.buffer);for(a=b.cols*b.rows;0<=--a;)data_u32[a]=-16777216|n[a]<<16|n[a]<<8|n[a];c.putImageData(d,0,0)}};var reactiveGaussianBlur=new ReactiveFilter({sigma:0,radius:3}); -reactiveGaussianBlur.apply=function(){if(this._manager instanceof ReactiveFilterManager){for(var a=this._manager._target,c=this._manager._canvas,d=this._manager._context,c=d.getImageData(0,0,c.width,c.height),b=new Uint32Array(c.buffer),e=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),g=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),a=a.width*a.height,f;0<=--a;)f=b[a],e.data[a]=f<<24|f<<16|f<<8|f;jsfeat.imgproc.gaussian_blur(e,g,this.radius+1<<1,this.sigma);for(a=g.cols*g.rows;0<=--a;)f= -g.data[a],b[a]=f<<24|f<<16|f<<8|f;d.putImageData(c,0,0)}};var reactiveCanny=new ReactiveFilter({active:!1,low_threshold:1,high_threshold:1,radius:3}); -reactiveCanny.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.active){var a=this._manager._canvas,c=this._manager._context,d=c.getImageData(0,0,a.width,a.height),b=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),e,g;jsfeat.imgproc.grayscale(d.data,a.width,a.height,b);jsfeat.imgproc.gaussian_blur(b,b,(this.radius|0)+1<<1,0);jsfeat.imgproc.canny(b,b,this.low_threshold|0,this.high_threshold|0);a=new Uint32Array(d.data.buffer);e=b.cols*b.rows;for(pix=0;0<=--e;)g=b.data[e], -a[e]=-16777216|g<<16|g<<8|g;c.putImageData(d,0,0)}}; +ConvolutionFilter=function(a,e,d,b){var c,f,g,h,q=parseInt(b.length/2),p=parseInt(b[0].length/2),l=d.slice(0),k,n,m,r,t,u;for(n=q;n=127+b&&(d[c]=255),d[c]<=127-b&&(d[c]=0));e.putImageData(a,0,0)}};var reactiveGrayscale=new ReactiveFilter({grayscale:!1}); +reactiveGrayscale.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.grayscale){for(var a=this._manager._canvas,e=this._manager._context,a=e.getImageData(0,0,a.width,a.height),d=a.data,b=this.contrast;1>31)-(g>>31)|0,agy=(h^h>>31)-(h>>31)|0,0agy?(m=k[a+p],r=k[a+p+-l],g=k[a-p],h=k[a-p+l],m=(agx-agy)*m+agy*r,g=(agx-agy)*g+agy*h,h=k[a]*agx,n[a]=h>=m&&h>g?agx&255:0):(m=k[a+-l],r=k[a+p+-l],g=k[a+l],h=k[a-p+l],m=(agy-agx)*m+agx*r,g=(agy-agx)*g+agx*h,h= +k[a]*agy,n[a]=h>=m&&h>g?agy&255:0);data_u32=new Uint32Array(d.data.buffer);for(a=b.cols*b.rows;0<=--a;)data_u32[a]=-16777216|n[a]<<16|n[a]<<8|n[a];e.putImageData(d,0,0)}};var reactiveGaussianBlur=new ReactiveFilter({active:!1,sigma:0,radius:3}); +reactiveGaussianBlur.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.active){var a=this._manager._canvas,e=this._manager._context,d=e.getImageData(0,0,a.width,a.height);new Uint32Array(d.buffer);var b=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),c,f;jsfeat.imgproc.grayscale(d.data,a.width,a.height,b);jsfeat.imgproc.gaussian_blur(b,b,(this.radius|0)+1<<1,this.sigma);a=new Uint32Array(d.data.buffer);c=b.cols*b.rows;for(pix=0;0<=--c;)f=b.data[c],a[c]=-16777216|f<<16|f<< +8|f;e.putImageData(d,0,0)}};var reactiveCanny=new ReactiveFilter({active:!1,low_threshold:1,high_threshold:1,radius:3}); +reactiveCanny.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.active){var a=this._manager._canvas,e=this._manager._context,d=e.getImageData(0,0,a.width,a.height),b=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),c,f;jsfeat.imgproc.grayscale(d.data,a.width,a.height,b);jsfeat.imgproc.gaussian_blur(b,b,(this.radius|0)+1<<1,0);jsfeat.imgproc.canny(b,b,this.low_threshold|0,this.high_threshold|0);a=new Uint32Array(d.data.buffer);c=b.cols*b.rows;for(pix=0;0<=--c;)f=b.data[c], +a[c]=-16777216|f<<16|f<<8|f;e.putImageData(d,0,0)}}; diff --git a/public_html/js/lib/reactive-filter.js b/public_html/js/lib/reactive-filter.js index 230a1aa..9107e0a 100644 --- a/public_html/js/lib/reactive-filter.js +++ b/public_html/js/lib/reactive-filter.js @@ -418,7 +418,6 @@ reactiveSobel.apply = function(){ }; var imageData = o.context.getImageData(0, 0, o.canvas.width, o.canvas.height); - var buffer32 = new Uint32Array( imageData.buffer ); var img_u8 = new jsfeat.matrix_t(o.canvas.width, o.canvas.height, jsfeat.U8C1_t), img_gxgy = new jsfeat.matrix_t(o.canvas.width, o.canvas.height, jsfeat.S32C2_t), img_mag = new jsfeat.matrix_t(o.canvas.width, o.canvas.height, jsfeat.S32C1_t); @@ -500,13 +499,15 @@ reactiveSobel.apply = function(){ /************************************************ **** Gestion du Gaussian Blur **** ************************************************/ -var reactiveGaussianBlur = new ReactiveFilter({ sigma: 0, radius: 3 }); +var reactiveGaussianBlur = new ReactiveFilter({ active: false, sigma: 0, radius: 3 }); reactiveGaussianBlur.apply = function(){ /* [1] Si pas de manager, on exit =========================================================*/ if( !(this._manager instanceof ReactiveFilterManager) ) return; + if( !this.active ) + return; /* [2] On recupère notre back-buffer (8Uint) =========================================================*/ @@ -520,28 +521,26 @@ reactiveGaussianBlur.apply = function(){ var imageData = o.context.getImageData(0, 0, o.canvas.width, o.canvas.height); // var buffer = imageData.data; var buffer32 = new Uint32Array( imageData.buffer ); + var img_u8 = new jsfeat.matrix_t(o.canvas.width, o.canvas.height, jsfeat.U8C1_t); + var r, kernel_size, data_u32, a, i, p; /* [3] On effectue notre modification =========================================================*/ - var source = new jsfeat.matrix_t(o.image.width, o.image.height, jsfeat.U8C1_t), - target = new jsfeat.matrix_t(o.image.width, o.image.height, jsfeat.U8C1_t), - p_num = o.image.width * o.image.height, - pixel, - kernel_size; + jsfeat.imgproc.grayscale(imageData.data, o.canvas.width, o.canvas.height, img_u8); - while( --p_num >= 0 ){ - pixel = buffer32[p_num]; - source.data[p_num] = (pixel << 24) | (pixel << 16) | (pixel << 8) | pixel; - } + r = this.radius|0; + kernel_size = (r+1) << 1; - kernel_size = (this.radius + 1) << 1; - jsfeat.imgproc.gaussian_blur(source, target, kernel_size, this.sigma); + jsfeat.imgproc.gaussian_blur(img_u8, img_u8, kernel_size, this.sigma); - p_num = target.cols * target.rows; - while( --p_num >= 0 ){ - pixel = target.data[p_num]; - buffer32[p_num] = (pixel << 24) | (pixel << 16) | (pixel << 8) | pixel; + // render result back to canvas + data_u32 = new Uint32Array(imageData.data.buffer); + a = (0xff << 24); + i = img_u8.cols*img_u8.rows, pix = 0; + while( --i >= 0 ){ + p = img_u8.data[i]; + data_u32[i] = a | (p << 16) | (p << 8) | p; } /* (2) Copie le résultat sur le `` */ diff --git a/public_html/js/min/action-script.js b/public_html/js/min/action-script.js index 6c4c1ab..c534dc5 100644 --- a/public_html/js/min/action-script.js +++ b/public_html/js/min/action-script.js @@ -5,6 +5,6 @@ tracking.track(_CAN,faceTracker)}};faceTracker=new tracking.ObjectTracker(["face 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("grayscale").apply();filterManager.get("sobel").apply();filterManager.get("gaussian").apply();filterManager.get("canny").apply();var a,c,b,d,e;for(a in zones.feature)c=zones.feature[a].x*_CAN.width,b=zones.feature[a].y*_CAN.height,d=zones.feature[a].w*_CAN.width,e=zones.feature[a].h*_CAN.height, _CON.lineWidth=5,_CON.strokeStyle="#f00",_CON.strokeRect(c,b,d,e);for(a in zones.face)c=zones.face[a].x*_CAN.width,b=zones.face[a].y*_CAN.height,d=zones.face[a].w*_CAN.width,e=zones.face[a].h*_CAN.height,_CON.lineWidth=5,_CON.strokeStyle="#ff0",_CON.strokeRect(c,b,d,e);console.timeEnd("PROCESS")}};filterManager=new ReactiveFilterManager(DOM.imageLoader,_CAN,process);filterManager.add("resolution",reactiveResolution);filterManager.add("contrast",reactiveContrast);filterManager.add("grayscale",reactiveGrayscale); 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("grayscale"));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.add(filterManager.get("grayscale"),"grayscale");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("Sobel Filter");Controller.add(filterManager.get("sobel"),"sobelActive");Controller.addFolder("Canny Filter");Controller.add(filterManager.get("canny"),"active");Controller.add(filterManager.get("canny"),"radius",0,4).step(1);Controller.add(filterManager.get("canny"),"low_threshold",1,127).step(1);Controller.add(filterManager.get("canny"),"high_threshold",1,127).step(1);Controller.addFolder("Process");Controller.add({render:process},"render");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}); +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.add(filterManager.get("grayscale"),"grayscale");Controller.addFolder("Gaussian Blur");Controller.add(filterManager.get("gaussian"),"active");Controller.add(filterManager.get("gaussian"), +"sigma",0,10).step(.5);Controller.add(filterManager.get("gaussian"),"radius",1,11).step(1);Controller.addFolder("Sobel Filter");Controller.add(filterManager.get("sobel"),"sobelActive");Controller.addFolder("Canny Filter");Controller.add(filterManager.get("canny"),"active");Controller.add(filterManager.get("canny"),"radius",0,4).step(1);Controller.add(filterManager.get("canny"),"low_threshold",1,127).step(1);Controller.add(filterManager.get("canny"),"high_threshold",1,127).step(1);Controller.addFolder("Process"); +Controller.add({render:process},"render");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});