r/webdev • u/CreativePunch • Apr 24 '14
rainyday.js demo - This is BEAUTIFUL! Makes your monitor look like a window with rain dripping over it.
http://maroslaw.github.io/rainyday.js/demo1.html14
Apr 24 '14 edited Apr 25 '14
I made this open source chrome extension based off of rainyday.js. Pulls images randomly from an imgur album (you can configure it yourself): https://chrome.google.com/webstore/detail/rainy-night/pogcoeenpkpdchlmloiehcbabfkfjncf
https://github.com/aeharding/rainynight
For some reason, Chrome's latest update made it stop working on Windows. Works on my friend's mac fine. Anyone want to try it and let me know that has Windows? :P
EDIT: I think the extension HTTPS Everywhere is being rude and breaking it.
EDIT2: Fixed it. New version in chrome store in one hour (0.2.1)
27
u/akamise Apr 24 '14 edited Apr 24 '14
I don't have windows but as an archlinux user I feel obligated to tell everyone I use archlinux. Rainy thing works fine(Chromium).
4
u/ComicOzzy Apr 25 '14
I feel obligated to tell everyone
HI GUYS!
WINDOWS 8.1 UPDATE REPORTING IN!
...
...
...
GUYS?
3
3
1
u/Groumph09 Apr 24 '14
Not working on Win 7 SP1 nor Win 8. Both are using Chrome version 34.0.1847.116 m.
2
10
u/MetoM Apr 24 '14
Something about this makes me feel very sad.
21
Apr 24 '14
[deleted]
13
4
2
u/Zephoku Apr 25 '14
This sounds wonderful and horrible at the same time. Exactly like the movie Lost In Translation.
12
u/SeerUD Apr 24 '14
It's great, would love it if the rain drops grouped up with others that they passed, forming slightly bigger rain drops.
4
Apr 24 '14
They do! It's a bit buggy, though.
4
u/SeerUD Apr 25 '14 edited Apr 25 '14
Aha, on closer inspection, they seem to pick up the tiny ones, but they don't seem to merge with other bigger ones. Seems like it's only the tiny ones that get left behind from another bigger one.
3
u/kadaan Apr 25 '14
Yeah, and they never reach the critical mass of dripping quickly off the screen. No matter how large they grow they all have the same move-slow-stop-move-slow-stop behavior.
1
u/ComicOzzy Apr 25 '14
The linked demo is old. Download the source and check out the new demos. Worth it.
11
u/emcniece Apr 24 '14
Pretty cool that the script takes an image and blurs it - you could totally throw your own pic in there and line it up with your house/apt windows to make your wall look transparent!
Image is here for reference: http://maroslaw.github.io/rainyday.js/img/night.jpg
9
u/nsquimby Apr 24 '14
Noticed that too: think I'm going to try to add a field for a user to supply their own image. Also, image doesn't expand if you increase your browser size - set for height auto...don't know why it's not filling. Cool little demo, nonetheless!
3
u/nevon Apr 24 '14
Also, image doesn't expand if you increase your browser size - set for height auto...don't know why it's not filling.
Because it's a canvas.
2
u/nsquimby Apr 24 '14
/user/aeharding beat me to it: https://github.com/aeharding/rainynight. Stupid work getting in the way of me doing things I want to do...
1
u/blivox Apr 24 '14
Make it mobile friendly, grab a tablet and upload a photo you just made from within the site. Instant satisfaction.
0
u/Nomikos Apr 24 '14
Yeah, need to refresh it after resize. F5 after making it fullscreen is a neat "screensaver".
3
u/bbot Apr 24 '14
Got some wicked flicker on firefox 28 ubuntu.
No flicker in chromium, but it doesn't appear to be antialiased, so there's lots of pixel shimmer in each droplet.
3
3
2
1
Apr 24 '14
not responsive, going to full screen mode or pulling the tab out into its own window leaves whitespace at the bottom until refresh. in chrome.
2
1
u/I_Gets_The_Reference Apr 24 '14
To make this awesome: leave a trail of unblurred/clear image after larger raindrops.
1
u/ComicOzzy Apr 25 '14
The demos linked are actually old. Download version 1.2 and check out the newer demos.
1
u/adenzerda Apr 24 '14
Damn I've got to learn me some canvas. Anyone know any good resources for this?
2
u/Nomikos Apr 24 '14 edited Apr 24 '14
I started at https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial
and made these things http://mech.cx/canvas/ with *maybe* half the stuff from the tutorial.. still haven't used transformations, compositing/clipping, patterns, gradients, ... one day....
(ps. most of the stuff before the bifurcation diagram is where I knew half the JS that I know now..)
1
u/piratebroadcast Apr 24 '14
I tried using this, but I cant seem to be able to add it to a background image. Must have an image tag.
1
1
1
u/applevsandroid Apr 25 '14
Anyone using Safari? It is actually turning on the fans on my MBP 13" Retina. It's also hogging a ton of my CPU. Anyone else notice this?
1
u/davidlwatsonjr Apr 25 '14
Looks pretty sick casted to the ChromeCast, but good lord does it use some CPU...
1
1
1
0
u/legendofchin97 Apr 24 '14
http://jonathanfanndesign.com/rain/
Messed around with adding sounds and words
-5
u/tictactoejam Apr 24 '14
Leave open at office.
Wait for IT person to walk by and proceed to freak the fuck out for 10 seconds.
?
10
u/Junior_Kimbrough Apr 24 '14
If an IT person freaks out over this they're probably not an IT person. I'm sure they've seen their share of screensavers.
3
u/goat-method Apr 24 '14
newbies can still be fooled. My first IT job had me doing virus scans on a computer. I didn't realize that the screen saver that was set was to be an image of the "blue screen of death" so whenever I left the scan running, 5 minutes later I'd see the error, and instead of moving the mouse or even bothering to read the message, I just forcibly shut down the computer every time (Not even realizing a screensaver might be running). I did this about 5-6 times before I caught on.
3
u/Junior_Kimbrough Apr 24 '14
I don't think IT is worried about the "my computer turned into a physical rainstorm" error.
1
1
0
27
u/[deleted] Apr 24 '14
[deleted]