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.
> 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.
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.
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.
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.
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.
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.
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.
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.
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.
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...
81 comments
[ 3.3 ms ] story [ 138 ms ] threadThere's no point in making web stuff if you can't support major browsers..
EDIT: I take it back. mdkess is right.
https://raw.github.com/maroslaw/rainyday.js/v0.1.1/rainyday....
Note the dot after the raw
Here's a version with the code pasted straight in:
demo 1: http://jsbin.com/UFudExe/1
demo 2: http://jsbin.com/ePidOJe/2
https://rawgithub.com/maroslaw/rainyday.js/v0.1.1/rainyday.j...
demo 1: http://jsbin.com/UFudExe/1
demo 2: http://jsbin.com/ePidOJe/2
> 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.
demo 1: http://jsbin.com/UFudExe/1
demo 2: http://jsbin.com/ePidOJe/2
http://jsbin.com/ePidOJe/2
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
This would make a great ambient bg for one of the nighttime podcasts like sleepbot.
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.
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.
Overall a wonderful demo.
Looks like they even have apps for portable rain now.
I thought that was a very nice touch, since it would be easy to skip that.
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.
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.