realistic rain effect: rainyday.js

rainyday.js is a simple script for simulating raindrops falling on a glass surface. Features a clear API to easily control most of the script variables in order to achieve the most realistic effect – either specify the rain intensity and draw a static picture or run it as an animation.

Original picture:

Screenshot of the live demo:

You can check out the live demos here or have a look at the source code on github.

The first step of the approach is to draw the original picture on the HTML5 canvas and applying the blur effect. In the next phase a second (transparent) canvas is added to the DOM over the original one in order to emulate the glass surface. Randomly distributed raindrops are then placed on the glass. The effect is improved by having the drops take irregular shapes as well as a reflection of the original image in the raindrop, based on previously calculated miniatures.

Here’s a couple of links that were a great help for me when working on the script:

• rectangleworld.com/blog — on drawing imperfect circles
• canvas bluring algorithm