Not long ago, we had a lot of rain. On the one hand I found the rainy weather miserable, on the other hand I found it quite romantic. I wanted to create a weather app that depicted both emotions while still being practical and delivering the current weather. Thus was born the rainy-weather one page app. No matter what the real weather is like (and this app does deliver it!), visually it will always be rainy weather here to keep that miserable/romantic rainy weather feeling going. For those that feel the same way, you know what I am talking about!

The image is one I took some years ago right before a big storm in New York City, and I was walking up the East River Drive towards home from the tip of the Island, specifically the Brooklyn Bridge. I don't know why I chose this particular image for the app, but it spoke to me, so I went with it.

How did I get those raindrops going? I'm using the rainyday.js library that "makes the use of the HTML5 canvas to render an animation of raindrops falling on a glass surface." In my case, I did occasionally experience rain falling on my lens, and this library emulates my experience that day. I didn't necessarily capture those moments then, but this library recreates it for me beautifully.

To check it out on Github, please visit https://github.com/maroslaw/rainyday.js.

As for the weather info I am gathering here, it's the result of a combination of AJAX and the Open Weather Map API. To learn more about the Open Weather Map, please visit http://openweathermap.org/api.

To view this here on Github, please visit http://interglobalmedia.github.io/rainy-weather/.

Share this project:

Updates