Correction [GaussianBlur]

This commit is contained in:
xdrm-brackets 2016-11-03 15:06:22 +01:00
parent 73f86e838a
commit b51ebc3dde
4 changed files with 35 additions and 35 deletions

View File

@ -270,6 +270,7 @@ ControllerRememberer.fetch(function(loaded_data){
Controller.add(filterManager.get('contrast'), 'contrast', 0, 100); Controller.add(filterManager.get('contrast'), 'contrast', 0, 100);
Controller.add(filterManager.get('grayscale'), 'grayscale'); Controller.add(filterManager.get('grayscale'), 'grayscale');
Controller.addFolder('Gaussian Blur'); 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'), 'sigma', 0, 10).step(0.5);
Controller.add(filterManager.get('gaussian'), 'radius', 1, 11).step(1); Controller.add(filterManager.get('gaussian'), 'radius', 1, 11).step(1);
Controller.addFolder('Sobel Filter'); Controller.addFolder('Sobel Filter');

View File

@ -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 (<img>), but "+ 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 (<img>), but "+
a.constructor.name+" received");this._canvas=c instanceof HTMLCanvasElement?c:null;if(!this._canvas)throw Error("Param 2 expected to be an HTMLCanvasElement (<canvas>), 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={}}; a.constructor.name+" received");this._canvas=e instanceof HTMLCanvasElement?e:null;if(!this._canvas)throw Error("Param 2 expected to be an HTMLCanvasElement (<canvas>), 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,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}; 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)()}; 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<c;n++)for(k=p;k<a;k++){h=f=g=e=0;for(r=-q;r<=q;r++)for(m=-p;m<=p;m++)t=b[q+r][p+m],u=4*((n+r)*a+(k+m)),e+=l[u+0]*t,g+=l[u+1]*t,f+=l[u+2]*t,h+=l[u+3]*t;m=4*(n*a+k);d[m+0]=e;d[m+1]=g;d[m+2]=f;d[m+3]=h}}; 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<e;n++)for(k=p;k<a;k++){h=g=f=c=0;for(r=-q;r<=q;r++)for(m=-p;m<=p;m++)t=b[q+r][p+m],u=4*((n+r)*a+(k+m)),c+=l[u+0]*t,f+=l[u+1]*t,g+=l[u+2]*t,h+=l[u+3]*t;m=4*(n*a+k);d[m+0]=c;d[m+1]=f;d[m+2]=g;d[m+3]=h}};
SobelFilter=function(a,c,d){var b=[[-1,0,1],[-2,0,2],[-1,0,1]],e=[[1,2,1],[0,0,0],[-1,-2,-1]],g=parseInt(b.length/2),f=parseInt(b[0].length/2),h=d.slice(0),q,p,l,k,n,m;for(p=g;p<c;p++)for(q=f;q<a;q++){n=0;for(k=-g;k<=g;k++)for(l=-f;l<=f;l++)m=4*((p+k)*a+(q+l)),n+=h[m+0]*(b[g+k][f+l]+e[g+k][f+l])/2;l=p*a+q;n=Math.abs(n);d[l]=(n<<32)+(n<<16)+(n<<8)|4278190080}};var reactiveResolution=new ReactiveFilter({width:1,height:1}); SobelFilter=function(a,e,d){var b=[[-1,0,1],[-2,0,2],[-1,0,1]],c=[[1,2,1],[0,0,0],[-1,-2,-1]],f=parseInt(b.length/2),g=parseInt(b[0].length/2),h=d.slice(0),q,p,l,k,n,m;for(p=f;p<e;p++)for(q=g;q<a;q++){n=0;for(k=-f;k<=f;k++)for(l=-g;l<=g;l++)m=4*((p+k)*a+(q+l)),n+=h[m+0]*(b[f+k][g+l]+c[f+k][g+l])/2;l=p*a+q;n=Math.abs(n);d[l]=(n<<32)+(n<<16)+(n<<8)|4278190080}};var reactiveResolution=new ReactiveFilter({width:1,height:1});
reactiveResolution.apply=function(){if(this._manager instanceof ReactiveFilterManager){var a=this._manager._target,c=this._manager._canvas,d=this._manager._context;c.width=a.width*this.width;c.height=a.height*this.height;d.drawImage(a,0,0,c.width,c.height)}};var reactiveContrast=new ReactiveFilter({contrast:0}); reactiveResolution.apply=function(){if(this._manager instanceof ReactiveFilterManager){var a=this._manager._target,e=this._manager._canvas,d=this._manager._context;e.width=a.width*this.width;e.height=a.height*this.height;d.drawImage(a,0,0,e.width,e.height)}};var reactiveContrast=new ReactiveFilter({contrast:0});
reactiveContrast.apply=function(){if(this._manager instanceof ReactiveFilterManager){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<b;)b/=100;for(var b=127*(1-b),e=0,g=d.length;e<g;e++)0!=e%3&&(d[e]>=127+b&&(d[e]=255),d[e]<=127-b&&(d[e]=0));c.putImageData(a,0,0)}};var reactiveGrayscale=new ReactiveFilter({grayscale:!1}); reactiveContrast.apply=function(){if(this._manager instanceof ReactiveFilterManager){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<b;)b/=100;for(var b=127*(1-b),c=0,f=d.length;c<f;c++)0!=c%3&&(d[c]>=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,c=this._manager._context,a=c.getImageData(0,0,a.width,a.height),d=a.data,b=this.contrast;1<b;)b/=100;for(var e=0,g=d.length;e<g;e++)0<e%4||(b=Math.round(.298*d[e]+.586*d[e+1]+.114*d[e+2]),d[e]=d[e+1]=d[e+2]=b);c.putImageData(a,0,0)}};var reactiveSobel=new ReactiveFilter({sobelActive:!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<b;)b/=100;for(var c=0,f=d.length;c<f;c++)0<c%4||(b=Math.round(.298*d[c]+.586*d[c+1]+.114*d[c+2]),d[c]=d[c+1]=d[c+2]=b);e.putImageData(a,0,0)}};var reactiveSobel=new ReactiveFilter({sobelActive:!1});
reactiveSobel.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.sobelActive){var a=this._manager._canvas,c=this._manager._context,d=c.getImageData(0,0,a.width,a.height);new Uint32Array(d.buffer);var b=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),e=new jsfeat.matrix_t(a.width,a.height,jsfeat.S32C2_t),g=new jsfeat.matrix_t(a.width,a.height,jsfeat.S32C1_t),f,h,q,p,l,k,n,m,r;jsfeat.imgproc.grayscale(d.data,a.width,a.height,b);jsfeat.imgproc.gaussian_blur(b,b,3);jsfeat.imgproc.sobel_derivatives(b, reactiveSobel.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.sobelActive){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=new jsfeat.matrix_t(a.width,a.height,jsfeat.S32C2_t),f=new jsfeat.matrix_t(a.width,a.height,jsfeat.S32C1_t),g,h,q,p,l,k,n,m,r;jsfeat.imgproc.grayscale(d.data,a.width,a.height,b);jsfeat.imgproc.gaussian_blur(b,b,3);jsfeat.imgproc.sobel_derivatives(b,c);a=
e);a=b.cols*b.rows;p=l=agx=agy=0;e=e.data;k=g.data;for(n=b.data;0<=--a;)f=e[a<<1],h=e[(a<<1)+1],k[a]=f*f+h*h;for(q=1;q<b.rows-1;++q)for(a=q*b.cols+1|0,g=1;g<b.cols-1;++g,++a)f=e[a<<1],h=e[(a<<1)+1],agx=(f^f>>31)-(f>>31)|0,agy=(h^h>>31)-(h>>31)|0,0<f&&(p=1)||(p=-1),0<h&&(l=b.cols)||(l=-b.cols),agx>agy?(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* b.cols*b.rows;p=l=agx=agy=0;c=c.data;k=f.data;for(n=b.data;0<=--a;)g=c[a<<1],h=c[(a<<1)+1],k[a]=g*g+h*h;for(q=1;q<b.rows-1;++q)for(a=q*b.cols+1|0,f=1;f<b.cols-1;++f,++a)g=c[a<<1],h=c[(a<<1)+1],agx=(g^g>>31)-(g>>31)|0,agy=(h^h>>31)-(h>>31)|0,0<g&&(p=1)||(p=-1),0<h&&(l=b.cols)||(l=-b.cols),agx>agy?(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=
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}); 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){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= 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<<
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}); 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,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], 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[e]=-16777216|g<<16|g<<8|g;c.putImageData(d,0,0)}}; a[c]=-16777216|f<<16|f<<8|f;e.putImageData(d,0,0)}};

