Disappearing Dots

July 28, 2012

Japan is too hot.
Here is a little toy animation using canvas.
It looks a bit like snow falling on the ground and dissappearing.

window.onload = (function(win, doc) {
  var c,
      TWOPI = 2*Math.PI, 
      last = +(new Date()),
      MY_BLACK = "rgba(0, 0, 0, 0.05)",
      WIDTH = 400,
      HEIGHT = 400;

  var randomPoint = function() {
    return Math.floor(Math.random() * WIDTH  + 1);
  }

  var draw = function() {
    var now = +(new Date());
    c.fillStyle = MY_BLACK;
    c.fillRect(0, 0, WIDTH, HEIGHT);
    if (now - last > 1000) {
      c.fillStyle = "#fff";
      c.beginPath();
      c.arc(randomPoint(), randomPoint(), 5, 0, TWOPI, true);
      c.fill();
      last = now;
    }
    win.requestAnimationFrame(draw);
  }

  var init = function() {
    var canvas = doc.getElementById("ground");

    c = canvas.getContext("2d");
    c.fillStyle = "#000";
    c.fillRect(0, 0, WIDTH, HEIGHT);

    win.requestAnimationFrame(draw);
  };

  return init;
}(window, document));
comments powered by Disqus