TP3 : meanshift, difference, mvt, morpho, blobs

animation/moving_circle.js

+var animations=[]
+
+animations.MovingCircle=function(output_canvas_id,opt_options) {
+  this.radius=opt_options&&opt_options.radius?opt_options.radius:5;
+
+  this.x0=opt_options&&opt_options.x0?opt_options.x0:5;
+  this.y0=opt_options&&opt_options.y0?opt_options.y0:5;
+
+  this.step_x=opt_options&&opt_options.step_x?opt_options.step_x:1;
+  this.step_y=opt_options&&opt_options.step_x?opt_options.step_y:0;
+
+  this.random=opt_options&&opt_options.random?true:false;
+
+  this.output_cvs=document.getElementById(output_canvas_id);
+  this.output_ctxt=this.output_cvs.getContext("2d");
+  this.fillColor=opt_options&&opt_options.fillColor?opt_options.fillColor:[255,0,0,255];
+
+}
+
+animations.MovingCircle.prototype.move=function() {
+  var local_dx=Math.round(this.step_x*(!this.random?1:Math.random()));
+  var local_dy=Math.round(this.step_y*(!this.random?1:Math.random()));
+
+  this.x0+=local_dx; this.y0+=local_dy;
+
+  if ((this.x0+this.radius)>this.output_cvs.width) {
+    this.x0=this.output_cvs.width-this.radius; this.step_x=-this.step_x;
+  } else if (this.x0 < this.radius ) {
+      this.x0=this.radius; this.step_x=-this.step_x;
+  }
+
+  if ((this.y0+this.radius) > this.output_cvs.height) {
+    this.y0=this.output_cvs.height-this.radius; this.step_y=-this.step_y;
+  } else if (this.y0 < this.radius ) {
+    this.y0=this.radius; this.step_y=-this.step_y;
+  }
+}
+
+animations.MovingCircle.prototype.draw=function() {
+  this.output_ctxt.fillStyle="rgba("+this.fillColor.join(",")+")";
+  this.output_ctxt.beginPath();
+  this.output_ctxt.arc(this.x0,this.y0,this.radius,0,2*Math.PI);
+  this.output_ctxt.fill();
+}
+animations.MovingCircle.prototype.animate=function() {
+  this.output_ctxt.beginPath();
+  this.output_ctxt.clearRect(this.x0-this.radius,this.y0-this.radius,this.radius*2,this.radius*2);
+  this.move();
+  this.draw();
+}
+
+animations.MovingCircleHChangingColor=function(output_canvas_id,opt_options) {
+  this.__proto__.__proto__=new animations.MovingCircle(output_canvas_id,opt_options);
+
+  this.fillColor0=opt_options&&opt_options.fillColor0?opt_options.fillColor0:[255,0,0,0];
+  this.fillColor1=opt_options&&opt_options.fillColor1?opt_options.fillColor1:[0,255,0,0];
+  this.fillColorNbSteps=opt_options&&opt_options.fillColorNbSteps?opt_options.fillColorNbSteps:5;
+  this.fillColorIncrement=[];
+  for (i=0;i<4;i++) {
+    this.fillColorIncrement[i]=(this.fillColor1[i]-this.fillColor0[i])/this.fillColorNbSteps;
+  };
+  this.fillColor=this.fillColor0;
+  this.fillColorStepCount=0;
+  this.fillColorIncrementSign=1;
+
+}
+
+animations.MovingCircleHChangingColor.prototype.move=function() {
+  this.__proto__.__proto__.move();
+
+  if (this.fillColorStepCount==this.fillColorNbSteps) {
+    this.fillColorIncrementSign=-this.fillColorIncrementSign;
+    this.fillColorStepCount=0;
+  };
+
+  for (i=0;i<4;i++) {
+    this.fillColor[i]+=this.fillColorIncrementSign*this.fillColorIncrement[i];
+  };
+  this.fillColorStepCount++;
+}
+
+animations.MovingCircleHChangingColorChangingBackground=function(output_canvas_id,opt_options) {
+  this.__proto__.__proto__=new animations.MovingCircleHChangingColor(output_canvas_id,opt_options);
+
+  this.bgColor0=opt_options&&opt_options.bgColor0?opt_options.bgColor0:[255,0,0,255];
+  this.bgColor1=opt_options&&opt_options.bgColor1?opt_options.bgColor1:[0,255,0,255];
+  this.bgColorNbSteps=opt_options&&opt_options.bgColorNbSteps?opt_options.bgColorNbSteps:5;
+  this.bgColorIncrement=[];
+  for (i=0;i<4;i++) {
+    this.bgColorIncrement[i]=(this.bgColor1[i]-this.bgColor0[i])/this.bgColorNbSteps;
+  };
+  this.bgColor=this.bgColor0;
+  this.bgColorStepCount=0;
+  this.bgColorIncrementSign=1;
+
+}
+
+animations.MovingCircleHChangingColorChangingBackground.prototype.move=function() {
+  this.__proto__.__proto__.move();
+
+  if (this.bgColorStepCount==this.bgColorNbSteps) {
+    this.bgColorIncrementSign=-this.bgColorIncrementSign;
+    this.bgColorStepCount=0;
+  };
+
+  for (i=0;i<4;i++) {
+    this.bgColor[i]+=this.bgColorIncrementSign*this.bgColorIncrement[i];
+  };
+  this.bgColorStepCount++;
+}
+
+animations.MovingCircleHChangingColorChangingBackground.prototype.animate=function() {
+  this.output_ctxt.fillStyle="rgba("+this.bgColor.join(",")+")";
+  this.output_ctxt.beginPath();
+  this.output_ctxt.fillRect(0,0,this.output_cvs.width,this.output_cvs.height);
+  this.move();
+  this.draw();
+}

