[whatwg] [canvas] matrix based changes on bitmaps

[Charles Pritchard]

On 4/23/2012 6:18 PM, Boris Zbarsky wrote:
> On 4/23/12 5:57 PM, Charles Pritchard wrote:
>> Currently, if you want to do "fast" operations on a Canvas, you need to
>> load it into WebGL and use GLSL to do your quick vector math.
>> It'd be nice to see a math object for Typed Arrays with similar power.
>
> http://software.intel.com/en-us/articles/opencl-river-trail/ is worth 
> looking at in this context.
>
> -Boris

Neither introduce multiply/add methods. They do improve on typical JS 
methods.

http://cloud.github.com/downloads/RiverTrail/RiverTrail/rivertrail-api-draft-02-2012.pdf
https://github.com/sheremetyev/w16

Example from RiverTrail:
var myPA = new ParallelArray([1.0, 2.0, 3,0]);  // <1.0, 2.0, 3.0>
var myPlusPA = myPA(function(element){return element+1;}; // <2.0, 3.0, 
4.0> [sic]

The partition method (for map):
pa = new ParallelArray([1,2,3,4])   // <1,2,3,4>
pa.partition(2)                    // <<1,2>,<3,4>>

W16 looks a little more like typical processing, chunked into batches.
https://github.com/sheremetyev/w16/blob/master/w16/primes.js

ParallelArray(TypedArray) seems ok; it'd be nice though to have methods 
on that object, instead of relying on callbacks.


Seems like convolution would go something like this:
var d = ctx.getImageData(0,0,ctx.width,ctx.height);
var pa = new ParallelArray(new Float32Array(d.data));
pa.partition(d.width);
pa.combine(2,function(y,i) {
     this[y][i] = this[y][i-1]... etc;
});

It's just that our methods are typically in a for loop, such as the W16 
primes.js example.


We'd probably end up with something like this instead of the cleaner 
combine:

if(pa.isReal) { pa.batchSize = 1; pa.stride = 1; }
else { pa.batchSize = d.height; pa.stride = d.width; }
pa.combine(2, function(y,i) {
     for(var height=pa.batchSize,width=pa.stride; y<height y++) for(; 
i<width; i++) { var offset = y * width;
     this[offset + i] = this[offset + (i-1)]... etc;
}});


The for loop could be optimized out for items like RiverTrail, W16 could 
use batchSize for its own batch semantics, typical polyfill/JS 
implementations would just run apply or call.

It'd be nice to have progress events:
pa.onprogressevent = function() {
     if(!e.readyState) console.log("processing");
     if(e.readyState == 4) {
         ctx.putImageData(d.data,0,0);
     }
     else {
         console.log(".");
     }
};

And it'd be nice to have basic matrix operations anyway. I'd like to see 
mul and add. I've tried to abuse CSSMatrix for that purpose. It works, 
but it's slow and not really intended for that purpose. It could be sped 
up, if nothing else comes up.


-Charles