Final version

This is the coolest thing I’ve built to date. I devised a cunning way to generate rain drops and streaks of water and the end result runs smoothly even on old slow machines. It’s part of Signs Of Life – an interactive drama that we produced at Endemol Digital for the BBC.

Please wait for it to load as there’s no preloader in the prototype version. The final also pauses for a few seconds while the rain drops are rendered.

Here’s how I built it -

It’s entirely coded in (Actionscript 2, Flash with the exception of the background image. All rain drops are pre-rendered by shrinking the background image to a 16 pixels wide image, flipping it upsidedown, then cutting out a square from the image corresponding to the position of the rain drop on the glass. i.e. rain drops that appear at the top of the glass take a 16×16 square from the top of shrunken, flipped image and drops from the bottom of the glass, take a 16×16 square from the bottom. This will be the background of the raindrop. It is then masked by a drop shape. In this case a drop shape is quite simply a skewed and rotated white circle which is drawn into a MovieClip using the drawing functions of the MovieClip Class. It’s size is then scaled at random between the minimum and maximum raindrop sizes.

Next, the raindrops are semi-randomly distributed across the window with a given density distribution and maximum size of each drop. The glass is divided up into a grid of squares and each rain drop is placed within 1 square at a random position.

Prototype version

The drops are then drawn onto a giant transparent BitmapData object and the MovieClip version is set to invisible. This way it’s possible to have several thousand drops on screen at once without it slowing down as Flash would normally struggle with more than 50 MovieClips on stage at once. The MovieClip versions of the raindrops are made visible as the streak nears them. The streaks running down the window are like snakes. They are composed of X raindrops trailing one behind the other. As the streak hits a rain drop on the window it absorbs it and grows by 1 rain drop. The streak gradually rolls down the window by a random step of up to 3 pixels per frame, both left or right and down. It can be influenced and controlled by the mouse cursor.

The streak and raindrops are infact nothing other than plain white shapes. A blendmode is used to make it semi-transparent and to make it look 3D, a gradient-bevel filter is applied. The colours used in the gradient-bevel filter are generated dynamically and change in real time. The colours in background of a rain drop (the shrunken, flipped 16 pixel square) are stored in an array, sorted and 16 colours are pulled out from the array taken at even intervals (i.e. if 3 colours were used it’s be the first, last and middle colours in the array). These colours are used for the gradient bevel and are updated as the streak moves down the window in order to accurately appear in synch with what’s directly behind it. The filter is applied over both streaks in the same MovieClip which means when you merge the streaks together, it appears as one and looks pretty realistic.

As this is all dynamic it’s very easy to just switch out the background image and replace it with any other photo. High contrast pictures work the best with this effect.