Rainyday.js

For all those who have little cool rain outside the window these days, Marek Brodziak made a funny demo on js + canvas ( demo # 1 , demo # 2 - and immediately warn you that it may not work in all browsers) that simulates raindrops on glass . The goal of the developer was to achieve better smoothness of the drop animation.

To achieve the best immersive effect, watch the demo is recommended to first open in the adjacent tab raining.fm .

All lovers of joke about the hopelessness of this image should definitely like

The image consists of several layers: the original background image scaled to fit the browser window and blurred using the Stack Blur Algorithm (Mario Klingemann) ; the middle - invisible - layer on which reflections of drops are drawn; top layer, which is used to draw the drops themselves. The author writes that this approach made the script code more readable and markedly increased performance.
')
Rendering of raindrops consists of randomizing the shape of a drop , which consists in approximating a circle . The animation engine consists of three modules: rain, gravity, and wake. The first is responsible for placing a drop of random radius on the canvas, the second is for moving the drop along the vertical axis, and the third is for drawing the trace of the displaced drop.

In details about the internal device can be found in the article of the author with explanations . In the new version, the author plans to add a collision check for drops.

Github