

Old Spice with Matrix like effects using HTML5, video, canvas, js - franze
http://www.barbafan.de/html5video

======
franze
ok, how does it work?

three elements * video * temp canvas * output canvas

every 33 milliseconds (30 frames per second) render a video snapshot to the
temp canvas, fetch the canvaspixelarray of the temp canvas, perform some
calculations on the RGB values of the 230400 pixels, render the changed
canvaspixelarray to the output canvas.

why the two canvas-es? better performance.

any issues? yes, you need three different videos, one for google chrome
(webm), one for apple (h264), one for firefox (ogv). that's why the effect
look slightly different on each plattforms (different encoding == different
pixels).

does not work on ipad safari, as the render video snapshot to canvas throws
some strange errors and security exceptions, pain to debug.

hope you like it.

