Let me say this first - I am not a fan of Canvas and tinkering around with this project I realized why I prefer programming in AS3 so much more to Javascript: my goodness - this language is a dirty mess, how can anyone get anything done with it? But for fairness sake - I guess there must be some pro development tools out there which I don't know about and my using of notepad might not be the true JS developer experience.
So even though I think that compared to the capabilities of the Flash Player Canvas still lacks a lot, it cannot be ignored since it is now available on most major browsers. As a Flasher I find it especially entertaining to watch how history keeps repeating - browsing Canvas community blogs is like time traveling: plasma effects, l-systems, bitmap manipulations, physics engines, vector drawing experiments, emulators - in short everything that we were excited and enthusiastic about years ago is now being rediscovered, ported or reinvented on Canvas, just like we rediscovered, ported or reinvented things that had been done in Java or C years before Flash. But hey, I actually envy these guys - there is nothing more rewarding and creativity boosting than trying to push a limited platform to the maximum.
So since we are not so different after all, here's a little contribution to world platform peace - Pibeca allows you to use pixel shaders on Canvas Bitmaps. It achieves that by using Adobe® Pixel Bender™ filters which can be written with the freely available Pixel Bender™ toolkit. Those kernels are very small programs who's only purpose in life it is to push pixels around very fast.
So here is an proof of concept which should work on any browser that supports canvas:
Under the hood a canvas bitmap and a kernel url is being sent to an invisible SWF which loads the Pixel Bender filter kernel, processes the bitmap and then sends it back to JavaScript which passes it back to a canvas. That's all. Given that I have to encode the bitmap to a string in order to get it to the other side and back the speed is pretty okay I think.
I wanted to get this prototype out quickly, so until I have prepared some docs and more examples those who are adventurous can already have a look at this page and check out the JavaScript source code. Pibeca is released under MIT License.
Posted at January 14, 2010 12:59 PM | Further reading
