HTML5 Canvas demos by Kevin Roast
An experiment around an animated and interactive business card on an HTML5 canvas.
Elements of the design gently pulsate and can be nudged with the mouse.
Thanks to Michael Hawley for the design and inspiration for the animated interactive business card.
A version of the classic Asteroids arcade game from 1979. Featuring ray-traced modern graphics and "retro" glowing vector graphic modes, exciting powerups, high scores and green glowing lasers oh yes.
Recently updated to now run at a full 60 frames-per-second, with retro styled sound effects and improved game performance.
The now world famous (ahem) Asteroids HTML5 Game has been featured on wired.com! Gosh.
The game has received over 250,000 visitors since the first update.
You can comment and rate the game as it is featured on the Google Chrome Experiments page.
Oldskool meets nuskool with a trippy plasma effect in HTML5 canvas!
You can tweak lots of fun settings for the effect using the built-in control panel.
Thanks to the DAT.GUI awesomeness for the amazingly easy to use JavaScript GUI library!
My latest HTML5 canvas game experiment! - Winner of Canvas Innovation Prize in the Dev Unplugged contest!
It's more than a little "inspired" by Geometry Wars and similar, but that's not a bad thing I think.
A good test of canvas performance as it hits the browser hard with lots of glow effects and particle explosions.
Another example of my canvas 3D library - K3D in action!
Works best in Chrome and Safari, FireFox4 and IE9 struggle a bit with the shiny effects...
You can comment and rate the game as it is featured on the Google Chrome Experiments page.
The shiny new tongue-in-cheek HTML5 logo in glorious 3D!
I came across this sinister Flash demo and decided enough is enough, HTML5 canvas can do that, no problem.
The W3C group seem a little confused about the logo and feel a need to attach some significance to what it means, but I just like its cheesey 80's retro look.
There are some other good examples of the logo built in HTML5 only using CSS to generate a simple 3D effect, and an excellent old skool animated GIF, nice.
HTML5 Canvas browser benchmark tool.
Give your HTML5 browser a run for its money. Runs a number of punishing tests on the canvas 2D rendering features that are most used in HTML5 games, particularly image sprite rendering and alpha compositing.
The results depend heavily on the CPU and (for recent browsers) GPU power of your machine - so you cannot really compare between machines unless you run the same browser. So give it a try on as many browsers as possible!
Demo entry for all-the-cool-kids-are-doing-it JS1K competition.
The JavaScript code is only 1007 bytes in length! Which is pretty impressive, or at least I thought it was until I saw some of the later entries in the competition managing to perform pretty much anything you can imagine in 1K and making this feel rather simple in comparison, bah. But hey it still looks nice.
Move the mouse to change the center of the field and for extra fun use the mouse wheel to control warp speed!!
Now pretend you *are* captain of the Enterprise (I know you're thinking about it).
Some examples of my Canvas 3D rendering library.
A simple and fast library to allow pseudo 3D graphics to be rendered onto a 2D canvas.
All 3D maths is hand cranked and rendering performed using the nifty Canvas APIs. Objects can be displayed as points, wireframe, solid polygons, textured polygons and shaded using plain colour, depthcued (z-order) or light-sourced - things can be rotated around and moved about to make cool demos (see below). A simple linear-additive lighting model (oh-err) with any number of coloured lights can be applied to objects, which is nice.
Interactive 3D demo. Another example of the Canvas K3D library in action. With mouse control so you can entertain yourself.
Shows off the real-time lighting features of the 3D library, lovely.
Demo entry for the Xmas 2010 JS1K competition.
The JavaScript code is only 1020 bytes in length!
The winning entry for the competition is annoyingly brilliant (yep no winning entry for me, bah humbug) and is well worth viewing.
Fractals and shrubbery.
An L-System, or Lindenmayer System is a simple but elegant 'turtle' rendering platform. Self-similarity and fractal-like forms make it easy to generate plant and other natural-looking organic forms that 'grow'.
Image Manipulation.
Once of the first canvas experiments I tried, just playing around with sine wave effects on an image using a hidden canvas element to preprocess the image in one direction then another for each frame.
It's quite trippy, you remember that Simpson's episode right?