Tuesday, December 8, 2009

Animation demo


Click the image on the left to view the demo. (requires FireFox/Chrome)

Note (22/1/2010): I think there is a bug here to do with loading the image. If you see a cross and no picture, click reload and it should fix the problem (I'll fix it properly soon)

The TV should show an image off the web, mixed with random static. You can change the image to something supported by your browser. Andrew M found out animated .gifs work, for instance copy "http://www.moonbattery.com/BashKeyboard.gif" to the URL at the bottom.

If you right click on a canvas element, you can get an URL for the current image. I then used that as the input for another tv, to get the recursive picture going on the right.

This was made for me to further learn HTML5 canvas, including animation (using callbacks in .js), CanvasPixelArray, masking and using images.

No comments:

Post a Comment