Mikko Haapoja has been working on his own Voxel engine for some time, but the other day decided to try implementing the engine with HTML5 and Canvas. The result is this: a 3D rendition of Thom Yorke from Radiohead imitating the start of the original House of Cards video.
Awesome
The demo also uses the HTML5 audio element for it’s soundtrack.
Mikko has some thoughts on whether canvas is a Flash killer:
This was an interesting experiment but from this I can say that right now HTML5 and Canvas is NOT yet the “Flash Killer” it’s being touted as. The performance on this experiment is quite a bit lower than what Flash can produce.
For a demo like this, we can agree. But as browser makers are currently locked in a JavaScript speed increase battle, it’s only a matter of time before newer browsers can handle this kind of thing with ease.
Warning! This demo is intensive, Chrome is definitely recommended!
Oswald Campesato has created an open source library filled with lots of different “eye-candy” canvas graphic samples.
Pretty graphics...
Comments from the Author:
This project contains sample code that illustrates how to render 2D geometric objects such as rectangles, circles, arcs, and Bezier curves in conjunction with curves such as Archimedean spirals, Cissoids, Cochleoids, Conchoids, Lissajous curves and Lituus curves.
Canvas Sphere by Emil Korngold renders a 2D projection of the 3D points of a sphere using a tiny sprite 3D engine. The demo uses z-sorting and alpha motion blurring to give the sense of 3D and rotation.
Funky blue sphere
Use the mouse to rotate the sphere, and click to toggle z-scaling.
Ed Spencer has created this canvas demo based on a screensaver found in OS X. The demo takes a set of images and then drops them on to the screen with a subtle semi-transparent rotating effect.
It's like photos falling on to a table
Comments from the Author:
Bean starts off with a blank canvas and a list of image urls, which it preloads before getting started. It then drops one image at a time, rotating it as it goes. Each falling image is called a Plunger, because it plunges.
Each Plunger gets a random position and rotation to end up in, and takes care of drawing itself to the canvas on each frame by calculating its current size and rotation as it falls away from you.
Think you’re pretty good on a bike? Try jsCanvasBike – a JavaScript motocross game by Anthony.
Do stunts on the hills
You earn points in the game by doing flips – press up to accelerate, down to brake, and left and right to lean your bike. Once you’ve got a high score, you can tweet it to share with others.
Roope Kangas has created this canvas physics demos showing lots of boxes of debris falling to the right hand side of the screen.
To the right!
Click on the canvas to pull the debris toward your cursor, drag the cursor to make the debris ‘dance; in patterns and then let go of the left mouse button to let them fly to the right again spreading out.
