RainyDay.js


Rendering raindrops with JavaScript


Learn more

About

The idea behind rainyday.js is to create a JavaScript library that makes use of the HTML5 canvas to render an animation of raindrops falling on a glass surface. Simple enough, right?

Have a look at the demos to see it in action.

Demo #1

Demos

You can get source code of all the demos here

Demo 1

Example with custom rain engine parameters update example.

Demo 2

Example with custom rain engine parameters.

Demo 3

Another example with custom rain engine parameters.

Demo 4

Setting gravity and smudge for screen.

Demo 5

Using portion of image (croping option)

Demo 6

Using background image of a container

Options

RainyDay.js provides following options to configure the rain pattern and display behaviour.
var rainyDay = new RainyDay(options)
Option Defaults Description
image None [Required] Source image element, ID or element with background image or ID of element with background image
parentElement Optimal Specify Id of the parent element which should contian generated effect.
sound none Path of the sound file to play
blur 10 Blur strength applied to the image
crop none Crop object if you want to use a cropped portion of the image.
enableCollisions true Enable collisions between rain drops
enableSizeChange true Hanlde canvas update when screen size changes
fps 24 Rendering fps of canvas updates
gravityAngle Math.PI / 2 Angle of gravity
gravityAngleVariance 0 Adds variance to gravity to simulate wind effects
gravityThreshold 3 Strength of the gravity

Methods

RainyDay.js provides following methods to update the rain behaviour at runtime.
var rainyDay = new RainyDay({image: '#myHeader'})
Method Description Example
rain Applies rain presets to the initliazed RainyDay Object. rainyDay.rain([ [3 //min drop size, 3//max drop size, 0.88//delay], [5, 5, 0.9], [6, 2, 1]]) //collection of engine presets
pause Pause animation. rainyDay.pause()
resume Resume animation. rainyDay.resume()
destroy Destroys the rain engine rainyDay.destroy()
Demo #4

Wanna help? Yay!

We're looking for fresh ideas, patches that might improve code quality and performance. Found an issue with the script or have a feature request? Submit a ticket!

Forked from: RainyDay.js All credits to the orignal author: @maroslaw