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:
before
Screenshot of the live demo:
after

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:

Advertisements

11 thoughts on “realistic rain effect: rainyday.js

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s