Rainyday.js | Hacker News Reader

Rainyday.js

github.com

365 pointsjosephwegner77 comments

Some, hopefully, constructive criticism:

The rain drops are too spherical as they traverse the screen. The friction plus surface tension of a water on glass pulls the tail out significantly farther then represented and also varies on whether the drop is following a path that's already been traversed and therefore has less friction. It would be really really cool to see that effect added in.

He can't really do that with the present approach. :)

Each 'drop' of rain is really a circle painted using the reflection scaled to the size of the drop. This approach is very fast, but won't scale well with odd-shaped drops and larger drops. With a small enough spherical drop, it's a good enough approximation for refraction.

With larger drops, you'd start to notice that the reflection isn't a refraction (i.e. the reflection is cutout in the shape of a circle, rather than truly refracted as in a drop of water).

Other approaches could be adding more expensive texture transforms, or WebGL + a refraction shader for bigger and/or non-spherical drops.

Obviously at this point we should begin ray-tracing.

I'll call John Carmack.

Not if you wax/RainX the surface :)

I would add that its not realistic as raindrops combine because of surface tension when they touch each other :(

One thing I noticed in the second demo is that the rain drops move too perfectly in the diagonal. I'm assuming the effect is to represent wind, which doesn't typically blow at a constant angle and speed.

Overall a wonderful demo.

Come on dude lets not get picky this is beautiful.

It's feedback, why else would he post on HN - great start.

Sometimes you show people things to show people things.

I always loved Shawn Hargeaves' blog post about the weather effects he did in MotoGP: http://blogs.msdn.com/b/shawnhar/archive/2009/04/01/motogp-w...

The interesting takeaway for me was that making something look rainy has so little to do with actual rain drops, and everything to do with the secondary effects of bad weather.

The pixar short http://www.pixar.com/short_films/Theatrical-Shorts/The-Blue-... is a good example...

Looks like the rest of the posts about them are here: http://blogs.msdn.com/b/shawnhar/archive/2009/04.aspx

Fantastic link, thank you!

My favorite part of watching rain on a glass surface is when two raindrops connect with one another and merge together into a larger one. It would take a lot more work (more intensive computation based on the location of the drop, constant checking if another drop is on top of the target raindrop, etc...), but I'd _love_ to see two globules merge with one another. That would be incredible.

Well, it's your lucky day, because it does that. There's even a tiny bit of acceleration when it happens it seems. I was curious to see if anybody mentioned that in the comments actually.

I thought that was a very nice touch, since it would be easy to skip that.

If it does it, it doesn't do it very consistently as I was specifically looking for that effect only to be disappointed. That being said, this is still a really cool demo.

It looks like rawgithub.com is 503-ing. Here's a version of the demos with the JS file pasted straight in:

demo 1: http://jsbin.com/UFudExe/1

demo 2: http://jsbin.com/ePidOJe/2

Server still struggling for me, either 503 or 502

jsbin is 502-ing.

Ooh lovely!

Should combine this with http://raining.fm/

or http://www.rainymood.com/

Nice work Marek! Neil from raining.fm here, I did a quick mashup after work tonight, check it out here http://raining.fm/raindrops

The author of this library wrote an article about how it was built with some new demos at http://flippinawesome.org/2013/09/23/creating-a-realistic-ra...

Currently to make it work you have to run it locally after downloading from github: https://github.com/maroslaw/rainyday.js In Firefox it runs fine at the beginning but then the fps decreases (running in 1920x1200), in Chrome it's "better" because it seems to use both CPU cores fully on a dual core while Firefox uses only one. Anyways it should use the GPU more (using WebGL) and not so much the CPUs, but i understand it's one of the developer's "first contact with JavaScript" and using shaders would be a little harder for him but here are some introductions: http://www.html5rocks.com/en/tutorials/webgl/shaders/ http://aerotwist.com/tutorials/an-introduction-to-shaders-pa...

Neat! but the coalescence is not right (yet?)... You'll have to increase the volume of a drop when it eats a smaller one! great stuff

So I opened this in a tab without looking at it immediately and then forgot about it. When I opened it later I was legitimately worried that water had spontaneously started streaking down my screen, so really good job, you scared me, if even for one second.

That is quite slick. If you really want a rainy day in your browser, there's always this one...http://www.rainymood.com/

Looks like they even have apps for portable rain now.

Couple of days ago I discovered http://www.rainymood.com/ and posted a link to it on HN. Did you get inspired by that or is it just a concidence? :)

Here’s a working version http://jsbin.com/ixUSEBE/3/ I copied the rainday.js into the HTML so it doesn’t rely on external resources.

here's the second demo (different backdrop, and no horizontal motion):

http://jsbin.com/ePidOJe/2

I actually did something similar to this about 5 years ago with Flash. By applying a complex filter to a flat layer to make the layer behave and look like it was a liquid drop on a glass surface. Essentially I just embossed it with 4 different colors that matched the background and then added a subtle "gloss" on the top to give it a 3D experience.

The blobs merged together seamlessly when they even came close to eachother and were a pretty close impression of real liquid drops.

This technique might also work to make the merging of the blobs appear more realistic.

This is really cool!

There are a few small issues:

* There is a lot of flickering of the raindrops

* When two raindrops collide, they do not always merge correctly - sometimes the size is wrong, or the position is wrong

I think the "flickering" is actually intended, I think its quite realistic ... I think its an observed phenomenon: when a drop is in motion down a pane of glass with bright lights behind you often see some fairly drastic changes in which pin-points of lights it's refracting into your eye at anyone time, resulting in a sort of rapid flickering inside the drop.

I modified this to show the current song, and made it my screensaver with WebViewScreenSaver (https://github.com/liquidx/webviewscreensaver). Image: http://imgur.com/woYztL8

That's a great demo - demo #2 was a trip for me, because that's just about what I see out my window right now - there's leftover rain from Usagi on the window, and the IFC2 in the background.

This would make a great ambient bg for one of the nighttime podcasts like sleepbot.

Would be fun to combine this with this foggy window simulation I once made. https://github.com/Grepsy/fingers

503 kills the demo :(

https://rawgithub.com/maroslaw/rainyday.js/v0.1.1/rainyday.j...

Here you go:

demo 1: http://jsbin.com/UFudExe/1

demo 2: http://jsbin.com/ePidOJe/2

From Rawgithub.com's website

> Use this for testing and for sharing demo code with friends, but don't use it for anything production-related. It's slow, it might break from time to time, and it's intended as a convenience for development, not free static hosting.

Rawgithub is nice to test something out on but probably not going to hold out against HN traffic. I did get it working with a different link you posted and it looks very cool.

Don't the water drops can merge into irregular shaped larger water spots and trails; instead of all moving one direction, the real life drops are actually move around the surface.

Is it just me or does it cover only 3/4 of the screen in full screen mode?

http://imgur.com/iYpNrfX

I use Chrome on Linux Mint.

Refresh

I just had flashbacks of snow gif's on websites…

Great efforts. I don't think it's usually the case that a raindrop is brought to a stop once it overcomes friction, though, right?

Ouch to the 503's with rawgithub, but I like this. I'd love to see a rain track/Chell in the Rain version with this on it.

It's so awesome. I'm gonna use it for my next impress.js presentation this Thursday. Thanks, Marek! :)

Awesome. I would check for devicePixelRatio in order to render it crystal clear on retina display.

Cool! Is there a way to turn on anti-aliasing to make it a bit smoother?

This doesn't work on Chrome Version 27.0.1453.116?

The script is being served up via rawgithub, which is 503ing.

Here's a version with the code pasted straight in:

demo 1: http://jsbin.com/UFudExe/1

demo 2: http://jsbin.com/ePidOJe/2

I get 502 for those as well...

I've never had so much trouble to view a js demo

someoen needs to make a conditional statement based on weather patterns to load this if it is raining in the users area.

Wow! This is awesome. Thanks for sharing.

The demo doesn't work? (Safari)

There's no point in making web stuff if you can't support major browsers..

EDIT: I take it back. mdkess is right.

That's pretty harsh. How does one support Safari if they don't have a Mac?

The same way one can support IE without windows ;) (up until recently)

You can support Safari by downloading the Windows version of it without having the need for a mac?

Maybe like 18 months ago.....

The latest version is not available for Windows.

Probably Webkit nightly

I disagree. If it's an artistic project, I think it's pretty cool, and who cares if it works on all browsers? It's still worth seeing. Further, if it's just a UI flourish which doesn't otherwise affect the functionality of a site, then it's fine, too. Anyway, it looks cute to me. I'm thankful to whoever posted it and whoever made it.

The demo doesn't work because https://rawgithub.com/maroslaw/rainyday.js/v0.1.1/rainyday.j... is 503ing, not because he doesn't support your browser :(

Note that this url works fine:

https://raw.github.com/maroslaw/rainyday.js/v0.1.1/rainyday....

Note the dot after the raw

Works fine for me, Safari 6.0.5 on OSX 10.8.4.

Someone please just demo it on their own site already, jeez.

This is awesome.

Beautiful.

amazing. good stuff man :)

make it under 1k and i'll be impressed. it's just too darn big!

jsbin is up again

Reply on news.ycombinator.com