8 ms·
Rainyday.js
- scrrr 13y agoThe 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 13y agoThat's pretty harsh. How does one support Safari if they don't have a Mac?
- andyhmltn 13y agoThe same way one can support IE without windows ;) (up until recently)
- BaconJuice 13y agoYou can support Safari by downloading the Windows version of it without having the need for a mac?
- emehrkay 13y agoProbably Webkit nightly
- malgorithms 13y agoI 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.
- deleted 13y ago[deleted]
- clone1018 13y agoThe demo doesn't work because https://rawgithub.com/maroslaw/rainyday.js/v0.1.1/rainyday.js https://rawgithub.com/maroslaw/rainyday.js/v0.1.1/rainyday.j... is 503ing, not because he doesn't support your browser :(
- DanielRibeiro 13y agoNote that this url works fine: https://raw.github.com/maroslaw/rainyday.js/v0.1.1/rainyday.js https://raw.github.com/maroslaw/rainyday.js/v0.1.1/rainyday.... Note the dot after the raw
- nness 13y agoWorks fine for me, Safari 6.0.5 on OSX 10.8.4.
- bigd 13y agoNeat! 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
- BaconJuice 13y agoThis doesn't work on Chrome Version 27.0.1453.116?
- jffry 13y agoThe 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
- acron0 13y ago503 kills the demo :( https://rawgithub.com/maroslaw/rainyday.js/v0.1.1/rainyday.js https://rawgithub.com/maroslaw/rainyday.js/v0.1.1/rainyday.j...
- jffry 13y agoHere you go: demo 1: http://jsbin.com/UFudExe/1 http://jsbin.com/UFudExe/1 demo 2: http://jsbin.com/ePidOJe/2 http://jsbin.com/ePidOJe/2
- joshstrange 13y agoFrom 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.
- jffry 13y agoIt 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
- dphnx 13y agoHere’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 13y agohere's the second demo (different backdrop, and no horizontal motion): http://jsbin.com/ePidOJe/2 http://jsbin.com/ePidOJe/2
- deleted 13y ago[deleted]
- remotesynth 13y agoThe 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-rain-effect-with-canvas-and-javascript/ http://flippinawesome.org/2013/09/23/creating-a-realistic-ra...
- bnycum 13y agoShould combine this with http://raining.fm/ http://raining.fm/
- iso-8859-1 13y agosee also http://www.stereomood.com/mood/it's%20raining http://www.stereomood.com/mood/it's%20raining
- jamesrom 13y agoor http://www.rainymood.com/ http://www.rainymood.com/
- sealo 13y agoNice 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
- peachlover 13y agojsbin is up again
- andypants 13y agoThis 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 13y agoI 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.
- fournm 13y agoOuch 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.
- STRML 13y agoThat'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.
- ScotterC 13y agoSome, 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 13y agoHe 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 13y agoObviously at this point we should begin ray-tracing.
- devindotcom 13y agoI'll call John Carmack.
- IgorPartola 13y agoNot if you wax/RainX the surface :)
- laveur 13y agoI would add that its not realistic as raindrops combine because of surface tension when they touch each other :(
- standeven 13y ago
- quaffapint 13y agoThat 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.
- HeyItsJames 13y agoMy 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 13y agoWell, 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 13y agoIf 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.
- Cyranix 13y agoGreat efforts. I don't think it's usually the case that a raindrop is brought to a stop once it overcomes friction, though, right?
- d23 13y agoCool! Is there a way to turn on anti-aliasing to make it a bit smoother?
- semjada 13y agomake it under 1k and i'll be impressed. it's just too darn big!
- locofacetwice 13y agominify it
- burpee 13y agoI 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.
- dyselon 13y agoI 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-wet-weather-effects.aspx 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.
- vtbose 13y agoThe pixar short http://www.pixar.com/short_films/Theatrical-Shorts/The-Blue-Umbrella http://www.pixar.com/short_films/Theatrical-Shorts/The-Blue-... is a good example...
- aeontech 13y agoLooks 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
- ChikkaChiChi 13y agoFantastic link, thank you!
- hablahaha 13y agoSo 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.
- Kluny 13y agoSomeone please just demo it on their own site already, jeez.
- spyder 13y agoCurrently 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-part-1/ http://aerotwist.com/tutorials/an-introduction-to-shaders-pa...
- MrBra 13y agoCouple 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? :)
- dferlemann 13y agoIt's so awesome. I'm gonna use it for my next impress.js presentation this Thursday. Thanks, Marek! :)
- quaz3l 13y agoI 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
- toonbit 13y agoI just had flashbacks of snow gif's on websites…
- deleted 13y ago[deleted]
- curiouslearn 13y agoWow! This is awesome. Thanks for sharing.
- saltyknuckles 13y agoThis is awesome.
- Jagat 13y agoIs 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 13y agoRefresh
- ivanbrussik 13y agosomeoen needs to make a conditional statement based on weather patterns to load this if it is raining in the users area.
- axansh 13y agoamazing. good stuff man :)
- chenster 13y agoDon'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.
- tsenkov 13y agoAwesome. I would check for devicePixelRatio in order to render it crystal clear on retina display.
- ryanmcdonough 13y agoBeautiful.
- Grepsy 13y agoWould be fun to combine this with this foggy window simulation I once made. https://github.com/Grepsy/fingers https://github.com/Grepsy/fingers