5 ms·

Relax your coding self with the soothing JavaScript simulation of rain

60 points by newcoders 6y ago

LandR 6y ago
Why does it scroll the page when I move my mouse barely an inch? I literally can't get the mouse over the volume sliders as it keeps scrolling the whole page up and down.
- iforgotpassword 6y ago
  The same thing happened to me on mobile. Kept scrolling down again a couple times until I tried scrolling up again really quickly. But it isn't designed for mobile anyways I guess, all the sliders were cropped off at the right.
etripe 6y ago
Great idea! I'm somewhat confused as to what the different left-hand buttons do, though. They don't seem to make a (immediate?) difference.
- newcoders 6y ago
  Sounds of storm, rain, thunder...
- alikim 6y ago
  Yeah, the effects seem to be decently delayed for me as well.
- SamBam 6y ago
  I believe it's just volume for different sounds.
verytrivial 6y ago
I can personally endorse https://mynoise.net/NoiseMachines/campingRainNoiseGenerator.php https://mynoise.net/NoiseMachines/campingRainNoiseGenerator.... and the various presets for that shown on the right. The sliders are for different noises samples that are generally focused at that part of the sound spectrum and there are modes that will drift them up and down to keep things gently interesting.
- humanlion87 6y ago
  Second this. I love the various options https://mynoise.net https://mynoise.net provides. I have been using their coffee shop noise simulation lately since it's been forever (6 months) since I have gone to one and worked.
Eek 6y ago
Tried to use it but for some reason it randomly scroll me up and down when I move the mouse which is extremely annoying lol
nurettin 6y ago
How do you relax with all this noise? Made me uneasy.
- nefitty 6y ago
  Funny, this sort of ambient noise is the only thing that turns my brain off and allows me to sleep at night.
chillfox 6y ago
I really like the rain/thunder sounds, and the the drops on the window is pretty cool. The background image is a bit too blurred and weird stuff happens when resizing the window to something that will fit in the corner of the screen. It would be nice if there were a few different pictures to pick from.
- fbelzile 6y ago
  The first rain soundtrack seems very similar to RainyMood: https://rainymood.com/ https://rainymood.com/
vsareto 6y ago
Now we just need a Javascript Lo-Fi girl
- 082349872349872 6y ago
  We've come a long way from https://man.openbsd.org/rain.6 https://man.openbsd.org/rain.6 Not javascript, but 2020: https://i.imgur.com/iJWdurf_d.png?maxwidth=520&shape=thumb&fidelity=high https://i.imgur.com/iJWdurf_d.png?maxwidth=520&shape=thumb&f...
  - _Microft 6y ago
    I recognized the image on screen on the second picture ("2020"). It's this one: https://thesustainableinvestor.files.wordpress.com/2016/02/shareholder-value.jpg https://thesustainableinvestor.files.wordpress.com/2016/02/s... Edit: it's even readable on a large(r) version of the "2020"-image: https://i.imgur.com/iJWdurf.png https://i.imgur.com/iJWdurf.png I like the 2020 image a lot by the way. The combination of lots of plants and green with cables, headphones, mask and laptop gives off solarpunk vibes in my opinion. (The forest fire backdrop would spoil it if it weren't in such a nice contrast with the rest of the image). Edit 2: I can haz more solarpunk? Sure, check this out. It exists. It's real: https://www.architecturaldigest.in/content/singapore-changi-airport-worlds-tallest-indoor-waterfall-safdie-architects/ https://www.architecturaldigest.in/content/singapore-changi-...
    - 082349872349872 6y ago
      Wow, not only real, but even at the bottom of a gravity well. My bad on not thinking to trim the URI. If that's solarpunk, was this amberpunk? https://assets.newatlas.com/dims4/default/0020982/2147483647/strip/true/crop/1453x1080+0+0/resize/1292x960!/quality/90/?url=http%3A%2F%2Fnewatlas-brightspot.s3.amazonaws.com%2Farchive%2F1970s-nasa-space-art-3.jpg https://assets.newatlas.com/dims4/default/0020982/2147483647...
