Creating a Realistic Rain Effect with Canvas and JavaScript | Development on Various Platforms | Scoop.it

I recently released a fun project called rainyday.js. I consider it a rather humble piece of code and, in fact, it is more or less my first contact with JavaScript on a level that requires a little more than displaying alert popups. Hopefully, some of you will find it useful and interesting.

The idea behind rainyday.js is to create a light JavaScript library that makes use of the HTML5 canvas to render an animation of raindrops falling on a glass surface. Simple enough, yet challenging at times, especially since we’re trying to avoid that cartoonish look usually attributed to JavaScript animations and at the same time make sure the animations work smoothly.

In this article I’ll try to describe the overall approach as well as the “little things”, so bare with me.

The animation uses three different canvas objects in order to achieve the layering effect, as can be seen on the figure below...


Via Jan Hesse