Image processing pipeline in Javascript
Jonathan Lurie - MCIN - June 2017
Jonathan Lurie - MCIN - June 2017
What is it?
Jonathan Lurie - MCIN - June 2017
Jonathan Lurie - MCIN - June 2017
Motivations
Jonathan Lurie - MCIN - June 2017
Possible use cases
Jonathan Lurie - MCIN - June 2017
What's a pipeline?
à la ITK
Jonathan Lurie - MCIN - June 2017
Under the hood
Jonathan Lurie - MCIN - June 2017
Core architecture
Jonathan Lurie - MCIN - June 2017
PixpipeObject
* The most generic *
Jonathan Lurie - MCIN - June 2017
PixpipeContainer
data container + generic
Jonathan Lurie - MCIN - June 2017
Image2D
2D data container
Jonathan Lurie - MCIN - June 2017
Image3D
3D data container
Jonathan Lurie - MCIN - June 2017
MniVolume
3D data container
Filter
data processor + generic
Jonathan Lurie - MCIN - June 2017
Jonathan Lurie - MCIN - June 2017
ImageToImageFilter
data processor + from 2D to 2D + generic
Jonathan Lurie - MCIN - June 2017
More on Filters
Jonathan Lurie - MCIN - June 2017
Example: apply a threshold
Jonathan Lurie - MCIN - June 2017
A filter is non-destructive
=
myImage2D != myOtherImage2D
Filters from the the main scope
Jonathan Lurie - MCIN - June 2017
Filters from the the main scope
(code)
// let's create an orange image of size 100x50
var myImage = new pixpipe.Image2D({
width: 100,
height: 50,
color: [255, 128, 64, 255]
});
// instantiation of the thresholding filter
var thresholder = new pixpipe.SimpleThresholdFilter();
// feeding the filter with the image
thresholder.addInput( myImage );
// launching the filter
thresholder.update();
// getting the image created by the filter
var myOtherImage = thresholder.getOutput();
Jonathan Lurie - MCIN - June 2017
What about metadata?
(code)
// let's create an orange image of size 100x50
var myImage = new pixpipe.Image2D({
width: 100,
height: 50,
color: [255, 128, 64, 255]
});
// instantiation of the thresholding filter
var thresholder = new pixpipe.SimpleThresholdFilter();
// define a lower threshold: 100 (default: 128)
thresholder.setMetadata("threshold", 100);
// feeding the filter with the image
thresholder.addInput( myImage );
// launching the filter
thresholder.update();
// getting the image created by the filter
var myOtherImage = thresholder.getOutput();
Jonathan Lurie - MCIN - June 2017
Different kinds of filters
for doing different kinds of things
[i] accepts input(s)
[o] gives output(s)
[m] Settings with metadata
Jonathan Lurie - MCIN - June 2017
Filter's methods available
// add an input
myFilter.addInput( myImage );
// specify metadata (usually overwrite default)
myFilter.setMetadata( "metaName", "metaValue" );
// launch the filter
myFilter.update();
// get the default output
myFilter.getOutput();
There are only 4 of them, easy to remember
Jonathan Lurie - MCIN - June 2017
More than one input or output?
// add an input with no given ID:
myFilter.addInput( myImage );
// ... is equivalent to that:
myFilter.addInput( myImage, 0 );
// but some filters require more than one input (ie. GradientImageFilter)
// (there names are given in the doc)
// Then, ID must be specified:
myFilter.addInput( myImage1, "dx" );
myFilter.addInput( myImage2, "dy" );
// The same goes for the outputs. This:
var myOutput = myFilter.getOutput();
// ... is the same as that:
var myOutput = myFilter.getOutput( 0 );
// But some filters create more than one output.
// (There names are given in the doc)
// Example, the GradientImageFilter produces 2 outputs:
var myOutput1 = myFilter.getOutput( "direction" );
var myOutput2 = myFilter.getOutput( "magnitude" );
Jonathan Lurie - MCIN - June 2017
Examples
Jonathan Lurie - MCIN - June 2017
MniVolume 3D visualization (link)
Examples
Jonathan Lurie - MCIN - June 2017
Gradient computing on neurons (link)
Examples
Jonathan Lurie - MCIN - June 2017
Few metrics
Jonathan Lurie - MCIN - June 2017
Resources
Jonathan Lurie - MCIN - June 2017
Thanks!
any contributors?