Latest
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.
Guifi.net is a telecommunications network that uses peer to peer connections to provide it’s service. This demo shows the reach of the network over time by loading the connections over the top of a map using the canvas element.
All those networks..
The 8,000+ nodes and their respective links are drawn with a speed of 100 days per second. If you press the ‘clean’ button, you can zoom in on the map, and then press ‘init’ to draw the history at a close view.
If you’ve browsed Flickr for city photos for any length of time, you have probably come across photos which have had a tilt-shift effect added to them. A tilt-shift effect basically results in the photo looking like a model, and Mathieu ‘p01′ Henri has created a canvas demo that creates this effect.
Creating an effect
Comments from the Author:
A blurred version of the original image is generated using Canvas and drawImage(), then horizontal slices are composited with the original image to produce the final output. The blurred image is generated incrementally to improve the quality of the blurring effect. Without this, it would feature heavy bilinear interpolation approximations.
PurpleFloyd has recreated a platform game he originally built 15 years ago, updating it so it runs in web browsers using canvas and JavaScript. You play as Fred Jones as he makes his way through Adventureland and in to space.
Jump around! Jump up, jump up and get down.
Comments from the Author:
Nearly 15 years ago, when I was all of 15 years old, I wrote this little platform game which I have recently ported to Javascript/HTML5. It is a kind of Mario clone and at the time I named it “Fred Jones in Adventureland”… hmm, not a great name.
The platformer has 5 levels with a couple of different enemy variations, and obstacles such as falling platforms and plays smoothly throughout on the usual canvas supported browsers (the game supports Internet Explorer but runs slowly).
Darkimmortal has created this nightclub-esq music visualisation using two canvas elements and Soundmanager. One canvas is used for calculating the logic, which is then sent to the main canvas.
Ohh, sweet lemonade. Yeah, sweet lemonade
To start the demo and see the fancy patterns, select a track from the drop down and hit go. This demo is not suitable for epilepsy sufferers.
