Using wasm to accelerate PixelManipulation.js (#1093)

* Add wasm code

* First working model

* Add PixelManipulation web assembly code to browser and node

* Tests corrected for modules

* Corrected test script

* Add wasm bechmarks

* Update Readme

* Applies toggling functionality and refactored PixelManipulation code

* Added documentation and corrected wasm toggling

* change noise reduction module to use wasm code

* Corrected formatting  and removed extra comments

* Add default wasm option and made README changes

* Fixed negative test timings

* combined benchmarks file

* Update benchmark.js

* Removed copies of wasm file and corrected test format

* Update package.json

Co-Authored-By: Jeffrey Warren <jeff@unterbahn.com>

* Added wasm file and removed redundant code

* Removed earlier benchmarks

* move test/core/sequencer/benchmark.js to its own test command, not passing to tape-spec

* Solves memory leaks and blank lines

* Solves memory leaks and blank lines

* Added handler for node code

* Modify test script

* Modify test script

* Correct doc and removed pace fuctionality

CONTRIBUTING.md

@@ -280,7 +280,6 @@ module.exports = function ModuleName(options,UI) {
 
 The `progressObj` parameter of `draw()` is not consumed unless a custom progress bar needs to be drawn, for which this default spinner should be stopped with `progressObj.stop()` and image-sequencer is informed about the custom progress bar with `progressObj.overrideFlag = true;` following which this object can be overriden with custom progress object.
 
-The pixelManipulation API can draw progress bars internally using the `pace` npm package. The option is disabled by default but can be enabled by passing `ui: true` in the options for pixelManipulation. The recommended way is to use `ui: options.step.ui`. This will only show the progress if the ui is set to true by the user, while creating the sequencer object.
 
 ### Module example
 

README.md

@@ -578,3 +578,24 @@ sequencer2.run();
 This method returns an object which defines the name and inputs of the modules. If a module name (hyphenated) is passed in the method, then only the details of that module are returned.
 
 The `notify` function takes two parameters `msg` and `id`, former being the message to be displayed on console (in case of CLI and node ) and a HTML component(in browser). The id is optional and is useful for HTML interface to give appropriate IDs.
+
+## Using WebAssembly for heavy pixel processing
+
+Any module which uses the `changePixel` function gets WebAssembly acceleration (`wasm`). Both node and browser code use WebAssembly and the only code which falls back to non-`wasm` code is the [browserified unit tests](https://github.com/publiclab/image-sequencer/blob/main/test/core/sequencer/benchmark.js).
+
+The main advantage we get using `wasm` is blazing fast speed attained in processing pixels for many modules that is very clear from [checking module benchmarks](https://travis-ci.org/publiclab/image-sequencer/jobs/544415673#L1931).
+
+
+The only limitation is that browser and node code for `wasm` had to be written separately, and switched between. This is because in browser we use `fetch` to retrieve the compiled `wasm` program while in node we use the `fs` module, each of which cannot be used in the other's environment.
+
+
+`wasm` mode is enabled by default. If you need to force this mode to be on or off, you can use the `useWasm` option when initializing ImageSequencer:
+
+```js
+let sequencer = ImageSequencer({useWasm:true}) // for wasm mode or simply
+
+let sequencer = ImageSequencer() // also for wasm mode i.e. default mode
+
+let sequencer = ImageSequencer({useWasm:false}) //for non-wasm mode 
+
+```

examples/lib/defaultHtmlStepUi.js

@@ -81,7 +81,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
         var inputDesc = isInput ? mapHtmlTypes(inputs[paramName]) : {};
         if (!isInput) {
           html += '<span class="output"></span>';
-        } 
+        }
         else if (inputDesc.type.toLowerCase() == 'select') {
 
           html += '<select class="form-control target" name="' + paramName + '">';
@@ -94,7 +94,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
           let paramVal = step.options[paramName] || inputDesc.default;
 
           if (inputDesc.id == 'color-picker') { // separate input field for color-picker
-            html += 
+            html +=
               '<div id="color-picker" class="input-group colorpicker-component">' +
               '<input class="form-control target" type="' +
               inputDesc.type +
@@ -122,7 +122,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
                 '"max="' +
                 inputDesc.max +
                 '"step="' +
-                (inputDesc.step ? inputDesc.step : 1)+ '">' + '<span>' + paramVal + '</span>';
+                (inputDesc.step ? inputDesc.step : 1) + '">' + '<span>' + paramVal + '</span>';
 
             }
             else html += '">';