# [whatwg] [canvas] matrix based changes on bitmaps

From: Charles Pritchard <chuck@jumis.com>
Date: Mon, 23 Apr 2012 19:47:25 -0700
Message-ID: <4F96143D.8070806@jumis.com>
```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.

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 == 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
```
Received on Monday, 23 April 2012 19:47:25 UTC

This archive was generated by hypermail 2.3.1 : Monday, 13 April 2015 23:09:12 UTC