Realistic rain drops in JS

http://maroslaw.github.io/rainyday.js/demo1.html

by vvnraman • 12 years ago

49 21 12 years ago

maroslaw.github.io

TD-Linux• 12 years ago

This is more impressive than I first thought... I wiped my screen, thinking I had sneezed on it.

I'm finally getting pretty comfortable with Rails, HTML, CSS, enough to actually use things like this. Can anyone recommend slick/good looking js like this that would be fun to toy with?

thekingshorses• 12 years ago

You can try it out my hacker news web app for mobile. http://hn.premii.com

Source code at http://github.com/premii/hn Or This is another awesome HN app. Scroll down to bottom for source code. http://hackerwebapp.com/

rubiquity• 12 years ago

How do I make it go away?

matrix• 12 years ago

It's a demo page. You can see the other examples here:

http://maroslaw.github.io/rainyday.js/

(click on the images to see each demo)

devgutt• 12 years ago

really cool. Something to help the mood http://www.noisli.com/

verelo• 12 years ago

This is really great, amazing to see that things like this are possible on a common users browser. What was the inspiration behind creating this?

jameszhao00• 12 years ago

Looks pretty cool but the heavy aliasing is a bit distracting.

fudged71• 12 years ago

Yeah, I mostly see blinking pixels. Maybe it is better on a retina display.

TheSpiceIsLife• 12 years ago

Very convincing on Retina display from two feet or more.

el_duderino• 12 years ago

Silly buzz words. You mean, high resolution

Reply

james33• 12 years ago

This is just begging for some JS audio to go with it!

Reply

kawsper• 12 years ago

It would work great together with http://www.rainymood.com/

Reply

mgraczyk• 12 years ago

Looks great! The biggest drops sort of spoil the illusion at times because they pass in front of or behind other drops without absorbing them. Maybe a cool tweak for v2 would be to add some simple collision resolution?

It would probably look great if you did a front to back sort based on droplet size, and resolved collisions (which you'd have to detect) by deleting the smaller droplet.

Reply

pbnjay• 12 years ago

Looks like they did:

http://maroslaw.github.io/rainyday.js/demo012_3.html

Reply

mikeg8• 12 years ago

That one looks much less realistic to me. There were no long streak from drops that slid all the way down.

Reply

TomatoTomato• 12 years ago

It resolves the overlap, but doesn't combine the drops into a larger single drop.

Reply

starbugstone• 12 years ago

That patch of blue sky on the right doesn't feel quite right and takes the realism out of it a bit.

I know, just me being fussy. Impressive use of canvas though, it could be really nice as an appeasing background image on a site. Using the navigator geolocalisation and a weather site we could have a weather sensitive site. Have to test resource wise and see.

Reply

santaclaus• 12 years ago

If one can solve a tridiagonal linear system in JS that is totes doable in a psuedo physical way: http://www.cse.ohio-state.edu/~whmin/Wang-2007-SGS/Wang-2007...

The Thomas algorithm (http://en.wikipedia.org/wiki/Tridiagonal_matrix_algorithm) and that technique could probs make your dream come true.

Reply

seanica• 12 years ago

Press F11 then refresh. Reminds of screensavers I wrote in the 90s/early 2000s. Very nice.

Reply

futhey• 12 years ago

Love it, used it in a project a while back. Unfortunately it's pretty resource intensive. Had to disable it for most mobile and tablet browsers.

Reply

Realistic rain drops in JS

Related Stories