Pixpipejs: Slides

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

Image processing filters [i][o][m]
Decoders [i][o][m]
Helpers [i][o][m]
Readers from File or URL [o][m]
Writers (to file or Canvas) [i][m]

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" );