Friday, February 7, 2014

Aquarium Animation using HTML5

Hi,

    I did a simple Animation using Html5 Canvas. It emulates an Aquarium with a single fish. This post is the enhancement/continuation to my previous work - Aquarium Simulation (which works only in IE browser without canvas, you can find it for download).

Both gradient-background and fish images are generated on the fly using canvas. Fish is generated once and based on the direction its moving, is reused and rotated, Whereas background will be re-generated (with canvas refresh) each time the fish moves.
When the fish reaches any side of end, it will have 3 directions (to choose) to move, decision will be taken by random. Based on the direction chosen, fish image will be rotated and animation continues. Animation starts automatically (after page load) and a Stop button is provided to stop it anytime!

Above is the screenshot of Aquarium

Features:
  • Animation using HTML5/Canvas.
  • No image files used (dynamically resources generated like: fish, background).
  • Single standalone Html page.

Tested with latest browsers: FireFox, Chrome, Opera, IE9.

References: 
https://developer.mozilla.org/en/Canvas_tutorial/Using_images
http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

Demo & Download link:

No comments:

Post a Comment