deleted 6y ago
[deleted]
adelarsq 6y ago
I really like this! So I did create a command to open this on my Vim: command! Rain :OpenBrowser https://itsrainingday.netlify.app https://itsrainingday.netlify.app Depends on https://github.com/tyru/open-browser.vim https://github.com/tyru/open-browser.vim
vicnicius 6y ago
Reminded me of this article on rain water effects: https://tympanus.net/codrops/2015/11/04/rain-water-effect-experiments/ https://tympanus.net/codrops/2015/11/04/rain-water-effect-ex...
- wiz21c 6y ago
  Graphically much much better
_Microft 6y ago
I enjoy café sounds (cutlery on dishes, people voices but not understandable) with jazz for relaxing. I usually just play the different audio simultaneously (Youtube, Soundcloud, ...).
merricksb 6y ago
Seems similar to this, which was posted here about 6 weeks ago: https://news.ycombinator.com/item?id=23985825 https://news.ycombinator.com/item?id=23985825 The linked site for this submission is branded/copyrighted Pluvior. The previous submission linked to the domain https://pluvoir.netlify.app https://pluvoir.netlify.app (though this now redirects to a dedicated domain - rainbowhunt.com). The credits on the two sites look very similar: https://rainbowhunt.com/credits.html https://rainbowhunt.com/credits.html https://itsrainingday.netlify.app/credits.html https://itsrainingday.netlify.app/credits.html On the previous submission, the author of the rain effect showed up to comment about their work: https://news.ycombinator.com/item?id=23987120 https://news.ycombinator.com/item?id=23987120 The only real difference with this submission is that it uses a different library for the rain effect; this one uses rainyday.js by Marek Brodziak instead - https://modernweb.com/creating-a-realistic-rain-effect-with-canvas-and-javascript/ https://modernweb.com/creating-a-realistic-rain-effect-with-.... I don't think there's enough new/original work here to count as a new Show HN.

60 points by newcoders 6y ago

Why does it scroll the page when I move my mouse barely an inch? I literally can't get the mouse over the volume sliders as it keeps scrolling the whole page up and down.

iforgotpassword 6y ago
The same thing happened to me on mobile. Kept scrolling down again a couple times until I tried scrolling up again really quickly. But it isn't designed for mobile anyways I guess, all the sliders were cropped off at the right.

etripe 6y ago

Great idea! I'm somewhat confused as to what the different left-hand buttons do, though. They don't seem to make a (immediate?) difference.

newcoders 6y ago
Sounds of storm, rain, thunder...
alikim 6y ago
Yeah, the effects seem to be decently delayed for me as well.
SamBam 6y ago
I believe it's just volume for different sounds.

verytrivial 6y ago

I can personally endorse https://mynoise.net/NoiseMachines/campingRainNoiseGenerator.php https://mynoise.net/NoiseMachines/campingRainNoiseGenerator.... and the various presets for that shown on the right. The sliders are for different noises samples that are generally focused at that part of the sound spectrum and there are modes that will drift them up and down to keep things gently interesting.

humanlion87 6y ago
Second this. I love the various options https://mynoise.net https://mynoise.net provides. I have been using their coffee shop noise simulation lately since it's been forever (6 months) since I have gone to one and worked.

Eek 6y ago

Tried to use it but for some reason it randomly scroll me up and down when I move the mouse which is extremely annoying lol

nurettin 6y ago

How do you relax with all this noise? Made me uneasy.

nefitty 6y ago
Funny, this sort of ambient noise is the only thing that turns my brain off and allows me to sleep at night.

chillfox 6y ago

I really like the rain/thunder sounds, and the the drops on the window is pretty cool. The background image is a bit too blurred and weird stuff happens when resizing the window to something that will fit in the corner of the screen. It would be nice if there were a few different pictures to pick from.

