Applications, games, tools and tutorials for the HTML5 canvas element
Want to get started with Mr. doob’s 3D library Three.js? Paul Lewis has created this great tutorial which will help you do just that.
In this tutorial, Paul covers the basics of three.js including setting a scene; making a mesh and adding materials and lights. If you want to get started with three.js, now’s your chance!
http://aerotwist.com/lab/creating-particles-with-three-js/
Export artwork and animation from Adobe Illustrator directly to Canvas.
3D Model Viewer by Giuseppe Sicari uses a combination of JavaScript and canvas to display models of three-dimensional objects which are represented by a list of vertices and a set of faces each of which consists of at least three vertices.
A helicopter
The viewer allows you to rotate the object; fill the object with a colour; set transparency and add a motion blur effect.
As time progresses, canvas applications are becoming more and more impressive. Ben Firshman has written a rather impressive JavaScript NES emulator.
Rather than rewriting the game in JavaScript, JSNES emulates and reads the encoded ROMs displaying the screen within a canvas element.
Ben comments:
I got underway shamelessly porting vNES into Javascript. Although not the most efficient, it didn’t have any of the pointer memory mapping magic associated with emulators written in lower level languages. As such, it was more or less a direct port, bar a few tweaks to compensate for the lack of static typing, and obviously a rewrite of all the I/O.
A selection of the titles demoed.
As everything is happening in JavaScript, JSNES eats a lot of resource so it’s best to try in Chrome.
Please ensure you follow the relevant laws regarding ROMs for your country before trying this demo.
We all remember that episode of The Simpsons where Homer eats that really hot chili pepper and trips out. Well, Kevin Roast has decided that we all need some trippy peppers in our lives, and has created a canvas demo to supply such a thing!
Trippy Peppers uses a multiple sine-wave effect on an image of hot chili peppers combined with multiple canvas back buffers to generate the final image. Let your eyes drift slightly out of focus for maximum wibblyness.
Trippy...
You’ll need to use Safari 4 or Chrome for this demo, as Kevin jokes:
Firefox finds it too hot too handle!
But seriously, Kevin would appreciate any hints on why Firefox gets upset copying data between the multiple canvas image buffers. He seems to be having issues with putImageData().
Yvo Schaap has created this incredibly addictive game where a single well placed click will decide whether you pass or fail. There are 12 levels each with a required number of balls that need to be detonated, all from your original explosion.
Explode my lovelies!
If you ever wanted a goldfish as a child – perhaps from one of those fairground stalls – but was never allowed, now’s your chance. Satoshi Nakajima has created a Gold Fish Simulator which simulates the famous flocking behavior of fish.
Lots of fishies
The application uses a canvas pre-rendering technique, which generates images of fish in array of off-screen canvas elements. It then uses a CSS transform to specify the location and direction of each fish.
The app runs on Safari (4.0 and later), Firefox (3.5 and later) and Google Chrome (4.0 and later).
Matt West has ported a ZX Spectrum emulator to JavaScript using canvas to output the display. The emulator comes with 10 games to try, including Manic Miner and Jet Set Willy.
Matt comments:
Writing this wasn’t actually such a big deal – the Z80 core was ported from the one in Fuse, with the Perl-and-C-preprocessor-munging trickery still intact, and Javascript is syntactically close enough to C that that wasn’t a mammoth task… The rest is just creative abuse of the <canvas> element… it’ll take advantage of the putImageData interface to do the pixel pushing if available and fall back on drawing 1×1 pixel rectangles otherwise.
The classic Manic Miner
Controls are:
Please ensure you follow the relevant laws regarding ROMs for your country before trying this demo.
Home to applications, games, tools and tutorials that use the HTML 5 <canvas> element - which allows for dynamic scriptable rendering of bitmap images.
Submit your demo, and if we like it we'll feature it on Canvas Demos!
