boom.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2 <html>
   3         <head>
   4                 <title>Boo-o-m</title>
   5                 <script type="text/javascript" src="script/util.js"></script>
   6                 <script type="text/javascript" src="script/canvas.js"></script>
   7                 <link rel="stylesheet" type="text/css" href="style/common.css" />
   8                 <style type="text/css">
   9                         canvas
  10                         {
  11                                 border: 1px solid;
  12                         }
  13                 </style>
  14         </head>
  15         <body>
  16                 <div id="target"></div>
  17                 <script type="text/javascript">
  18                         var canvas = document.createElement('canvas');
  19                         canvas.setAttribute('width', '800px');
  20                         canvas.setAttribute('height', '500px');
  21                         var ctx = canvas.getContext('2d');
  22                         document.getElementById('target').appendChild(canvas);
  23
  24                         Function.prototype.animate = function(timems)
  25                         {
  26                                 var fraction = 30;
  27                                 var fn = this;
  28                                 var seq = [];
  29                                 var n = timems/fraction;
  30                                 var step = 1/n, x = 0;
  31
  32                                 // linear easing (more to come)
  33                                 while(x<1)      {
  34                                         seq.push(x);
  35                                         x += step;
  36                                 }
  37                                 seq.push(1);
  38
  39                                 for(var i in seq)
  40                                         window.setTimeout(fn, seq[i] * timems, seq[i]);
  41                         }
  42
  43                         var x, y, r, mx = 800, my = 500, n = 500;
  44
  45                         function setCircle()    {
  46                                 x = Math.random() * mx;
  47                                 y = Math.random() * my;
  48                                 r = 40 + Math.random() * 20;
  49                                 ctx.fillStyle = '#d7d7d7';
  50                         }
  51
  52                         function drawCircle(n)
  53                         {
  54                                 ctx.fillCircle(x, y, n * r);
  55                         }
  56
  57                         function resetCircle()  {
  58                                 ctx.fillStyle = '#262626';
  59                                 nx = x - 20 + Math.random() * 41;
  60                                 ny = y - 20 + Math.random() * 41;
  61                                 r += 1.1 * Math.sqrt((x-nx)*(x-nx) + (y-ny)*(y-ny));
  62                                 x = nx;
  63                                 y = ny;
  64                                 drawCircle.animate(n);
  65                         }
  66
  67                         function doit() {
  68                                 setCircle();
  69                                 var t = n * ( .8 + Math.random() * .45);
  70                                 drawCircle.animate(t);
  71                                 window.setTimeout(function(){
  72                                                 resetCircle();
  73                                                 var t2 = t * .8;
  74                                                 drawCircle.animate(t2);
  75                                                 window.setTimeout(doit, t2);
  76                                         }, t);
  77                         }
  78
  79                         doit();
  80                 </script>
  81         </body>
  82 </html>