fbelzile 6y ago
The first rain soundtrack seems very similar to RainyMood: https://rainymood.com/ https://rainymood.com/

vsareto 6y ago

Now we just need a Javascript Lo-Fi girl

082349872349872 6y ago
We've come a long way from https://man.openbsd.org/rain.6 https://man.openbsd.org/rain.6 Not javascript, but 2020: https://i.imgur.com/iJWdurf_d.png?maxwidth=520&shape=thumb&fidelity=high https://i.imgur.com/iJWdurf_d.png?maxwidth=520&shape=thumb&f...
- _Microft 6y ago
  I recognized the image on screen on the second picture ("2020"). It's this one: https://thesustainableinvestor.files.wordpress.com/2016/02/shareholder-value.jpg https://thesustainableinvestor.files.wordpress.com/2016/02/s... Edit: it's even readable on a large(r) version of the "2020"-image: https://i.imgur.com/iJWdurf.png https://i.imgur.com/iJWdurf.png I like the 2020 image a lot by the way. The combination of lots of plants and green with cables, headphones, mask and laptop gives off solarpunk vibes in my opinion. (The forest fire backdrop would spoil it if it weren't in such a nice contrast with the rest of the image). Edit 2: I can haz more solarpunk? Sure, check this out. It exists. It's real: https://www.architecturaldigest.in/content/singapore-changi-airport-worlds-tallest-indoor-waterfall-safdie-architects/ https://www.architecturaldigest.in/content/singapore-changi-...
  - 082349872349872 6y ago
    Wow, not only real, but even at the bottom of a gravity well. My bad on not thinking to trim the URI. If that's solarpunk, was this amberpunk? https://assets.newatlas.com/dims4/default/0020982/2147483647/strip/true/crop/1453x1080+0+0/resize/1292x960!/quality/90/?url=http%3A%2F%2Fnewatlas-brightspot.s3.amazonaws.com%2Farchive%2F1970s-nasa-space-art-3.jpg https://assets.newatlas.com/dims4/default/0020982/2147483647...

deleted 6y ago

[deleted]

adelarsq 6y ago

I really like this! So I did create a command to open this on my Vim: command! Rain :OpenBrowser https://itsrainingday.netlify.app https://itsrainingday.netlify.app Depends on https://github.com/tyru/open-browser.vim https://github.com/tyru/open-browser.vim

vicnicius 6y ago

Reminded me of this article on rain water effects: https://tympanus.net/codrops/2015/11/04/rain-water-effect-experiments/ https://tympanus.net/codrops/2015/11/04/rain-water-effect-ex...

wiz21c 6y ago
Graphically much much better

_Microft 6y ago

I enjoy café sounds (cutlery on dishes, people voices but not understandable) with jazz for relaxing. I usually just play the different audio simultaneously (Youtube, Soundcloud, ...).

merricksb 6y ago

Seems similar to this, which was posted here about 6 weeks ago: https://news.ycombinator.com/item?id=23985825 https://news.ycombinator.com/item?id=23985825 The linked site for this submission is branded/copyrighted Pluvior. The previous submission linked to the domain https://pluvoir.netlify.app https://pluvoir.netlify.app (though this now redirects to a dedicated domain - rainbowhunt.com). The credits on the two sites look very similar: https://rainbowhunt.com/credits.html https://rainbowhunt.com/credits.html https://itsrainingday.netlify.app/credits.html https://itsrainingday.netlify.app/credits.html On the previous submission, the author of the rain effect showed up to comment about their work: https://news.ycombinator.com/item?id=23987120 https://news.ycombinator.com/item?id=23987120 The only real difference with this submission is that it uses a different library for the rain effect; this one uses rainyday.js by Marek Brodziak instead - https://modernweb.com/creating-a-realistic-rain-effect-with-canvas-and-javascript/ https://modernweb.com/creating-a-realistic-rain-effect-with-.... I don't think there's enough new/original work here to count as a new Show HN.