effects/focus.js

+var focus={}
+
+focus.MovingFocus = function(opt_options) {
+  this.focus_x=opt_options.focus_x;
+  this.focus_y=opt_options.focus_y;
+  this.focus_radius=opt_options.focus_radius;
+  this.focus_dx=opt_options&&opt_options.focus_dx?opt_options.focus_dx:this.focus_radius/10;
+  this.focus_dy=opt_options&&opt_options.focus_dy?opt_options.focus_dy:this.focus_radius/10;
+  this.width=opt_options.width;
+  this.height=opt_options.height;
+  this.random=opt_options&&opt_options.random?opt_options.random:false;
+}
+
+focus.MovingFocus.prototype.updateFocus=function() {
+  var increment_x=Math.round(this.focus_dx*(this.random?Math.random():1))
+  this.focus_x+=increment_x;
+
+  if ((this.focus_x+this.focus_radius>this.width)
+          || (this.focus_x-this.focus_radius<0)) {
+      this.focus_dx=-this.focus_dx;
+      this.focus_x+=2*this.focus_dx;
+
+  }
+
+  var increment_y=Math.round(this.focus_dy*(this.random?Math.random():1))
+  this.focus_y+=increment_y;
+  if ((this.focus_y+this.focus_radius>this.height)
+  ||(this.focus_y-this.focus_radius<0))
+  {
+      this.focus_dy=-this.focus_dy;
+      this.focus_y+=2*this.focus_dy;
+
+  }
+}
+
+focus.MovingFocus.prototype.isInsideFocus=function(i,j) {
+    if (Math.sqrt((i-this.focus_x)*(i-this.focus_x)+
+            (j-this.focus_y)*(j-this.focus_y))
+            <=this.focus_radius)
+        return true;
+    else
+        return false;
+}
+
+focus.MovingFocus.prototype.process = function(in_imgData,out_imgData) {
+  var self=this;
+  var w=0;
+  var count=0;
+  var pixels=in_imgData.data;
+
+  //console.log("track "+this.focus_x+"x"+this.focus_y);
+  for (var i = 0; i < in_imgData.height; i++) {
+    for (var j = 0; j < in_imgData.width; j++) {
+      var mean=(pixels[w+1]+pixels[w+2]+pixels[w])/3;
+
+      if (this.isInsideFocus(j,i)) {
+          var focus_i=i-this.focus_y;
+          var focus_j=j-this.focus_x;
+          var angleF=Math.atan2(focus_i,focus_j);
+
+          var radius=Math.round(Math.sqrt(focus_i*focus_i+focus_j*focus_j));
+          var angleR=Math.atan2(radius,this.focus_radius);
+
+          var cible_i=Math.round(this.focus_y+focus_i);
+          var cible_j=Math.round(this.focus_x+focus_j);
+
+          //var cible_i=Math.round(this.focus_y+
+          //                            radius*Math.sin(-angle));
+          //var cible_j=Math.round(this.focus_x+
+          //                             radius*Math.cos(-angle));
+
+          //var cible_i=Math.round(this.focus_y+
+          //                            radius*Math.sin(angle)*Math.sin(angle));
+          //var cible_j=Math.round(this.focus_x+
+          //                             radius*Math.cos(angle)*Math.cos(angle));
+
+          /*var cible_i=Math.round(this.focus_y+
+                                      radius*(Math.sin(angle*angle)));
+          var cible_j=Math.round(this.focus_x+
+                                       radius*(Math.cos(angle*angle)));
+          */
+
+          /*
+          var cible_i=Math.round(this.focus_y+
+                                      radius*(Math.sin(angleF)*Math.sin(angleR)));
+          var cible_j=Math.round(this.focus_x+
+                                       radius*(Math.cos(angleF)*Math.cos(angleR)));
+          */
+
+          /*var cible_i=Math.round(this.focus_y+
+                                      radius*(Math.sin(angleF)/Math.sin(angleR)));
+          var cible_j=Math.round(this.focus_x+
+                                       radius*(Math.cos(angleF)/Math.cos(angleR)));
+*/
+
+          /*var cible_i=Math.round(this.focus_y+
+                                      radius*radius/this.focus_radius
+                                      *Math.sin(angleF));
+          var cible_j=Math.round(this.focus_x+
+                                       radius*radius/this.focus_radius
+                                       *Math.cos(angleF));*/
+
+          var cible_w=(cible_i*in_imgData.width+cible_j)<<2;
+          //console.log(i+"x"+j+" "+w+" "+focus_i+"x"+focus_j+" - "+cible_i+"x"+cible_j+ " "+cible_w);
+          out_imgData.data[w+1]=pixels[cible_w+1];
+          out_imgData.data[w+2]=pixels[cible_w+2];
+          out_imgData.data[w]=pixels[cible_w];
+      } else {
+          out_imgData.data[w + 1]=mean * 1;
+          out_imgData.data[w + 2]=mean * 1;
+          out_imgData.data[ w ]=mean * 1;
+      }
+      out_imgData.data[w+3]=pixels[w+3];
+      w+=4;
+    }
+  }
+};

