Applications, games, tools and tutorials for the HTML5 canvas element
Jimmy D has created this interesting ‘frogs on a log’ balancing game using Canvas for the Mix 10k smart coding competition. The idea of the game is simple: balance all the frogs on the log without them falling off.
Ribbit
Comments from the Author:
For some reason these frogs forgot how to swim. Help the frogs stay on the log. There are 4 types of frogs and each behave differently. Drag the frogs and logs (or click) with precision to save our frogs.
Kevin Roast has finished tripping over peppers and created a Lindenmayer System Turtle Fractal Renderer. Canvas is used as the output of the rendering engine.
Tree-mendous
The recursive nature of the L-system rules leads to self-similarity and thereby fractal-like forms which are easy to describe with an L-system. Plant models and natural-looking organic forms ‘grow’ and becomes more complex by increasing the iteration level of the form.
We’ve covered Lindenmayer Systems in a previous demo, but this one allows you to specify/modify the parameters and also comes with some pretty shrubery examples.
Waterfall by Lionel Tardy is a fairly simple concept for a canvas demo, yet is absolutely mesmorising to look at. I’ve already lost far too much time with this one, it’s about time someone else got hooked watching the balls fall! The idea of this demo is simple – balls fall from both sides of the screen on to a random terrain. As both the terrain and the background are the same colour, the terrain is only revealed once the balls have fallen.
It's so beautiful...
Waterfall uses the Box2DJS physics library and works best in Chrome.
Different people use different methods to learn a new technology. For Dave Whipp, he decided to teach himself JavaScript and canvas by creating a pool game. The game uses JavaScript for the physics and canvas to display the output.
Yellow falls a little behind
There are a couple of different modes available to play – 9-ball, 8-ball and 1-ball. Playing is simple: to take a shot, click on the white cue ball and hold, dragging the cursor in the direction you wish to shoot. Relative to the direction of the shot, hitting the white ball above and below the center will induce forward and reverse spin; while hitting left and right will add side spin.
Andrés Fernández has used canvas to create a simple 3D simulation of a leaf floating within the forest.
A leaf falls within the forest
The demo places the leaf in a canvas on a forest background modifying its transformation matrix to give it the appearance of floating.
Hernan Amiune has created this simple raindrop canvas demo which he has nicknamed “Javascript Particle System Hello World”.
Raindrops keep falling on my head
Comments from the author:
This is a very simple example to demonstrate how to create a basic object oriented particle system using javascript and the html canvas element… Each particle has the following properties:
- position: the postion in the space, (x,y) coordinates
- velocity: the velocity of the particle, (vx,vy) vector
- life: the amount of time the particle is going to live
- time: the time elapsed since the particle was created
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!
