On 4/23/2012 2:38 PM, Tyler Larson wrote:
Can we add matrix transformations?
Looping over every pixel in JavaScript is slow. Many cool things could be taken
care of much faster if the canvas had some form of matrix manipulations built
in.
All of the pixels could have one transformation operation defined and all of
the pixels could be operated on at once in something lower level.
It could look like this...
context.transformMatrix([0.5,0.5,0.5,0,0,
0.5,0.5,0.5,0,0,
0.5,0.5,0.5,0,0,
0,0,0,1,0,
0,0,0,0,1]);
It's far simpler than looping over an array of pixels and picking out the
values of each color.
Other graphics systems have ways of doing this already. You can easily find
sample tutorials on how to create and transform matrixes.
In some languages they have matrix objects that have methods for even easier
manipulation of these transformations but I'm cool without this if it is easier.
WebKit recently landed Uint8ClampedArray. That brings us all in line
with Typed Arrays.
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.
When we implemented Canvas independently (prior to WebGL publication),
we simply stuck filters onto the ImageData object.
such as ImageData.blur().
But, directly addressing your example, I could see something like:
var a = new MatrixMath();
var b = ctx.getImageData(0,0,200,200);
a.mulAdd(b.width, b.height, b.data, [0.5,0.5,0.5,0,0,
0.5,0.5,0.5,0,0,
0.5,0.5,0.5,0,0,
0,0,0,1,0,
0,0,0,0,1]);
a.process(function() { ctx.putImageData(a,0,0); });