effects/generic.js

+var generic_effect={}
+
+generic_effect.apply_region_filter=function(in_imgData,out_imgData,window_width,window_height,
+  pixel_form_region_rgba_filter) {
+
+  var w=0;
+
+  for (var y=0;y<out_imgData.height;y++)
+    for (var x=0;x<out_imgData.width;x++) {
+      w=((y*out_imgData.width)+x)<<2;
+      new_rgba_pixel_val=pixel_form_region_rgba_filter(
+          in_imgData,
+          x-Math.round(window_width/2), y-Math.round(window_height/2),
+          window_width, window_height);
+      for (var i=0;i<4;i++) {
+        out_imgData.data[w+i]=new_rgba_pixel_val[i];
+      }
+    }
+}

effects/morpho.js

+var morpho_effects={}
+
+morpho_effects.DilatationWindow = function(opt_options) {
+  this.window_width=opt_options.window_width;
+  this.window_height=opt_options.window_height;
+}
+
+morpho_effects.DilatationWindow.prototype.process=function(in_imgData,out_imgData) {
+  return generic_effect.apply_region_filter(
+      in_imgData,out_imgData,this.window_width,this.window_height,
+      morpho_filters.max_from_region
+    );
+}
+
+morpho_effects.ErosionWindow = function(opt_options) {
+  this.window_width=opt_options.window_width;
+  this.window_height=opt_options.window_height;
+}
+
+morpho_effects.ErosionWindow.prototype.process=function(in_imgData,out_imgData) {
+  generic_effect.apply_region_filter(
+      in_imgData,out_imgData,this.window_width,this.window_height,
+      morpho_filters.min_from_region);
+}
+
+morpho_effects.DilatationErosionWindow = function(opt_options) {
+  this.dilatation_width=opt_options.dilatation_width;
+  this.dilatation_height=opt_options.dilatation_height;
+  this.erosion_width=opt_options.erosion_width;
+  this.erosion_height=opt_options.erosion_height;
+  this.aux_cvs=document.createElement("canvas");
+}
+
+morpho_effects.DilatationErosionWindow.prototype.process=function(in_imgData,out_imgData) {
+  aux_imgData ={data:[],width:out_imgData.width,height:out_imgData.height};
+  generic_effect.apply_region_filter(
+      in_imgData,aux_imgData,this.dilatation_width,this.dilatation_height,
+      morpho_filters.max_from_region);
+  generic_effect.apply_region_filter(
+      aux_imgData,out_imgData,this.erosion_width,this.erosion_height,
+      morpho_filters.min_from_region);
+}

features/pixels.js

