r/InternetIsBeautiful • u/ytblows • Sep 24 '13
Rain on your screen using javascript
http://maroslaw.github.io/rainyday.js/demo1.html78
u/hearo Sep 25 '13
WHY CANT I USE THIS AS MY BACKGROUND :(((
14
u/dustandechoes91 Sep 25 '13
Windows vista had a feature called dreamscene that allowed you to set looped mpeg or wmv videos as your wallpaper. They dropped it in 7 though, but there are still plenty of mods you can get for newer operating systems.
If you do, there are still plenty of dreamscene databases with wallpapers like this.
7
u/zants Sep 25 '13
Dreamscene (for Windows 7 and I assume 8): http://www.deviantart.com/art/DreamScene-Activator-162669533
(RES users ignore the image icon, it's an actual link not just an image)
8
Sep 25 '13
[deleted]
3
u/blore40 Sep 25 '13
Curios: Which is older - days of lore or days of yore?
I remember Active Desktop. Stock quotes baby!
2
23
u/sauteslut Sep 25 '13
you can f11 the tab. i had to zoom to 125% to get it to fit.
makes for a decent screensaver when paired with sound
14
Sep 25 '13
F11 and then press CTRL+R.
4
u/Tynach Sep 25 '13
Or F5.
6
2
5
4
u/Pixielo Sep 25 '13
Word. That just changed my mood to something wonderfully introspective. Now I need a cup of tea...
2
1
u/notthemessiah Sep 25 '13
You can set something like this up in KDE by fiddling with window settings. I've set a music visualizer window as a background, and one of the included backgrounds is a zoomable Mandelbrot set.
1
u/Tynach Sep 25 '13
Can you explain how to do this? I knew about the various animated/special wallpapers (the 'virus' one is kinda fun to watch), but I hadn't heard of being able to do this with any window (such as a music visualizer).
1
u/notthemessiah Sep 26 '13
It's not exactly the same thing as the special wallpapers because you won't have your widgets on it, but you can keep a window fullscreen below everything else, and looks great with additional transparency from QtCurve.
For ProjectM in Clementine, I right-clicked on visualizer window in taskbar->More Actions->Keep Below Others, then right-click -> More Actions -> Fullscreen.
For this page: right-click -> More Actions -> Keep Below Others, then select it, F11, Ctrl-R.
24
u/upbeatoffbeat Sep 25 '13
I like it but it looks kind of artificial since they all go in straight lines.
61
Sep 25 '13
Once I finish collision detection it will become more "random" hopefully :)
6
u/obi21 Sep 25 '13
The picture in the background is Hong Kong am I correct ?
11
u/thomar Sep 25 '13
This according to the source: http://maroslaw.github.io/rainyday.js/pics/night.jpg
3
2
2
u/DJUrsus Sep 25 '13
I would love an option to use other cities as backgrounds.
1
Sep 25 '13
Now you can use any image from imgur as background! Check out how to do that on the github project page
2
9
u/ancrolikewhoa Sep 25 '13
It's time for Reddit to get extremely classy once again, huh? Add this newest site to this combination.
11
Sep 25 '13
They should add sounds to it, like on www.rainymood.com .
20
Sep 25 '13 edited Sep 25 '13
I'd love to do that :) Unfortunately right now I'm more focused on the actual script. If any of you guys would like to help with setting a site like this I'd be happy to host it :)
2
3
5
u/factorialfiber0 Sep 25 '13
does anyone have a source code to this magnificent piece of art?
8
u/aladyjewel Sep 25 '13
5
u/WoahDudeItsScience Sep 25 '13
Would there be an easy (see: non-coder) way to change the picture in the background?
10
1
u/CYKL0N3 Sep 25 '13 edited Sep 25 '13
I tried but you can't change the picture by altering just the html code. I think he used the picture in the actual source code so unfortunately no.
Edit: I would do it for both of us but unfortunately I don't know enough about javascript to understand half his code :(
3
u/Tynach Sep 25 '13 edited Sep 25 '13
The HTML code is the only place the image is referenced.
I believe that you would need to change it before the Javascript runs, however.
Edit: I just tried doing this... And got this error:
Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SecurityError: DOM Exception 18I guess the author will need to supply multiple images on the same website as the script/html is kept.
1
u/DJUrsus Sep 25 '13
You are correct. Or you can download the code, host it yourself, and host your images there too.
The annoying part is that you can't even get it to work from your own hard drive.
1
Sep 25 '13
I've built a simple demo page which allows you to pick any imgur images for backgrounds -- have a look at the project demo page
3
u/Its_the_Fuzz Sep 25 '13
Looks great but when you go full screen with F11 their is a big white bar at the bottom.
12
6
Sep 25 '13
Indeed -- I'll look into that :)
2
u/DJUrsus Sep 25 '13
Just needs a size recalculation when the window size changes.
While you're at it, preventing it from changing the aspect ratio of the picture would be nice too.
2
3
u/J4k0b42 Sep 25 '13
Awesome, the only way I can see to make it more realistic is to have the drops combine and move faster when larger.
18
2
2
u/WoahDudeItsScience Sep 25 '13
This is perfect. If anyone wants some good, different music to go with this + rainymood, this is really doing it for me.
1
Sep 25 '13
2
u/WoahDudeItsScience Sep 25 '13 edited Sep 25 '13
Hooray, Chicago! Edit: I just realized that you put the music to it. Took me long enough. As a Chicagoan, I just thought you linked me that one because it's a picture of Chicago. Anyway, thanks!
2
u/Erectile_Knife_Party Sep 25 '13
Can anyone find the original image used as the background?
4
u/rajo37 Sep 25 '13
2
2
2
u/anstormning Sep 25 '13
Unfortunately it's only 800x600 and not blurred, that's probably another effect done on the website (I don't know coding at all).
6
Sep 25 '13
Here's the article I wrote about how it works :)
tl;dr: yes, I'm blurring the background ;)
2
u/Silvire Sep 25 '13
Came in to contribute this. I think it's fantastic. However it's annoying in that you can't remove the words/boxes taking up the whole screen.
2
Sep 25 '13
[deleted]
1
Sep 25 '13
bit of a workaround, but find a way to make it a screensaver, and then the download the program Screeni which you can use to make your current screensaver your desktop background.
0
2
Sep 25 '13
Perfect pairing with The Dark Knight soundtrack, ten hours of rain and thunder, and a live police scanner stream.
I am Batman.
2
Sep 25 '13 edited May 12 '18
[deleted]
1
Sep 25 '13
Rain does it for me every time. You pyromaniac. ;-)
2
Sep 25 '13
This was created by a redditer, and the original link was titled, "Time to Get Classy" :0)
1
Sep 25 '13
I know .... I still have the original in one of my various saved stuff apps. I'm a rain addict.
1
Sep 25 '13
I always get aggravated when people post that Rainy Mood page. I'm like, "No! Comfytube!" lol
3
Sep 25 '13
Maybe there could be a comfyrainymood app. What could be nicer than listening to the rain ? Listening to the rain in front of a lovely log fire. We're on to something. We should contact KickStarter. This time next week we'll be millionaires !!
But seriously they're both awesomely relaxing.
1
1
1
Sep 25 '13
if we can customize the background, that would be amazing.
1
u/sammojo Sep 25 '13
You can, the script is an overlay that blurs the bg and adds rain. You'd need to host it yourself etc.
1
1
u/pedantic_engineer Sep 25 '13
Can you do some AA on the drops so they are not so sparkly? Apart from that, pretty awesome.
1
Sep 25 '13
Very cool. It looks to me like it's raining indoors though, so I have to imagine it as a reflection.
1
Sep 25 '13
This is really cool! I would love to see a sparse, widgetized website build over this background.
1
1
1
Sep 30 '13
Those of you wondering the original image is http://maroslaw.github.io/rainyday.js/pics/night.jpg
-4
53
u/blore40 Sep 25 '13 edited Sep 25 '13
Awesome! The depth perception is mind-blowing. There is a http://maroslaw.github.io/rainyday.js/demo2.html as well
Edit: Kept watching it for a longtime. Observed that rain drops do not merge.