Skip to main content
1 of 4
Florent
  • 2.6k
  • 15
  • 16

HTML / JavaScript, 156

<body onload="t=c.getContext('2d');t[f='fillRect'](0,0,w=270,h=150);t.fillStyle='#07d';setInterval('n=Math.random()*4e4;t[f](n%w,n/h,1,1)',1)"><canvas id=c>

Testable version in JSFiddle.
Preview:

raindrop

Annotated version:

<body>
<canvas id="c"></canvas>
<script>
  onload = function() {
    // Retrieve the rendering context
    t=c.getContext('2d');
    // Fill the canvas with black
    t[f='fillRect'](0,0,w=270,h=150);
    // Set rain color
    t.fillStyle='#07d';
    // Render whenever it is possible
    setInterval(function() {
      // Generate a number between 0 and 40,000
      // 40,000 ~= 270 * 150
      n=Math.random()*4e4;
      // Draw a raindrop.
      // Since x and y are not rounded, the raindrop looks blurry!
      t[f](n%w,n/h,1,1)
    }, 1);
  };
</script>
</body>
Florent
  • 2.6k
  • 15
  • 16