@@ -25,7 +25,7 @@ pixels_features.mean_rgb_per_region=function(imageData,opt_options) {
   var mean=[];
   mean[0]=0; mean[1]=0; mean[2]=0;
   var pos=0; var count=0;
-  for (var y=y0;y<y0+dy;y++)
+  for (var y=y0;y<y0+dy;y++) {
     for (var x=x0;x<x0+dx;x++) {
       pos=(y*imageData.width+x)<<2;
       if (imageData.data[pos+3]>0) {
@@ -35,11 +35,15 @@ pixels_features.mean_rgb_per_region=function(imageData,opt_options) {
         count++;
       }
     }
+  }
   if (count>0) {
+    console.log("count: "+count);
     for (var i=0;i<3;i++) {
       mean[i]=Math.round(mean[i]/count);
     }
     return mean;
+  } else {
+    console.log("no positive Alpha, no rgb mean");
   }
   return undefined;
 }
@@ -53,3 +57,38 @@ pixels_features.mean_rgb_per_region=function(imageData,opt_options) {
 pixels_features.grid_mean_rgb=function(imageData,opt_options) {
   return generic_features.grid_descriptor(imageData,pixels_features.mean_rgb_per_region,opt_options);
 }
+
+/*
+  pixels_features.mean_rgb_afactor_per_region
+  - computes RGB mean of all pixels considering A as a weight of RGB channels
+  within opt_options.x0 .y0 .dx .dy
+  - if opt_options missing partially,
+      replace partially with defaults 0, 0, imageData.width, imageData.height
+  - returns undefined if none available
+*/
+pixels_features.mean_rgb_afactor_per_region=function(imageData,opt_options) {
+  x0=opt_options&&opt_options.x0?opt_options.x0:0;
+  y0=opt_options&&opt_options.y0?opt_options.y0:0;
+  dx=opt_options&&opt_options.dx?opt_options.dx:imageData.width;
+  dy=opt_options&&opt_options.dy?opt_options.dy:imageData.height;
+
+
+  var mean=[];
+  mean[0]=0; mean[1]=0; mean[2]=0;
+  var pos=0; var count=0;
+  for (var y=y0;y<y0+dy;y++)
+    for (var x=x0;x<x0+dx;x++) {
+      pos=(y*imageData.width+x)<<2;
+      for (var i=0;i<3;i++) {
+        mean[i]+=(imageData.data[pos+i]*imageData.data[pos+3]);
+      }
+      count++;
+    }
+  if (count>0) {
+    for (var i=0;i<3;i++) {
+      mean[i]=Math.round(mean[i]/count);
+    }
+    return mean;
+  }
+  return undefined;
+}

filters/linear.js

+var linear_filters={}
+
+linear_filters.identity=function(imgData,x0,y0,region_width,region_height) {
+  var w=((y0+Math.round(region_height/2))*imgData.width+(x0+Math.round(region_width/2)))<<2;
+  return [imgData.data[w],imgData.data[w+1],imgData.data[w+2],imgData.data[w+3]];
+}

filters/morpho.js

+var morpho_filters={}
+
+morpho_filters.max_from_region=function(imgData,x0,y0,reg_width,reg_height) {
+  var pixels=imgData.data;
+  var w=((y0+Math.round(reg_height/2))*imgData.width
+                                        +(x0+Math.round(reg_width/2)))<<2;
+  var max_data=[pixels[w],pixels[w+1],pixels[w+2],pixels[w+3]];
+  var max=(pixels[w]+pixels[w+1]+pixels[w+2])*pixels[w+3];
+
+  for (var y=Math.max(0,y0);y<Math.min(y0+reg_height,imgData.height);y++)
+    for (var x=Math.max(0,x0);x<Math.min(x0+reg_width,imgData.width);x++) {
+      w = (y*imgData.width+x)<<2;
+      var val = (pixels[w]+pixels[w+1]+pixels[w+2])*pixels[w+3];
+      if (max < val) {
+        if (pixels[w+3]<255) pixels[w+3]=255;
+        max = val; max_data = [pixels[w],pixels[w+1],pixels[w+2],pixels[w+3]];
+      }
+    }
+  return max_data;
+}
+
+morpho_filters.max_red_from_region=function(imgData,x0,y0,reg_width,reg_height) {
+  var pixels=imgData.data;
+  var w=((y0+Math.round(reg_height/2))*imgData.width+(x0+Math.round(reg_width/2)))<<2;
+  var max_data=[pixels[w],pixels[w+1],pixels[w+2],pixels[w+3]];
+  var max=(pixels[w]-pixels[w+1]-pixels[w+2])*pixels[w+3];
+  for (var y=y0;y<y0+reg_height;y++) {
+    if (y<0 || y>imgData.height) continue;
+    for (var x=x0;x<x0+reg_width;x++) {
+      if (x<0 || x>imgData.width) continue;
+      w = (y*imgData.width+x)<<2;
+      var val = (pixels[w]-pixels[w+1]-pixels[w+2])*pixels[w+3];
+      if (max < val) {
+        max = val;
+        max_data=[pixels[w], pixels[w+1],
+                  pixels[w+2], pixels[w+3]];
+      }
+    }
+  }
+  return max_data;
+}
+
+morpho_filters.max_gray_from_region=function(imgData,x0,y0,reg_width,reg_height) {
+  var pixels=imgData.data;
+  var w=((y0+Math.round(reg_height/2))*imgData.width+(x0+Math.round(reg_width/2)))<<2;
+  var max_data=[pixels[w],pixels[w+1],pixels[w+2],pixels[w+3]];
+  var max=(pixels[w]+pixels[w+1]+pixels[w+2])*pixels[w+3];
+
+  for (var y=y0;y<y0+reg_height;y++) {
+    if (y<0 || y>imgData.height) continue;
+    for (var x=x0;x<x0+reg_width;x++) {
+      if (x<0 || x>imgData.width) continue;
+      w = (y*imgData.width+x)<<2;
+      var val = (pixels[w]+pixels[w+1]+pixels[w+2])*pixels[w+3];
+      if (max < val) {
+        max = val;
+        max_data=[val/3, val/3,
+                  val/3, pixels[w+3]];
+      }
+    }
+  }
+  return max_data;
+}
+
+morpho_filters.min_from_region=function(imgData,x0,y0,reg_width,reg_height) {
+  var pixels=imgData.data;
+  var w=((y0+Math.round(reg_height/2))*imgData.width+(x0+Math.round(reg_width/2)))<<2;
+  var min_data=[pixels[w],pixels[w+1],pixels[w+2],pixels[w+3]];
+  var min=(pixels[w]+pixels[w+1]+pixels[w+2])*pixels[w+3];
+  for (var y=y0;y<y0+reg_height;y++) {
+    if (y<0 || y>imgData.height) continue;
+    for (var x=x0;x<x0+reg_width;x++) {
+      if (x<0 || x>imgData.width) continue;
+      w = (y*imgData.width+x)<<2;
+      var val = (pixels[w]+pixels[w+1]+pixels[w+2])*pixels[w+3];
+      if (min > val) {
+        min = val;
+        min_data=[pixels[w], pixels[w+1],
+                  pixels[w+2], pixels[w+3]];
+      }
+    }
+  }
+  return min_data;
+}

metrics/pixels.js

@@ -9,10 +9,42 @@ pixel_metrics.rgb_edist=function(pixel_rgb1, pixel_rgb2) {
 }
 
 /*
-    pixel_metrics.rgb_edist - computes euclidian distance between two grids
+    pixel_metrics.grid_rgb_edist - computes euclidian distance between two grids
     containing in each cell an rgb pixel
 */
 pixel_metrics.grid_rgb_edist=function(pixels_rgb_grid1, pixels_rgb_grid2) {
   var dist_fun=pixel_metrics.rgb_edist;
   return generic_metrics.euclidian_distance_btw_feature_vectors(pixels_rgb_grid1.cells,pixels_rgb_grid2.cells,dist_fun);
 }
+
+/*
+    pixel_metrics.pixel_edist - computes euclidian distance between two pixels
+    regardless of color encoding
+*/
+pixel_metrics.pixel_edist=function(pixel_rgb1, pixel_rgb2) {
+  var dist_fun=function(x,y){return x-y};
+  return generic_metrics.euclidian_distance_btw_feature_vectors(pixel_rgb1,pixel_rgb2,dist_fun);
+}
+
+/*
+    pixel_metrics.gray_edist - computes euclidian distance between two pixels
+    considering the intensity value
+*/
+pixel_metrics.gray_edist=function(pixel_rgb1, pixel_rgb2) {
+  var pixel_gray_1=Math.round((pixel_rgb1[0]+pixel_rgb1[1]+pixel_rgb1[2])/3);
+  var pixel_gray_2=Math.round((pixel_rgb2[0]+pixel_rgb2[1]+pixel_rgb2[2])/3);
+
+  return Math.abs(pixel_gray_1-pixel_gray_2);
+}
+
+/*
+    pixel_metrics.visible_edist - computes euclidian distance between two pixels
+    considering the fact that pixels are both visible/invisible
+    returns 0 or 1
+*/
+pixel_metrics.visible_edist=function(pixel_rgb1, pixel_rgb2) {
+  var pixel_gray_1=Math.round((pixel_rgb1[0]+pixel_rgb1[1]+pixel_rgb1[2])/3);
+  var pixel_gray_2=Math.round((pixel_rgb2[0]+pixel_rgb2[1]+pixel_rgb2[2])/3);
+  return (pixel_gray_1>0 && pixel_gray_2>0) || (pixel_gray_1==0 && pixel_gray_2==0);
+
+}

movement/detection.js

+var mvt_detection={}
+
+mvt_detection.SimpleMvtDetectorRegion=function(opt_options) {
+  this.difference = document.createElement("canvas");
+  this.previous = document.createElement("canvas");
+
+  this.bbox=opt_options.bbox;
+
+  this.difference.width=this.bbox.dx; this.difference.height=this.bbox.dy;
+  this.previous.width=this.bbox.dx; this.previous.height=this.bbox.dy;
+
+  this.difference_ctxt = this.difference.getContext("2d");
+  this.previous_ctxt = this.previous.getContext("2d");
+
+  this.diff_threshold=opt_options.diff_threshold;
+  this.mvt_threshold=opt_options.mvt_threshold;
+}
+
+mvt_detection.SimpleMvtDetectorRegion.prototype.set_first_frame_from_eltId=function(eltId) {
+  var elt=document.getElementById(eltId);
+  var cvs=document.createElement("canvas");
+  cvs.width=elt.width; cvs.height=elt.height;
+  var ctxt=cvs.getContext("2d");
+  ctxt.drawImage(elt,0,0);
+  var first_imgData=ctxt.getImageData(this.bbox.x0,this.bbox.y0,this.bbox.dx,this.bbox.dy);
+  this.previous_ctxt.putImageData(first_imgData,0,0);
+}
+
+mvt_detection.SimpleMvtDetectorRegion.prototype.process=function(in_imgData, out_imgData) {
+  var previous_imgData = this.previous_ctxt.
+                            getImageData(0, 0, this.bbox.dx, this.bbox.dy);
+  in_reg_imgData=in_imgData.ctxt.getImageData(this.bbox.x0,this.bbox.y0,this.bbox.dx,this.bbox.dy);
+
+  var w=0;
+  var count=0;
+  var min=[255,255,255], max=[0,0,0];
+  for (var x=0; x<this.bbox.dx ; x++)
+    for (var y=0; y<this.bbox.dy ; y++) {
+      var diff=0;
+        for (var i=0; i<3; i++) {
+          out_imgData.data[w+i] = Math.abs(in_reg_imgData.data[w+i] - previous_imgData.data[w+i]);
+          diff += out_imgData.data[w+i];
+        }
+        count+=(diff>this.diff_threshold);
+        out_imgData.data[w+3] = 255;
+        w+=4;
+    }
+
+  this.previous_ctxt.putImageData(in_reg_imgData,0,0);
+  if (out_imgData) {
+    Tools.copy_partial_imageData_into_imageData(in_imgData,0,0,in_imgData.width,in_imgData.height,out_imgData,0,0);
+    Tools.strokeBBox_on_imageData(out_imgData,this.bbox,[255*(count>this.mvt_threshold),0,0,255]);
+  }
+  return (count>this.mvt_threshold);
+}

movement/difference.js

+var diff={}
+
+diff.DifferenceImageRGB=function(opt_options) {
+  this.difference = document.createElement("canvas");
+  this.previous = document.createElement("canvas");
+
+  this.width=opt_options.width;
+  this.height=opt_options.height;
+
+  this.difference.width=this.width; this.difference.height=this.height;
+  this.previous.width=this.width; this.previous.height=this.height;
+
+  this.difference_ctxt = this.difference.getContext("2d");
+  this.previous_ctxt = this.previous.getContext("2d");
+}
+
+diff.DifferenceImageRGB.prototype.set_first_frame_imgData=function(imgData) {
+  this.previous_ctxt.putImageData(imgData,0,0);
+}
+
+diff.DifferenceImageRGB.prototype.set_first_frame_from_eltId=function(eltId) {
+  var elt=document.getElementById(eltId);
+  var cvs=document.createElement("canvas");
+  cvs.width=elt.width; cvs.height=elt.height;
+  var ctxt=cvs.getContext("2d");
+  ctxt.drawImage(elt,0,0);
+  this.set_first_frame_imgData(ctxt.getImageData(0,0,cvs.width,cvs.height));
+}
+
+diff.DifferenceImageRGB.prototype.process=function(in_imgData, out_imgData) {
+  var previous_imgData = this.previous_ctxt.
+                            getImageData(0, 0, this.width, this.height);
+  var w=0;
+  var min=[255,255,255], max=[0,0,0];
+  for (var x=0; x<this.width ; x++)
+    for (var y=0; y<this.height ; y++) {
+        for (var i=0; i<3; i++) {
+          out_imgData.data[w+i] =
+          Math.abs(in_imgData.data[w+i] - previous_imgData.data[w+i]);
+        }
+        out_imgData.data[w+3] = 255;
+        w+=4;
+    }
+  this.previous_ctxt.putImageData(in_imgData,0,0);
+}
+
+diff.NormalizedDifferenceImageRGB=function(opt_options) {
+  this.__proto__.__proto__=new diff.DifferenceImageRGB(opt_options);
+}
+
+diff.NormalizedDifferenceImageRGB.prototype.process=function(in_imgData, out_imgData) {
+  var previous_imgData = this.previous_ctxt.
+                            getImageData(0, 0, this.width, this.height);
+  var w=0;
+  var min=[255,255,255], max=[0,0,0];
+  for (var x=0; x<this.width ; x++)
+    for (var y=0; y<this.height ; y++) {
+        for (var i=0; i<3; i++) {
+          out_imgData.data[w+i] = Math.abs(in_imgData.data[w+i] - previous_imgData.data[w+i]);
+          if (min[i]>out_imgData.data[w+i]) min[i]=out_imgData.data[w+i];
+          if (max[i]<out_imgData.data[w+i]) max[i]=out_imgData.data[w+i];
+        }
+        out_imgData.data[w+3] = 255;
+        w+=4;
+    }
+
+  w=0;
+  for (var x=0; x<this.width ; x++)
+    for (var y=0; y<this.height ; y++) {
+        for (var i=0; i<3; i++) {
+          out_imgData.data[w+i] = (out_imgData.data[w+i]-min[i])*255/(max[i]-min[i]);
+        }
+        out_imgData.data[w+3] = 255;
+        w+=4;
+    }
+  this.previous_ctxt.putImageData(in_imgData,0,0);
+}

processing.js

@@ -5,11 +5,14 @@ var processing=function(elementId,task,outputCanvasId) {
 
   this.imageData = {};
 
+  if (this.element.nodeName.toLowerCase()!="canvas") {
     this.processing_canvas=document.createElement('canvas');
     this.processing_canvas.width = this.width;
     this.processing_canvas.height = this.height;
-
     this.processing_context=this.processing_canvas.getContext("2d");
+  } else {
+    this.processing_canvas=this.element;
+  }
 
   this.task=task;
 
@@ -30,8 +33,7 @@ processing.prototype.acquire_data_from_video=function() {
 }
 
 processing.prototype.acquire_data_from_canvas=function() {
-  this.processing_context.drawImage(this.element,0,0,this.width,this.height);
-  this.imageData = this.processing_context.getImageData(0, 0, this.width, this.height);
+  this.imageData = this.this.processing_canvas.getContext("2d").getImageData(0, 0, this.width, this.height);
 }
 
 processing.prototype.acquire_data=function() {

processing2.js

@@ -8,12 +8,15 @@ var processing2=function(elementId,task,outputCanvasId,opt_options) {
   this.in_imageData = {};
   this.out_imageData = {};
 
+  if (this.element.nodeName.toLowerCase()!="canvas") {
     this.processing_canvas=document.createElement('canvas');
     this.processing_canvas.width = this.width;
     this.processing_canvas.height = this.height;
+  } else {
+    this.processing_canvas=this.element;
+  }
 
   this.processing_context=this.processing_canvas.getContext("2d");
-
   this.task=task;
 
 
@@ -46,13 +49,14 @@ processing2.prototype.acquire_data_from_video=function() {
 }
 
 processing2.prototype.acquire_data_from_canvas=function() {
-  this.processing_context.drawImage(this.element,0,0,this.width,this.height);
   this.in_imageData = this.processing_context.getImageData(this.in_region.x, this.in_region.y, this.in_region.width, this.in_region.height);
 }
 
 processing2.prototype.acquire_data=function() {
-  if (this.output_canvas)
+  if (this.output_canvas) {
     this.out_imageData=this.output_context.getImageData(this.out_region.x,this.out_region.y,this.out_region.width,this.out_region.height);
+    this.out_imageData.ctxt=this.output_context;
+  }
 
   switch (this.element.nodeName.toLowerCase()) {
       case 'canvas':
@@ -64,6 +68,7 @@ processing2.prototype.acquire_data=function() {
       default:
         throw new Error('Element not supported!');
     }
+    this.in_imageData.ctxt = this.processing_context;
 }
 
 processing2.prototype.do_process=function() {

samples/blobs_appearance.html

+<html>
+<head>
+<script lang="js" src="../tools.js"></script>
+<script lang="js" src="../processing2.js"></script>
+<script lang="js" src="../movement/difference.js"></script>
+<script lang="js" src="../effects/focus.js"></script>
+<script lang="js" src="../metrics/generic.js"></script>
+<script lang="js" src="../metrics/pixels.js"></script>
+<script lang="js" src="../segmentation/blobs.js"></script>
+</head>
+<body>
+
+  <img id="input" src="../data/rgb.png" width="50" height="50"></img>
+  <canvas id="output" width="50" height="50"></canvas>
+
+
+
+  <script lang="javascript">
+    var _opt_options={metric:pixel_metrics.gray_edist,threshold:10};
+    var _task1=new blobs.Pixel8ConnectivityBlobs(_opt_options);
+    var _proc1=new processing2("input",_task1,"output");
+    _proc1.do_process();
+    var components_bbox=_proc1.get_result();
+
+    /*
+    var cvs_ctxt=document.getElementById("output").getContext("2d");
+    console.log(components_bbox);
+    for (idx in components_bbox) {
+      cvs_ctxt.strokeStyle=[components_bbox[idx].mean[0],
+      components_bbox[idx].mean[1],components_bbox[idx].mean[2],255];
+      cvs_ctxt.strokeRect(
+          components_bbox[idx].x, components_bbox[idx].y,
+          components_bbox[idx].width, components_bbox[idx].height,
+          );
+    }*/
+  </script>
+</body>
+</html>

samples/blobs_diff_img_dilatation_erosion.html

+<html>
+<head>
+<script lang="js" src="../tools.js"></script>
+<script lang="js" src="../processing2.js"></script>
+<script lang="js" src="../movement/difference.js"></script>
+<script lang="js" src="../effects/focus.js"></script>
+<script lang="js" src="../metrics/generic.js"></script>
+<script lang="js" src="../metrics/pixels.js"></script>
+<script lang="js" src="../effects/generic.js"></script>
+<script lang="js" src="../effects/morpho.js"></script>
+<script lang="js" src="../filters/morpho.js"></script>
+<script lang="js" src="../filters/linear.js"></script>
+
+<script lang="js" src="../segmentation/blobs.js"></script>
+</head>
+<body>
+
+  <img id="input" src="../data/16_03.jpg" width="320" height="180"></img>
+  <canvas id="output1" width="320" height="180"></canvas><br></br>
+  <canvas id="output2" width="320" height="180" style="display:none"></canvas>
+  <canvas id="output3" width="320" height="180"></canvas>
+  <canvas id="output4" width="320" height="180"></canvas>
+
+
+  <script lang="javascript">
+    var _focus_options={focus_x:50,focus_y:50,focus_dx:5,focus_dy:5,focus_radius:50,width:320,height:180};
+    var _task1=new focus.MovingFocus(_focus_options);
+    var _proc1=new processing2("input",_task1,"output1");
+
+    var _opt_options={width:320,height:180};
+    var _task2=new diff.NormalizedDifferenceImageRGB(_opt_options);
+    var _proc2=new processing2("output1",_task2,"output2");
+
+    var _opt_options={dilatation_width:8,dilatation_height:8,
+                      erosion_width:2,erosion_height:2};
+    var _task3=new morpho_effects.DilatationErosionWindow(_opt_options);
+    var _proc3=new processing2("output2",_task3,"output3");
+
+    var _opt_options={metric:pixel_metrics.visible_edist,threshold:0};
+    var _task4=new blobs.Pixel8ConnectivityBlobs(_opt_options);
+    var _proc4=new processing2("output3",_task4,"output4");
+
+    var img_elt=document.getElementById("input");
+    img_elt.addEventListener("loadeddata",function(){
+      _task2.set_first_frame_from_eltId("input");
+    });
+    var count=0;
+    var cvs4=document.getElementById("output4");
+    var cvs4_ctxt=cvs4.getContext("2d");
+    var loop=function() {
+      _proc1.do_process();
+      _task1.updateFocus();
+
+      _proc2.do_process();
+      _proc3.do_process();
+
+      cvs4_ctxt.beginPath();
+      cvs4_ctxt.clearRect(0,0,cvs4.width,cvs4.height);
+      _proc4.do_process();
+
+      count++;
+
+      if (count<1000)
+        setTimeout(loop,200);
+    }
+
+    loop();
+
+  </script>
+</body>
+</html>

samples/blobs_diff_img_no_normalization.html

+<html>
+<head>
+<script lang="js" src="../tools.js"></script>
+<script lang="js" src="../processing2.js"></script>
+<script lang="js" src="../movement/difference.js"></script>
+<script lang="js" src="../movement/detection.js"></script>
+<script lang="js" src="../effects/focus.js"></script>
+<script lang="js" src="../metrics/generic.js"></script>
+<script lang="js" src="../metrics/pixels.js"></script>
+<script lang="js" src="../segmentation/blobs.js"></script>
+</head>
+<body>
+
+  <img id="input" src="../data/16_03.jpg" width="320" height="180"></img>
+  <canvas id="output1" width="320" height="180"></canvas>
+  <canvas id="output2" width="320" height="180"></canvas>
+  <canvas id="output3" width="320" height="180"></canvas>
+
+
+  <script lang="javascript">
+    var _focus_options={focus_x:20,focus_y:20,focus_radius:20,width:320,height:180};
+    var _task1=new focus.MovingFocus(_focus_options);
+    var _proc1=new processing2("input",_task1,"output1");
+
+    var _opt_options={width:320,height:180};
+    var _task2=new diff.DifferenceImageRGB(_opt_options);
+    var _proc2=new processing2("output1",_task2,"output2");
+
+    var _opt_options={metric:pixel_metrics.visible_edist,threshold:0};
+    var _task3=new blobs.Pixel8ConnectivityBlobs(_opt_options);
+    var _proc3=new processing2("output2",_task3,"output3");
+
+    var img_elt=document.getElementById("input");
+    img_elt.addEventListener("loadeddata",function(){
+      _task2.set_first_frame_from_eltId("input");
+    });
+
+    var cvs3=document.getElementById("output3");
+    var cvs3_ctxt=cvs3.getContext("2d");
+
+    var count=0;
+    var loop=function() {
+      _proc1.do_process();
+      _task1.updateFocus();
+
+      _proc2.do_process();
+
+      cvs3_ctxt.beginPath();
+      cvs3_ctxt.clearRect(0,0,cvs3.width,cvs3.height);
+      _proc3.do_process();
+      count++;
+
+      if (count<100)
+        setTimeout(loop,100);
+    }
+
+    loop();
+
+  </script>
+</body>
+</html>

samples/blobs_diff_img_with_normalization.html

+<html>
+<head>
+<script lang="js" src="../tools.js"></script>
+<script lang="js" src="../processing2.js"></script>
+<script lang="js" src="../movement/difference.js"></script>
+<script lang="js" src="../effects/focus.js"></script>
+<script lang="js" src="../metrics/generic.js"></script>
+<script lang="js" src="../metrics/pixels.js"></script>
+<script lang="js" src="../segmentation/blobs.js"></script>
+</head>
+<body>
+
+  <img id="input" src="../data/16_03.jpg" width="320" height="180"></img>
+  <canvas id="output1" width="320" height="180"></canvas><br></br>
+  <canvas id="output2" width="320" height="180"></canvas>
+  <canvas id="output3" width="320" height="180"></canvas>
+
+
+
+  <script lang="javascript">
+    var _focus_options={focus_x:50,focus_y:50,focus_radius:50,width:320,height:180};
+    var _task1=new focus.MovingFocus(_focus_options);
+    var _proc1=new processing2("input",_task1,"output1");
+
+    var _opt_options={width:320,height:180};
+    var _task2=new diff.NormalizedDifferenceImageRGB(_opt_options);
+    var _proc2=new processing2("output1",_task2,"output2");
+
+    var _opt_options={metric:pixel_metrics.visible_edist,threshold:0};
+    var _task3=new blobs.Pixel8ConnectivityBlobs(_opt_options);
+    var _proc3=new processing2("output2",_task3,"output3");
+
+    var img_elt=document.getElementById("input");
+    img_elt.addEventListener("loadeddata",function(){
+      _task2.set_first_frame_from_eltId("input");
+    });
+
+    var cvs3=document.getElementById("output3");
+    var cvs3_ctxt=cvs3.getContext("2d");
+
+    var count=0;
+    var loop=function() {
+      _proc1.do_process();
+      _task1.updateFocus();
+
+      _proc2.do_process();
+      
+      cvs3_ctxt.beginPath();
+      cvs3_ctxt.clearRect(0,0,cvs3.width,cvs3.height);
+      _proc3.do_process();
+      count++;
+      console.log(count);
+      if (count<100)
+        setTimeout(loop,200);
+    }
+
+    loop();
+
+  </script>
+</body>
+</html>

samples/difference_animation.html

+<html>
+<head>
+<script lang="js" src="../tools.js"></script>
+<script lang="js" src="../processing2.js"></script>
+<script lang="js" src="../movement/difference.js"></script>
+<script lang="js" src="../effects/focus.js"></script>
+<script lang="js" src="../features/generic.js"></script>
+<script lang="js" src="../features/pixels.js"></script>
+<script lang="js" src="../metrics/generic.js"></script>
+<script lang="js" src="../metrics/pixels.js"></script>
+<script lang="js" src="../animation/moving_circle.js"></script>
+<script lang="js" src="../tracking/appearance.js"></script>
+</head>
+<body><!--style="background-color:black; vertical-align: top;"-->
+
+  <canvas id="input" width="300" height="200"  style="vertical-align: top;"></canvas>
+  <canvas id="output" width="300" height="200"  style="vertical-align: top;"></canvas>
+
+
+  <script lang="javascript">
+    var _opt_options={
+      x0:40,y0:40,radius:40,step_x:10,step_y:10,random:true,
+    };
+    var _task1=new animations.MovingCircle("input",_opt_options);
+
+    var _opt_options={width:300,height:200,threshold:1};
+    var _task2=new diff.NormalizedDifferenceImageRGB(_opt_options);
+    var _proc2=new processing2("input",_task2,"output");
+
+    _task1.draw();
+    _task2.set_first_frame_from_eltId("input");
+
+    var loop=function() {
+      _task1.animate();
+      _proc2.do_process();
+
+      setTimeout(loop,200);
+    }
+    loop();
+
+  </script>
+</body>
+</html>