Skip to content
Snippets Groups Projects
Commit bcccb302 authored by Marius Bilasco's avatar Marius Bilasco
Browse files

TP3 : meanshift, difference, mvt, morpho, blobs

parent 737a6e3e
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 600 additions and 0 deletions
samples/difference_effect.html 0 → 100644
+ 47
− 0
View file @ bcccb302
<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>
</head>
<body>
<img id="input" src="../data/16_05.jpg" width="320" height="180"></img>
<canvas id="output1" width="320" height="180"></canvas><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,random:true,
focus_dx:20,focus_dy:20};
var _task1=new focus.MovingFocus(_focus_options);
var _proc1=new processing2("input",_task1,"output1");
var _opt_options={width:320,height:180,threshold:50};
var _task2=new diff.DifferenceImageRGB(_opt_options);
var _proc2=new processing2("output1",_task2,"output2");
var _opt_options={width:320,height:180,threshold:1};
var _task3=new diff.NormalizedDifferenceImageRGB(_opt_options);
var _proc3=new processing2("output1",_task3,"output3");
var img_elt=document.getElementById("input");
img_elt.addEventListener("loadeddata",function(){
_task2.set_first_frame_from_eltId("input");
});
var loop=function() {
_proc1.do_process();
_task1.updateFocus();
_proc2.do_process();
_proc3.do_process();
setTimeout(loop,200);
}
loop();
</script>
</body>
</html>
samples/difference_video.html 0 → 100644
+ 31
− 0
View file @ bcccb302
<html>
<head>
<script lang="js" src="../tools.js"></script>
<script lang="js" src="../processing2.js"></script>
<script lang="js" src="../movement/difference.js"></script>
</head>
<body>
<video autoplay loop src="../data/surprise.mp4" id="input" width="320" height="180"></video>
<canvas id="output1" width="320" height="180"></canvas>
<script lang="javascript">
var _opt_options={width:320,height:180};
var _task1=new diff.DifferenceImageRGB(_opt_options);
var video_elt=document.getElementById("input");
video_elt.addEventListener("loadeddata",function(){
_task1.set_first_frame_from_eltId("input");
});
var _proc1=new processing2("input",_task1,"output1");
var loop=function() {
_proc1.do_process();
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>
samples/meanshift_changing_circle_and_bg_color.html 0 → 100644
+ 66
− 0
View file @ bcccb302
<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;"-->
<canvas id="input" width="150" height="100" style="vertical-align:top" ></canvas>
<canvas id="output2" width="250" height="400"></canvas>
<script lang="javascript">
var _opt_options={
x0:10,y0:10,radius:10,step_x:2,step_y:2,random:true,
fillColor0:[255,0,0,255],
fillColor1:[127,0,0,255],
fillColorNbSteps:100,
bgColor0:[127,0,0,255],
bgColor1:[255,0,0,255],
bgColorNbSteps:100
};
var _task1=new animations.MovingCircleHChangingColorChangingBackground("input",_opt_options);
var _bbox={x0:0,y0:0,dx:20,dy:20};
var _tracking_options={
window_width:40,
window_height:40,
step_x:3,
step_y:3,
update_model:false
};
var _task2=new appearance_tracking.MeanShift(_bbox,
pixels_features.mean_rgb_afactor_per_region,
pixel_metrics.pixel_edist,
_tracking_options);
var _proc2=new processing2("input",_task2,"output2");
var count=0;
_task1.draw();
var loop=function() {
_proc2.do_process();
_task1.animate();
count++;
if (count<1000)
setTimeout(loop,100);
}
loop();
</script>
</body>
</html>
samples/meanshift_changing_circle_color.html 0 → 100644
+ 62
− 0
View file @ bcccb302
<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="150" height="100" style="vertical-align: top;"></canvas>
<canvas id="output2" width="250" height="700" style="vertical-align: top;"></canvas>
<script lang="javascript">
var _opt_options={
x0:10,y0:10,radius:10,step_x:2,step_y:2,random:true,
fillColor0:[255,0,0,255],
fillColor1:[0,255,0,255],
fillColorNbSteps:100
};
var _task1=new animations.MovingCircleHChangingColor("input",_opt_options);
var _bbox={x0:0,y0:0,dx:20,dy:20};
var _tracking_options={
window_width:60,
window_height:60,
step_x:3,
step_y:3,
update_model:false
};
var _task2=new appearance_tracking.MeanShift(_bbox,
pixels_features.mean_rgb_afactor_per_region,
pixel_metrics.pixel_edist,_tracking_options);
var _proc2=new processing2("input",_task2,"output2");
var count=0;
_task1.draw();
var loop=function() {
_proc2.do_process();
_task1.animate();
count++;
if (count<1000)
setTimeout(loop,100);
}
loop();
</script>
</body>
</html>
samples/meanshift_circle.html 0 → 100644
+ 56
− 0
View file @ bcccb302
<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;" -->
<canvas id="input" width="150" height="100" style="vertical-align:top" ></canvas>
<canvas id="output2" width="250" height="700"></canvas>
<script lang="javascript">
var _opt_options={x0:10,y0:10,radius:10,step_x:2,step_y:2,random:true,fillStyle:"red"};
var _task1=new animations.MovingCircle("input",_opt_options);
var _bbox={x0:0,y0:0,dx:20,dy:20};
var _tracking_options={
window_width:40,
window_height:40,
step_x:3,
step_y:3
};
var _task2=new appearance_tracking.MeanShift(_bbox,
pixels_features.mean_rgb_afactor_per_region,
pixel_metrics.pixel_edist,_tracking_options);
var _proc2=new processing2("input",_task2,"output2");
var count=0;
_task1.draw();
var loop=function() {
_proc2.do_process();
_task1.animate();
count++;
if (count<1000)
setTimeout(loop,100);
}
loop();
</script>
</body>
</html>
samples/morpho_dilatation.html 0 → 100644
+ 0
− 0
View file @ bcccb302
samples/morpho_dilatation_erosion.html 0 → 100644
+ 49
− 0
View file @ bcccb302
<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="../metrics/generic.js"></script>
<script lang="js" src="../metrics/pixels.js"></script>
<script lang="js" src="../filters/morpho.js"></script>
<script lang="js" src="../effects/generic.js"></script>
<script lang="js" src="../effects/morpho.js"></script>
</head>
<body>
<img id="input" src="../data/red_circle.gif" width="320" height="200"></img>
<canvas id="output1"></canvas>
<canvas id="output2"></canvas>
<br></br>
<img id="input2" src="../data/16_03.jpg" width="320" height="200"></img>
<canvas id="output3"></canvas>
<canvas id="output4"></canvas>
<script lang="javascript">
Tools.copySize("input","output1");
Tools.copySize("input","output2");
var _opt_options={window_width:10,window_height:10};
var _task1=new morpho_effects.DilatationWindow(_opt_options);
var _proc1=new processing2("input",_task1,"output1");
_proc1.do_process();
var _task2=new morpho_effects.ErosionWindow(_opt_options);
var _proc2=new processing2("output1",_task2,"output2");
_proc2.do_process();
Tools.copySize("input2","output3");
Tools.copySize("input2","output4");
var _opt_options={window_width:10,window_height:10};
var _task3=new morpho_effects.DilatationWindow(_opt_options);
var _proc3=new processing2("input2",_task3,"output3");
_proc3.do_process();
var _task4=new morpho_effects.ErosionWindow(_opt_options);
var _proc4=new processing2("output3",_task4,"output4");
_proc4.do_process();
</script>
</body>
</html>
samples/mvt_detection_region.html 0 → 100644
+ 62
− 0
View file @ bcccb302
<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><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={bbox:{x0:100,y0:100,dx:50,dy:50},
mvt_threshold:50,diff_threshold:30};
var _task3=new mvt_detection.SimpleMvtDetectorRegion(_opt_options);
var _proc3=new processing2("output1",_task3,"output3");
var img_elt=document.getElementById("input");
img_elt.addEventListener("loadeddata",function(){
_task2.set_first_frame_from_eltId("input");
_task5.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();
_proc3.do_process();
count++;
if (count<100)
setTimeout(loop,100);
}
loop();
</script>
</body>
</html>
segmentation/blobs.js 0 → 100644
+ 93
− 0
View file @ bcccb302
var blobs={}
blobs.Pixel8ConnectivityBlobs=function(opt_options) {
this.metric = opt_options.metric;
this.threshold=opt_options && opt_options.threshold ? opt_options.threshold : 0;
}
blobs.Pixel8ConnectivityBlobs.prototype.analyse_neighbours=function(in_imgData, x0, y0) {
w0=((y0*in_imgData.width)+x0)<<2;
var pixel0=[in_imgData.data[w0],in_imgData.data[w0+1],in_imgData.data[w0+2]];
var local_connectivity=[]
for (var dy=-1;dy<1;dy++) {
if (0>(dy+y0) || (dy+y0)>=in_imgData.height) continue;
for (var dx=-1;dx<(dy<0?2:1);dx++) {
if (0>(dx+x0) || (dx+x0)>=in_imgData.width) continue;
var w=((y0+dy)*in_imgData.width+x0+dx)<<2;
if (!this.component[w>>2]) continue;
var pixel=[in_imgData.data[w],in_imgData.data[w+1],in_imgData.data[w+2]]
if (this.metric(pixel0,pixel) <= this.threshold) {
var component=this.components[this.component[w>>2]];
if (local_connectivity.indexOf(component)==-1) {
local_connectivity.push(component);
}
}
}
}
local_connectivity.sort(function(a,b){return a<b?-1:((a==b)?0:1)});
return local_connectivity;
}
blobs.Pixel8ConnectivityBlobs.prototype.update_bbox=function(id,bbox,x,y,mean) {
if (bbox.x0>x) {bbox.dx+=bbox.x0-x; bbox.x0=x;}
if (bbox.y0>y) {bbox.dy+=bbox.y0-y; bbox.y0=y;}
if (bbox.x0+bbox.dx<x) bbox.dx=x-bbox.x0;
if (bbox.y0+bbox.dy<y) bbox.dy=y-bbox.y0;
bbox.count++;
for (i=0;i<3;i++)
bbox.mean[i]=((bbox.count-1)*bbox.mean[i]+mean[i])/bbox.count;
return bbox;
}
blobs.Pixel8ConnectivityBlobs.prototype.process=function(in_imgData,out_imgData) {
var blobs_arr=[]
this.component=[]; this.components=[];
this.nb_components=0;
var w=0;
for (var y=0; y < in_imgData.height; y++) {
for (var x=0; x < in_imgData.width; x++)
{
w=(y*in_imgData.width)+x;
var neighbours_connectivity=this.analyse_neighbours(in_imgData, x, y);
if (neighbours_connectivity.length==1) {
this.component[w]=(neighbours_connectivity[0]);
} else if (neighbours_connectivity.length>1) {
for (var i=1;i<neighbours_connectivity.length;i++) {
this.components[neighbours_connectivity[i]]=
this.components[neighbours_connectivity[0]];
}
this.component[w]=(this.components[neighbours_connectivity[0]]);
} else {
this.components[this.nb_components]=this.nb_components;
this.component[w]=(this.nb_components);
this.nb_components++;
}
}
}
var w=0, w4=0;
var components_bbox=[];
for (var y=0; y < in_imgData.height; y++)
for (var x=0; x < in_imgData.width; x++,w++,w4+=4)
{
this.component[w]=this.components[this.component[w]];
if (components_bbox[this.component[w]])
components_bbox[this.component[w]]=
this.update_bbox(
this.component[w],
components_bbox[this.component[w]],
x,y,
[in_imgData.data[w4],in_imgData.data[w4+1],in_imgData.data[w4+2]]);
else
components_bbox[this.component[w]]={
x0:x,y0:y,dx:0,dy:0,
count:1,mean:[in_imgData.data[w4],in_imgData.data[w4+1],
in_imgData.data[w4+2]]};
}
if (out_imgData.data) {
for (idx in components_bbox) {
Tools.strokeBBox_on_imageData(out_imgData,components_bbox[idx],components_bbox[idx].mean);
}
}
return components_bbox;
}
tools.js
+ 47
− 0
View file @ bcccb302
......@@ -59,6 +59,21 @@ Tools.copy_imageData_into_imageData=function(src_imageData,dest_imageData,x0,y0)
}
}
Tools.copy_partial_imageData_into_imageData=
function(src_imageData,x0,y0,dx,dy,dest_imageData,x1,y1) {
for (var src_y=y0; src_y<Math.min(y0+dy,src_imageData.height); src_y++)
for (var src_x=x0; src_x < Math.min(x0+dx,src_imageData.width); src_x++) {
var w_src=(src_y*src_imageData.width+src_x)<<2;
w_out=((y1+(src_y-y0))*dest_imageData.width+(x1+(src_x-x0)))<<2;
dest_imageData.data[w_out]=src_imageData.data[w_src];
dest_imageData.data[w_out+1]=src_imageData.data[w_src+1];
dest_imageData.data[w_out+2]=src_imageData.data[w_src+2];
dest_imageData.data[w_out+3]=src_imageData.data[w_src+3];
}
}
Tools.get_region_from_imageData=function(src_imageData,x0,y0,dx,dy) {
var reg_imageData=src_imageData.ctxt.getImageData(
src_imageData.orig_x+x0,src_imageData.orig_y+y0,
......@@ -70,3 +85,35 @@ Tools.get_region_from_imageData=function(src_imageData,x0,y0,dx,dy) {
return reg_imageData;
}
Tools.strokeBBox_on_imageData=function(imgData,bbox,col) {
Tools.strokeRect_on_imageData(imgData,bbox.x0,bbox.y0,bbox.dx,bbox.dy,col);
}
Tools.strokeRect_on_imageData=function(imgData,x0,y0,width,height,col) {
var w;
for (var x=x0;x<x0+width;x++) {
w=((y0)*imgData.width+x)<<2;
imgData.data[w]=col[0];imgData.data[w+1]=col[1];imgData.data[w+2]=col[2];
imgData.data[w+3]=255;
w=((y0+height)*imgData.width+x)<<2;
imgData.data[w]=col[0];imgData.data[w+1]=col[1];imgData.data[w+2]=col[2];
imgData.data[w+3]=255;
}
for (var y=y0;y<y0+height;y++) {
w=(y*imgData.width+x0)<<2;
imgData.data[w]=col[0];imgData.data[w+1]=col[1];imgData.data[w+2]=col[2];
imgData.data[w+3]=255;
w=(y*imgData.width+x0+width)<<2;
imgData.data[w]=col[0];imgData.data[w+1]=col[1];imgData.data[w+2]=col[2];
imgData.data[w+3]=255;
}
}
Tools.copySize=function(elt_id_1,elt_id_2) {
var elt1=document.getElementById(elt_id_1);
var elt2=document.getElementById(elt_id_2);
elt2.width=elt1.width;
elt2.height=elt1.height;
}
tracking/appearance.js 0 → 100644
+ 87
− 0
View file @ bcccb302
var appearance_tracking={}
appearance_tracking.MeanShift=function(bbox,per_region_feature_func,metric_func,opt_options){
this.bbox=bbox;
this.window_width=opt_options&&opt_options.window_width?opt_options.window_width:3*bbox.dx;
this.window_height=opt_options&&opt_options.window_height?opt_options.window_height:3*bbox.dy;
this.step_x=opt_options&&opt_options.step_x?opt_options.step_x:bbox.dx/3;
this.step_y=opt_options&&opt_options.step_y?opt_options.step_y:bbox.dy/3;
this.per_region_feature_func=per_region_feature_func;
this.metric_func=metric_func;
this.threshold=opt_options&&opt_options.threshold?opt_options.threshold:Number.MAX_SAFE_INTEGER;
this.count=0;
this.update_model=opt_options&&opt_options.update_model?opt_options.update_model:false;
}
appearance_tracking.MeanShift.prototype.process=function(in_imgData,out_imgData) {
var in_width=in_imgData.width, in_height=in_imgData.height;
if (!this.bbox_feature) {
var _opt_options=this.bbox;
this.bbox_feature=this.per_region_feature_func(in_imgData,_opt_options);
}
this.pan_x=Math.round(this.window_width/2-this.bbox.dx/2);
this.pan_y=Math.round(this.window_height/2-this.bbox.dy/2);
var x_start=(this.bbox.x0-this.pan_x)>0?(this.bbox.x0-this.pan_x):0;
var y_start=(this.bbox.y0-this.pan_y)>0?(this.bbox.y0-this.pan_y):0;
var x_end=(this.bbox.x0+this.bbox.dx+this.pan_x) < in_width?
(this.bbox.x0+this.pan_x)
:(in_width-this.bbox.dx);
var y_end=(this.bbox.y0+this.bbox.dy+this.pan_y)<in_height?
this.bbox.y0+this.pan_y
:(in_height-this.bbox.dy);
var min=Number.MAX_SAFE_INTEGER;
var min_bbox,min_bbox_feature;
var count_y=in_imgData.height;
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,{x0:x_start,y0:y_start,dx:x_end-x_start,dy:y_end-y_start},[64,64,64,255]);
}
for (var y=y_start;y<y_end;y+=this.step_y) {
var count_x=0;
for (var x=x_start;x<x_end;x+=this.step_x) {
var local_bbox={
x0:(x+this.bbox.dx<in_width)?x:in_width-this.bbox.dx,
y0:(y+this.bbox.dy<in_height)?y:in_height-this.bbox.dy,
dx:this.bbox.dx,
dy:this.bbox.dy
}
if (out_imgData) {
Tools.copy_partial_imageData_into_imageData(in_imgData,
local_bbox.x0,local_bbox.y0,local_bbox.dx,local_bbox.dy,
out_imgData,count_x,count_y);
Tools.strokeBBox_on_imageData(out_imgData,local_bbox,[0,64,64,255]);
}
var local_bbox_feature=this.per_region_feature_func(in_imgData,local_bbox);
if (!local_bbox_feature) continue;
var fun=function(a,b) {return a-b;}
var diff=this.metric_func(this.bbox_feature,local_bbox_feature);
if (diff < min) {
min=diff;
min_bbox=local_bbox;
min_bbox_feature=local_bbox_feature;
}
count_x+=this.bbox.dx;
}
count_y+=this.bbox.dy;
}
if (min < this.threshold && this.bbox!=min_bbox) {
this.count++;
this.bbox=min_bbox;
if (this.update_model)
this.bbox_feature=min_bbox_feature;
}
if (out_imgData) {
Tools.strokeBBox_on_imageData(out_imgData,this.bbox,[255,0,255,255]);
}
return this.bbox;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment