

How You Can Do Cool Image Effects Using HTML5 Canvas - johnrobinsn
http://www.storminthecastle.com/2013/04/06/how-you-can-do-cool-image-effects-using-html5-canvas/

======
bsimpson
I was expecting this to use WebGL shaders.

When image filters came to Flash, they used a technology called PixelBender,
which computed the value of each pixel independently and parallelized them on
the GPU to maximize performance. There's a similar proposal for CSS that uses
WebGL shaders for the parallelizing:

<http://www.adobe.com/devnet/html5/articles/css-shaders.html>

Opera also has a writeup on doing this in WebGL now without CSS:

<http://dev.opera.com/articles/view/webgl-post-processing/>

------
rzendacott
If you want to experiment with some filters like this in real time, I made a
simple page to work with your webcam like this:
<http://mizzouacm.github.io/javascript-workshop/>

You can fill in the filter function to see the effects in real time. You can
also get screenshots by clicking the filtered video. It's pretty fun to see
what interesting filters you can come up with, and I'm hoping to host an intro
to javascript workshop utilizing the demo.

I can't take credit for the idea; I got it from the wonderful Hackers At
Berkeley workshop[1]. I am starting a similar club at my university and wanted
to do the same kind of workshop. I rewrote the demo because I wanted it to be
real time, and I also just wanted the fun of implementing it myself :)

[1] Blog about workshop: <http://blog.hackersatberkeley.com/?p=97> Demo:
<http://introjs.hackersatberkeley.com/>

~~~
benaiah
This is cool, but you should really add underscore to the page, as it makes it
much easier to deal with large arrays (pixel arrays being the perfect
example).

------
timothya
Cool article.

A made a screencast a few months ago which shows how you can move your
filtering logic into a web worker so that the main thread doesn't lock up
during an intense filter; it goes well together with this article:
<http://www.youtube.com/watch?v=GDKoh0JDTJs>

------
kemayo
You can see similar stuff on <http://sta.sh/muro/>

(Draw a bit, then play with the "filters" menu. There's also the ability to
import other images as layers, but you'd have to sign up for an account to try
that, so it's a bit more hassle just for playing with it.)

------
binarymax
A good introductory article. It may not belong in the article itself but I
would briefly mention web workers, so you don't block the UI while running
some of the more complicated filters.

------
dionidium
Check out this project's source, too:

<http://mezzoblue.com/archives/2010/10/07/paintbrushjs/>

