

Rainyday.js - josephwegner
https://github.com/maroslaw/rainyday.js

======
ScotterC
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.

~~~
coldnebo
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.

~~~
tel
Obviously at this point we should begin ray-tracing.

~~~
devindotcom
I'll call John Carmack.

------
dyselon
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...](http://blogs.msdn.com/b/shawnhar/archive/2009/04/01/motogp-
wet-weather-effects.aspx)

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.

~~~
aeontech
Looks like the rest of the posts about them are here:
[http://blogs.msdn.com/b/shawnhar/archive/2009/04.aspx](http://blogs.msdn.com/b/shawnhar/archive/2009/04.aspx)

------
HeyItsJames
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.

~~~
Timothee
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.

~~~
mden
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.

------
jffry
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](http://jsbin.com/UFudExe/1)

demo 2: [http://jsbin.com/ePidOJe/2](http://jsbin.com/ePidOJe/2)

~~~
neeee
jsbin is 502-ing.

~~~
jffry
Ooh lovely!

------
bnycum
Should combine this with [http://raining.fm/](http://raining.fm/)

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

------
remotesynth
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...](http://flippinawesome.org/2013/09/23/creating-a-realistic-rain-effect-
with-canvas-and-javascript/)

------
spyder
Currently to make it work you have to run it locally after downloading from
github:
[https://github.com/maroslaw/rainyday.js](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://www.html5rocks.com/en/tutorials/webgl/shaders/)
[http://aerotwist.com/tutorials/an-introduction-to-shaders-
pa...](http://aerotwist.com/tutorials/an-introduction-to-shaders-part-1/)

------
bigd
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

------
hablahaha
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.

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

Looks like they even have apps for portable rain now.

------
andypants
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

~~~
Wintamute
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.

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

------
burpee
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.

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

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

[http://jsbin.com/ePidOJe/2](http://jsbin.com/ePidOJe/2)

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

------
STRML
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.

------
acron0
503 kills the demo :(

[https://rawgithub.com/maroslaw/rainyday.js/v0.1.1/rainyday.j...](https://rawgithub.com/maroslaw/rainyday.js/v0.1.1/rainyday.js)

~~~
joshstrange
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.

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

[http://imgur.com/iYpNrfX](http://imgur.com/iYpNrfX)

I use Chrome on Linux Mint.

~~~
marcelftw
Refresh

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

------
chenster
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.

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

------
Cyranix
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?

------
fournm
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.

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

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

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

------
BaconJuice
This doesn't work on Chrome Version 27.0.1453.116?

~~~
jffry
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](http://jsbin.com/UFudExe/1)

demo 2: [http://jsbin.com/ePidOJe/2](http://jsbin.com/ePidOJe/2)

~~~
brazzy
I get 502 for those as well...

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

------
scrrr
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.

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

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

~~~
joshuacc
The latest version is not available for Windows.

------
curiouslearn
Wow! This is awesome. Thanks for sharing.

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

------
saltyknuckles
This is awesome.

------
ryanmcdonough
Beautiful.

------
axansh
amazing. good stuff man :)

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

------
peachlover
jsbin is up again

