Raindrops

Simple animation using Raphaël

I added a very simple Javascript experiment involving the Raphaël SVG/VML Javascript library to the main page. I'm adding this entry to give it a permanent space.

Raphaël is awesome for “uses” like this. Its animation API is absolutely the simplest I've seen. It doesn't quite read your mind, but I imagine you'd have a hard time finding anything that comes as close. If you read the raindrops.js file, you'll see that for the raindrops to fall I just tell Raphael to draw a raindrop at the top, then tell it to transform the raindrop to one at the bottom of the screen, using a nice easing function. And fading the drops out is even easier. This experiment is mostly a demo to show off how simple it is to use animation with Raphaël.

Contrast this with the HTML <canvas> element using the 2d context. For that, you get a fine API for drawing on it, but there is no animation. Every update of the canvas is either adding to it or redrawing the entire thing. High-level it is not.

Plus it's vector-based! Whoa. Vectors are obviously better than pixels. I mean, I have fond memories of some video game where you drove shapes around shooting lasers at other shapes, and I'm pretty sure the name started with “vector”. So, I guess I'm biased.

If you're at all interested in custom graphics and animation on the web, you could do a lot worse than Raphaël.

Of course, if you're trying to stay within the ASCII character set, you're out of luck. •