Rain and Water Effect Experiments | Hacker News Reader

Rain and Water Effect Experiments

tympanus.net

161 pointsantouank30 comments

Nice! But the initial drops are too similar to a perfect oval. You can try to make some randomness to the initial shape to make it more realistic. (It's much easier to say this than to make a simple model that looks good.)

I did try that, but weirdly shaped drops looked weird on the animation! I was meaning to add a couple of drops close to each other to mitigate that but had no time for experimenting anymore.

Another issue is that when a big drop falls, the small drops that it leaves behind are equally sized and equally spaced.

Great job! I'm wondering if you'll post the source before it was transformed with browserify?

I will - I have to clean up some stuff first though!

Last famous words of every abandoned project :P

Don't worry about that! Just post it and have other people work on it for you ;)

I want this as an Android Live wallpaper.

I've been wanting this for years. All the "rain" live wallpapers I've found out there were basically video players. I wanted something you could apply your own backdrop to, control rain amount, stickiness, and possibly even angle of flow depending on phone orientation.

Unfortunately, my specialty is embedded dev, not GL, so I've been waiting for someone else with the skills to do so :)

When I download the source and try to open index.html in Chrome, it doesn't work.

"Unhandled promise rejection DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded."

Does anyone know how to get it working? Thanks!

You need to run it from a web server. Open a shell on the root directory and run `python -m SimpleHTTPServer 8888` on it. Browse to `localhost` on 8888.

Why wouldn't (or shouldn't) one be able to make it run standalone?

I think it relates to the JavaScript used, and limitations imposed by the web browser.

It's to do with the browser security model and JavaScript restrictions on file:// paths.

I'm not entirely sure of the class of attack that it prevents, but it's been that way for quite a while now.

For a while, browsers allowed unfettered Javascript access to local files, so malware sites would just get users to save the site, and run it.

Tada, access to local files, or unlimited XHR requests for DDoSing, etc. :-)

Thanks, that worked.

I wonder how many slo-mo rain-on-glass videos you guys watched while making this.. Looks very impressive!

Something about the large droplets' trails is a bit uncanny valley-ish, I think it's the regularity of distances between the trail spots?

I noticed the same thing. That is the problem with this kind of thing, you tend to get into the uncanny valley. Still looks pretty awesome anyway.

Hah, it rained more than enough here this month, no video was needed.

> Something about the large droplets' trails is a bit uncanny valley-ish, I think it's the regularity of distances between the trail spots?

Yeah. I think it's due to that, and the low terminal velocity of the droplets.

Still very convincing, IMO. If I wasn't looking for it, I would have just assumed it was a video.

Very cool, I love it but one point though is that the rain drops look to me like they're being observed from some point (vantage point) outside in the rain and not from inside behind the glass.

Any of you guys have noticed this or it's just me?

For reference, you may want to check this out (2 to the right) http://californiawaterfoundation.org/

Some long class names on that page!

  class="they-say-its-never-too-late-to-change"

That is a video

It looks ridiculously cool. We will definitely have to add this to Goo Create somehow, either as a fullscreen post-effect or as a special shader to apply to windows or other transparent objects.

Now all it needs is to be combined with http://rain.today for the ambient sound, and it'd be perfect.

Does the background show Singapore's Marina Bay for everyone else, or is it based on IP geo-location? (obligatory "I can see our house from here!")