How You Can Do Cool Image Effects Using HTML5 Canvas
storminthecastle.com
How You Can Do Cool Image Effects Using HTML5 Canvas
1–8 of 8 posts
Re: How You Can Do Cool Image Effects Using HTML5 Canvas
#2A 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.
Re: How You Can Do Cool Image Effects Using HTML5 Canvas
#3I 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:
Re: How You Can Do Cool Image Effects Using HTML5 Canvas
#4Cool 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
Re: How You Can Do Cool Image Effects Using HTML5 Canvas
#5If 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/
Re: How You Can Do Cool Image Effects Using HTML5 Canvas
#6Check out this project's source, too:
Re: How You Can Do Cool Image Effects Using HTML5 Canvas
#7If 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 w…
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).
Re: How You Can Do Cool Image Effects Using HTML5 Canvas
#8You 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.)