Realistic rain drops in JS

Realistic rain drops in JS(maroslaw.github.io)

49 points by vvnraman 12 years ago | 21 comments

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.

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.

pbnjay 12 years ago | |

Looks like they did:

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

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.

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.

TomatoTomato 12 years ago | | |

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

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

TD-Linux 12 years ago |

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

seanica 12 years ago |

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

piratebroadcast 12 years ago |

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/

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.

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?

james33 12 years ago |

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

kawsper 12 years ago | |

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

devgutt 12 years ago |

really cool. Something to help the mood http://www.noisli.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)