Thursday, March 3, 2011

Canvas Phantom Zone

Most of my work with the HTML5 canvas in recent months has been to deal with a specific customer, and a new product that we are developing. But while I am getting my hands dirty, I try to look for interesting tricks that I can do with the canvas as well.  Having been impressed by a bunch of very cool samples, I decided to try my hand at a simple one.

Anyone close to my age (guess it if you can) had to be impressed with the movie Superman II, one of the all time great superhero movies. And I was always impressed with the phantom zone scenes, with the trapped Kryptonians in space.

So, take a slow afternoon, a few lines of Javascript code, the power of the HTML5 canvas, and a little video assistance from three of my sons, and I give you the HTML5 Canvas Phantom Zone...

This boils down to a hidden video tag which is being used as a dynamic image, drawn onto the canvas, transformed and rotated in a timeout function. What took the supercomputers of 1980 is now an afternoon project in a browser...

No comments:

Post a Comment