View File

@ -418,7 +418,6 @@ reactiveSobel.apply = function(){
}; };
var imageData = o.context.getImageData(0, 0, o.canvas.width, o.canvas.height); 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), 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_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); 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 **** **** 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(){ reactiveGaussianBlur.apply = function(){
/* [1] Si pas de manager, on exit /* [1] Si pas de manager, on exit
=========================================================*/ =========================================================*/
if( !(this._manager instanceof ReactiveFilterManager) ) if( !(this._manager instanceof ReactiveFilterManager) )
return; return;
if( !this.active )
return;
/* [2] On recupère notre back-buffer (8Uint) /* [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 imageData = o.context.getImageData(0, 0, o.canvas.width, o.canvas.height);
// var buffer = imageData.data; // var buffer = imageData.data;
var buffer32 = new Uint32Array( imageData.buffer ); 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 /* [3] On effectue notre modification
=========================================================*/ =========================================================*/
var source = new jsfeat.matrix_t(o.image.width, o.image.height, jsfeat.U8C1_t), jsfeat.imgproc.grayscale(imageData.data, o.canvas.width, o.canvas.height, img_u8);
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;
while( --p_num >= 0 ){ r = this.radius|0;
pixel = buffer32[p_num]; kernel_size = (r+1) << 1;
source.data[p_num] = (pixel << 24) | (pixel << 16) | (pixel << 8) | pixel;
}
kernel_size = (this.radius + 1) << 1; jsfeat.imgproc.gaussian_blur(img_u8, img_u8, kernel_size, this.sigma);
jsfeat.imgproc.gaussian_blur(source, target, kernel_size, this.sigma);
p_num = target.cols * target.rows; // render result back to canvas
while( --p_num >= 0 ){ data_u32 = new Uint32Array(imageData.data.buffer);
pixel = target.data[p_num]; a = (0xff << 24);
buffer32[p_num] = (pixel << 24) | (pixel << 16) | (pixel << 8) | pixel; 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 `<canvas>` */ /* (2) Copie le résultat sur le `<canvas>` */

View File

@ -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, 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); _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"); 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"), 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"),
"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", "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");
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({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});