Realistic rain drops in JS | Hacker News Reader

Realistic rain drops in JS

maroslaw.github.io

49 pointsvvnraman21 comments

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.

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.

Looks like they did:

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

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.

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

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

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

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

Very convincing on Retina display from two feet or more.

Silly buzz words. You mean, high resolution

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

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

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?

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/

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.

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?

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

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

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

How do I make it go away?

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)

Reply on news.ycombinator.com