Rain simulation

As a generative animation exercise (and also just because, um, rain is nice-?), I decided to code me up some good ol’ precipitation. Considerations included: degree of realism, adaptability and performance. Specifically, animating a single layer of tear-shaped drops falling uniformly in perfectly straight lines is relatively easy to do, and certainly has its place within the right art style. On the other hand, ultra-realism would entail thousands of varied and varying particles, deeply distributed in 3D space – something that would better suit pre-rendering than realtime animation, or at the very least, something other than Flash. But that would be no fun at all. I opted for a low-ish number of convincing enough, but inaccurately shaped, particles (apparently raindrops are actually round, mushroom-top blobs – who knew?!), with fairly realistic motion and three distinct layers for the parallactic goodness. I tried to keep everything as configurable as possible, so fall speed, wind strength, blustery-ness, particle graphic, drop size variation and viewport size can be adjusted easily. Reuse or lose! – as they say. Well, they ought to start saying that.
On with the rain!:

You may notice that in the front and backmost layers, the drops are a little blurred. I wanted to give a narrow depth of field effect, and had initially applied a BlurFilter to their containing sprites, but that hit performance hard – so I drew a separate drop symbol for their layers, softening the perimeter with a radial gradient down to transparent, which is just as cheap performance-wise as a solid drop.

Thinking a little more about the worth of such an effect, I realised that I would likely want the rain to interact with whatever other objects might be in the scene. And so I added an umbrella:

It didn’t make much sense for the umbrella to stop drops across all layers, but the effect wasn’t very noticeable with so many other drops falling past it, so I removed them for this demo. I also added some physics-y hinged swinging based on the umbrella’s sideways movement. A splash animation plays at the exact intersecting point of drop and canopy – but I only later realised that, since around 75 drops make contact every second, I could easily have randomised the locations of the splashes and simplified the collision detection. Still! – honesty is the best policy, and when it’s only drizzling, accuracy of the contact point is more relevant.

So now I have almost everything I need for my ‘KEEP THE LOST KITTIES DRY’ minigame. No need to thank me just yet, world.

I drew the visual assets in the Flash CS3 IDE, compiled my classes in the wonderfully lightweight FlashDevelop, and animated the drops using Tweener. That’s all!

Related posts

  1. syn0p5
  2. orange
  3. particles
  4. 04threedee

    2011.04.16

    Dinoglyphs
  5. one

    2014.08.25

    Bloggle
  6. NO IMAGE

    2016.10.02

    100 Days: Gallery
  1. Rob 2011.11.29 7:09am

    This is amazing!!!
    Could you please post the source code! I am quite new to Flash and would like to see the innards of this amazing rain simulation!
    Thanks in advance

HTML tag cannot be used in this comment.

Hello

I'm Adam Vernon: front-end developer, free-time photographer, small-hours musician and general-purpose humanoid.