Wednesday, June 2nd, 2010

Build a Fish Tank with Canvas and CSS3

Category: Examples

Greg Murray has an early beta of a fun sample app: HTML5 Fish Tank. The app lets you build out your fishes, and then place them in the tank.

It puts the low level Canvas and CSS3 transitions/transforms to work.


  1. <div id="1275463173677" class="fish" style="-webkit-transition-duration: 3369ms; -webkit-transform-origin-x: 508px; -webkit-transform-origin-y: 485px; -webkit-transform: rotateY(0deg) translate(508px, 485px); "><div style="position: absolute; margin-top: 27px; margin-left: 70px; "><canvas width="30" height="44" style="width: 30px; height: 66px; "></canvas></div><div style="position: absolute; margin-top: 25px; margin-left: 2px; "><canvas width="71" height="71" style="width: 71.5px; height: 71.5px; "></canvas></div><div style="position: absolute; margin-top: 40px; margin-left: 19px; "><canvas width="20" height="20" style="width: 20px; height: 20px; "></canvas></div><div style="position: absolute; margin-top: 59px; margin-left: 4px; "><canvas width="44" height="44" style="width: 44px; height: 44px; "></canvas></div><div style="position: absolute; margin-top: 45px; margin-left: 40px; "><canvas width="20" height="20" style="width: 20px; height: 20px; "></canvas></div><div style="position: absolute; margin-top: 19px; margin-left: 26px; "><canvas width="33" height="33" style="width: 33px; height: 33px; "></canvas></div><div style="position: absolute; margin-top: 81px; margin-left: 40px; "><canvas width="44" height="44" style="width: 44px; height: 44px; "></canvas></div></div>

The fish animation is driven by code like this:


  1. function goFish( target) {
  2.         if ( !target.lastPoint) {
  3.             target.lastPoint = target.currentPoint;
  4.         }
  5.         if ( target.timer ) {
  6.             clearTimeout(  target.timer );
  7.         }
  8.         target.currentPoint = getRandomPoint();
  9. = target.currentPoint.d;
  10. = target.currentPoint .x + " " + target.currentPoint.y;
  11.         var _scale = "";
  12.         if ( target.lastPoint.x > target.currentPoint.x ) {
  13.             _scale = "rotateY(-180deg)";
  14.         } else {
  15.              _scale = "rotateY(0deg)";
  16.         }
  17. =  _scale + " translate(" + target.currentPoint.x + "px, " + target.currentPoint.y + "px)";
  18.         target.lastPoint = target.currentPoint;
  19.         target.timer = setTimeout( function () {
  20.             console.log( "saved the day" );
  21.             goFish( target);
  22.         },  ( target.currentPoint.d + 2000 ) );
  23. }

A fun little way to start your day.

Posted by Dion Almaer at 6:27 am

3.7 rating from 6 votes


Comments feed TrackBack URI

I hate to say it but I’m already tired of the HTML5 promo bandwagon and the thing isn’t even finished yet. Too many “me too” apps that do not show anything we couldn’t already do right now with existing tools.

Comment by travisalmand — June 2, 2010

This app wants to store data on my disk. That’s ok, but it made me think that apps should explain what kind of data they want to store, why and how big it can grow. That probably goes in the TOS which nobody read so browsers should provide an API to let apps an explanation to the “this website is asking to store data on your computer for offline use” prompt.

Comment by pmontrasio — June 2, 2010

@pmontrasio – You mean like how the Flash plugin does if the swf wants to store more than a certain amount of data on your computer? I would agree, especially remembering the hysteria when people realized cookies were being stored locally. Can you imagine the horrors when people finally realize a website could create a local database and store data without their knowledge?

Comment by travisalmand — June 3, 2010

Leave a comment

You must be logged in to post a comment.