Hacker News new | past | comments | ask | show | jobs | submit login
Making rain simulation as real as possible (rainbowhunt.me)
632 points by sazers 6 months ago | hide | past | web | favorite | 126 comments

I am a meteorologist on TV. I work in front of a chroma key wall. I would love to have a simulator like this where I could swap in the background image... well, you get the idea.

This would especially be good for me as I do the weather in Nebraska from a studio I built at home in SoCal. As far as I know I'm the only regularly scheduled TV news anchor to work from home in the US and possibly the world.

Do the people in Nebraska know you’re in California? Is that disclosed or simply not mentioned, hoping nobody catches on?

Do you have any problems with this remote setup like Sinclair has with “Centralcasting” local news from far away? (Graphics and visuals for the wrong station showing up, talent’s obvious lack of knowledge of local events and terminology, etc...)

What happens in the event of a California-centric disaster like an earthquake or wildfire, and you’re not available? Or if there’s a major weather event in Nebraska and you’re not there, or not able to feed into Nebraska because Vyvx/internet goes down or the satellite dish freezes over?

We don't mention it on-the-air, but it's not hidden. You don't want to lie about something like this (or anything, actually). When you're caught you'll pay.

It's difficult to explain but what I do is designed for me. There's a lot I do because I understand both sides of the equation which means my studio isn't a turnkey solution anyone could walk into. You need to be able to understand 'why' when something doesn't work.

That being said, IMHO Sinclair did it the wrong way. The weather unit should be an autonomous production, not dependent on the regular studio being free. My all-in studio cost is around Hyundai money. It removes complexity and allows live production where needed and closer to air always.

I had a trip from SoCal to Milwaukee cancelled because a few guys who robbed a gas station decided to drive the getaway car to Sky Harbor Airport in Phoenix -- where my first flight was headed. Random shit happens.

In three years of doing this what you describe hasn't ever happened.

We use the Internet for data. I have fiber to the wall.

Sorry but what is "Hyundai money"? Like, the cost of a Hyundai?

For anyone else wondering, a Hyundai costs anywhere between $15000 and $30000: https://www.hyundaiusa.com/build-your-hyundai/index.aspx?int...

Thanks for doing the math


Scoggs knows.

How do you handle holidays?

I work. That's common.

Sorry perhaps I was unclear. Given that you provide your own studio. What do the station do when you're absent?


Curiosity and persuit of knowledge are what drives many people. I would like to believe that HN is a place where these traits are encouraged and not looked down upon as you seem to do with your comment. If I could down vote your comment I would.

How many do you have time to answer?

Football Sunday. I'm multitasking.

WOW this is a surprise... What a small world! I used to watch you and Dr. Mel on WTNH Ch 8 many years ago when I lived in CT. I still think of you guys every time I'm back in CT and turn on the 11pm news. You are fantastic and always entertaining. I always looked forward to watching you predict whether I'd have school the next day. Thank you for the memories.

I am blushing. The people of Connecticut were very kind to me and I will be forever grateful.

The Geoff Fox? You came to my house in Durham when I was a kid and interviewed my mom for some moon landing story. I think we saved a seltzer can you drank for a few months.

It is very cool for me to hear that something I did years ago was memorable for your family. Thanks for saying hi.

That sounds really cool actually!

How did you end up building such a studio at home etc? Sounds like a lot of work to me!

(Always cool to see what kind of people hang around here on HN as well!)

I am very unusual in that I'm comfortable on both sides of the camera. What I learned is building a studio is an IT project!

Maybe the most unusual part is, none of this would work unless I could run the show by myself. My TriCaster is programmable with macros which is what I've done. I am my own director while on the air.

Oh -- with a friend I created a map making system which runs on an i5 and produces ~ 40,000 maps a day. Here are some samples I threw together a few months ago. These are 100% produced using FOSS including the map databases and fonts! https://drive.google.com/drive/folders/172O4Xl35np8RnbRi07PD...

My last computer class was as a senior in high school, 1967-68 semester. This was BEFORE computers had screens.

Wow this is super interesting, you should do an AMA!

This doesn't look like any map system I've seen - can you share details on your renderer?

There's a lot of untapped potential in geospatial (even with Google taking most of the mindshare)

Sure -- It's a multistage process making a graphics sandwich. The meteo data is done by GrADS. I render these at full HD resolution-- 1920x1080.

The base map and overlay are both produced in QGIS using the NaturalEarth database. Because GrADS can't read geographical info from graphics they are built by hand and the parameters are entered into GrADS by hand.

Animations are made from still png frames using ffmpeg.

OpenSans is my font.

All of this runs on an i5 with 8Gb of RAM under CentOS7. I make around 40,000 maps a day (one per frame in the animations).

I am 68 years old. My only computer training came 51 years ago. This is all self taught.

AMA on Reddit please?

That is really amazing! My hat off to you!

I agree with the others here that an AMA might be worth it :)

I would be thrilled to see some of the code for your map system, if you feel like open sourcing it on Github or the like. Even a verbal description of it would be great. It looks really great!

If you wrote code like mine you wouldn't want it seen. I have borrowed freely from others, especially the College of DuPage whose entire site (except satellites) is on github. Their code is well written and documented.

Not meaning to be rude, it sounds like you're going strong and providing a great service. But if you retire in future do you plan on handing down your code and setup to someone?

I haven't thought about it. I have a business in mind for the maps which would keep them in demand. More about that in my AMA I suppose.

I am very happy with my life and where we live. I really don't want develop a big business. Can I just be an artisinal meteorologist?

Heck yes you can, you do you, friend.

Who is John Galt?

Your location is embedded in the photos you shared on drive. Scarlett Irvine.

OK. I can put on coffee.

Seriously, I was on TV in Connecticut for nearly 30 years. Where I lived was common knowledge. I'd often meet someone whose friend had told them I lived in their neighborhood.

Only once did someone knock on my door just to say hello. Most people are respectful and there are dozens of other clues to where I live since I run a business there.

I appreciate your concern, really.

Just Google Geoff Fox, it's not like he's trying to be secretive.

(author) Hey, I could help with that. I was beginning to work on a better version of it a while ago, but haven't gotten around finishing it.

I made exactly what you're asking for: https://rainpaper.com

Why is it rated Mature?!

This is required for any apps that offer user-configurable reddit integration.

Fascinating. How’d you land that gig?

I've been doing this over 35 years and have seven Emmys. They got someone they shouldn't be able to afford and working from home I could afford to accept it. I'm a pancreatic cancer survivor (Whipple) and this flexibility helps.

I am a professional. My job is to forecast their weather and I am diligent in that pursuit. Windows are overrated.

In response to Lane -- Pancreatic cancer is the worst. It is incurable in 2018! I was very lucky that it was found before it spread.

It was removed in a six hour, two surgeon operation called a Whipple. It was pioneered in the 1930s. Back then they lost about 1/3 on the table. Only about 1/3 of pancreatic patients can receive a Whipple and only about a third of those have my result. Only 9% live beyond five years.

The Whipple is considered the most difficult operation a surgeon can perform. The docs who do this are hospital all-stars.

On day one I told my doctors (with cancer you get an army of doctors) I wanted to aggressively go at it.

I had a catheter port inserted in my chest for IVs (like chemo or with my CTscans). It's been used over thirty times. When I take a blood test it's commonly a dozen vials or more.

My treatment ended around a year and a half ago. I am certifiably cancer free, though my body knows how to make pancreatic cancer and could do it again.

I am missing a few internal parts. Whipple surgery reconnects some parts of the digestive system differently than original factory specs. With half a pancreas I shoot insulin 4-5 times a day (no big deal). My right pinkie will be tapped for blood drops around 1,500 times this year.

I am the luckiest person you will meet today. And, it's a kickass diet. I lost 35 pounds.

Because I am old I am on Medicare. I subscribe to a Medicare Advantage program, which means I limit myself to an HMO's doctors in return for paying less for services. I would think my medical care had to cost over $500,000. I paid ZERO. I do pay for some drugs -- thousands a year -- but my army of doctors were paid by the government.

People shouldn't go broke or need GoFundMe because they get sick. The US needs Medicare for all. Insurance just means we all share the risk for the few that need it.

The republicunts don't believe in healthcare for sick people.

We've banned this account.

The fact that we need GoFundMe campaigns for people who get sick or that veterans beg for charity through Wounded Warriors upsets me to no end. A modern, successful democracy should take care of its people.

Wounded Warriors and DAV are not about veterans begging for money. They are parasites stretching the definition of a charity to its limit to rake in as much money for the admin staff as possible (60% overhead). Please don't donate to these crooks.

Did not know this, can you share some more info to expose how they are crooks?

“Crooks” might be more than supported by this, but they do seem to have grown into a group existing for the well-being of staff as much or more than their intended recipients.


this is simply not true.

give.org provides charity information. WV spends just 4% on administrative costs... https://www.give.org/charity-reviews/national/veterans-and-m...

Now they do, as a result of significant negative media coverage from a few years ago when their administrative costs reached as much as 90% of their total donation revenue.

>* modern, successful democracy should take care of its people.*

Good thing we live in an oligarchy then, otherwise, we would be upset.

Wow, this is such a fascinating story. I'd totally subscribe to an AMA.

Glad to hear you've kicked cancer's ass.

Point me in the right direction. I'd love to do an AMA -- except I'd take questions on the site and answer via YouTube live or something similar. That way I could demo any studio questions live.

Where can I get info on doing one?

Also, sneakily, I have other ideas for where my studio can be used beside traditional outlets, especially since I make a full suite of weather maps. This would give me a chance to explain.

With your setup, Twitch or YouTube Live would work. Take the questions on Reddit or similar beforehand (with an established channel you've got other ways of taking questions, but for a new set up it's a bit trickier).

I think typically they're done on Reddit these days, but I bet you could do this kind of questions post you refer to on HN and then follow up with a link to a video or stream.

Already found a great article on 'how-to.' I will.

It's second nature to me, but most people are sort of stunned when they see a broadcast quality studio in my (former) garage.

I think that's pretty awesome myself. Closest I've been to that kind of setup is back in.. either middle or high school tech class. We had a separate indoor sound-proofed "room" used for a broadcast channel just for school. Cool stuff.

This is impressive and cool, I really would like to read more about it. You should write a blog!

https://www.geofffox.com/ -- Since July 4, 2003.

Hey, I made this for Codrops, like 2 or 3 years ago?

I mean, the rain effect itself, not the whole UI around it here.

Edit: Here's[1] the accompanying article, and here's[2] some other stuff I made (although my website is also just as old and hasn't been updated since!)



I don't know why this isn't getting more attention/comment (someone else independently posted it looked similar below with another link to your domain) but here's the one I found from your profile link for comparison http://tympanus.net/Development/RainEffect/


Thank you for finding that.

Welp. It's identical. I even tried to defend the current link with "Well, some cool things can happen when you hook up a UI to a shader..." but the UI doesn't even do anything except turn the rain off and on.

There's lightning too in that other one! That's so cool.

What’s some good reading for a basic and well-explained entry into GL and shaders. I feel like so many tuts gloss over really important stuff. I’ve never written a shader.

As an aside, I’m sorry someone stole this from you and used it unattributed.

This got me started: https://webglfundamentals.org/

You've probably come across it though, as it does seem to gloss over some basic stuff. But it does cover the basics pretty well, just gotta keep an eye for details and seemingly unimportant one-liners that turn out to be fundamental.

It also takes some googling for deeper explanation of some functions, which often result on Stack Overflow answers by the author himself.

Dealing with the WebGL API itself is a bit... let's say tricky, though. But working with shaders for me is a joy.

This also seems promising, though I only skimmed over it: https://thebookofshaders.com/

And also, look into https://shadertoy.com/. Both for using the shaders there as example and as a playground.

Unless they made the edit very recently, he is credited on the credits page.

I am credited for the "menu code" and "inspiration", though, hahah

But it doesn't matter, I posted the code for it to be used, I'm glad to see it in the wild.

Is there any description or attribution for the shader? Are the visuals an improved version of Martijn Steinrucken's "Drive Home" shader [1], or a different approach? This one does seem more dynamic with more detail, it looks pretty good, and I like how the big drops take out the small spray.

[1] shader: https://www.shadertoy.com/view/MdfBRX

video: https://www.youtube.com/watch?v=WrxZ4AZPdOQ

tutorial: https://www.youtube.com/watch?v=eKtsY7hYTPg

This is not a single shader, the animation is done with JS/canvas 2d, the shader does just the refraction.

I wrote an article about it here[1], but I made this back when I was first learning WebGL (it was my first WebGL project, in fact), so be aware that a lot of things could be better!


This is great material, thanks!

Yeah, you're right. Perhaps it's one and the same. Some of the textures downloaded here match the textures in that article.

Looks good!

On osx mpb performance is stellar in Chrome sadly, while both Safari and Firefox only delivers 2-3 fps.

Weirdly on an iPhone with Safari the performance is smooth as silk.

I would really like to ditch Chrome, but it seems i get full speed fans with Firefox on sites sporadically, and while Safari is much better it's still not on par with any kinds of heavy graphics.

I don't get it. Why can my iPhone 6 run this super smoothly while my 3000 USD mpb struggles? And why can Chrome do it while Safari can't when it should have native access to GPU api's ?

This effect uses both WebGL and canvas 2d. I'd guess that for some reason the canvas 2d isn't using hardware acceleration on those browsers?

Somebody has made a version using WebGL alone[1] (sadly they got the refraction a bit wrong), try it to see if it works well enough (and let me know, I'm curious myself).

[1] https://codepen.io/stefanweck/pen/Vbgeax

Interesting. Speed is still about 40% in Safari and 60% FF compared to Chrome with this version. Much better than the 2d-canvas version though and looks pretty fluid.

Would be pretty weird if the osx native browser didn't hardware accelerate while Chrome does it on a MPB, but Apple are often weird like that.

Looks fine for me on Firefox/Linux.

Seems to be a mac related issue, as it runs smooth on Firefox/Linux and some other comments indicate that it also can run on android[1].

Anyone tried it on Firefox + Windows?

[1]: can't verify this as I only have a slowich some years old android phone, on which it runs fluidish but miss renders the effect of the large rain drops...

Thanks much -- I was watching this in Firefox on MBP and didn't realize how cool this was until seeing it again in Chrome.

Runs fine in Firefox for me, nice and smooth. Seems to use ~30% CPU on all four cores but the GPU fans don't spin up audibly. Windows 8.1 / Core i5-4590.

Firefox Android, it looks good. Sony Xperia Compact from 2016, don't remember the model.

Firefox on Mac... runs perfect.

The physics look pretty good, except for the few frames where a drop impacts the "window". They look too weirdly instanteous, and way too elastic for water on glass.

Looks great.

I was confused at first because I thought the sliders were parameters of the simulation and I wasn't hearing anything.

I came thinking that it was a visual rain simulator. Then I saw a very nice visual display, but the sliders didn't do anything. Then I realized that it is an audio simulator with different audio parameters for the various aspects of the rain soundscape. I'd love sliders for the visual display too. Very nice. Very very nice. Bookmarked.

You can control the number of drops in the animation by clicking on the hamburger menu in the top-right.

Thanks! Didn't find that.

Am I missing something? I expected a technical description of how to do this, but instead I just see a simulation with no further explanation or links to it.

This is scarily close to realistic... for a second I got worried because my intuitive brain was telling me my laptop screen was all wet!

Curious if this is the best done in WebGL to date, or if there's even better out there? Or what this does and doesn't do, and where next obvious areas for improvement would be?

(Author here) Thanks! I was making a version with a better "impact" effect and better "trails", which are the weakest parts currently in my opinion, as well as making the larger raindrops sharper—they get a bit blurry right now. I haven't had the time/will to finish it though!

>which are the weakest parts currently in my opinion, as well as making the larger raindrops sharper

I actually came here to comment on the blur on the edges of the large drops. My guess was it was a fast way to give a passable result for the more complicated refractions occurring at the edge of the drop. Is there a link at which I can follow your work? Thanks!

It actually did not have anything to do with being resource intensive or such, it had to do with looks—with the raindrops sharp I had to get the parameters of the refraction perfectly right, it seemed, for it to look convincing, otherwise it looked extremely artificial and kind of "flat".

By that point I had already spent more time on this than I'd have liked, and allowing for a little blur was an easier way for it to look good enough.

I haven't been doing any "public" work lately, but I'll post anything I make on my Twitter[1], especially if I ever get to finish this updated version.


If you ever get a chance, I'd love to read a "making of" blog post -- how you started, what approaches worked/didn't, what you're measuring success against, and remaining challenges... Think it would be super-educational and fascinating!

It's been a while since I made this, but it's a good suggestion! Rest assured that there was hardly any method to it though, mostly hair-pulling when things did not look quite good! (which is, for me at least, the biggest pain in working with this kind of thing)

But there are some neat tricks which, while not necessarily transferable themselves, might serve as inspiration for other problems.

Agreed. Passes the Turing test for rain, if there is such a concept.

Pretty realistic save for one nit-picky detail. The refraction of background scenery into the larger raindrops doesn't change from the top of the window to where the drop falls off at the bottom. Yes, I know that would take an insane amount of computation for every drop but it would be cool.

I worked on a similar effect in a mobile VR game. Blade Runner: Revelations on Daydream.

This vfx is actually pretty simple but quite satisfying. Having the drops refract based on look angle is what really pushes it over the edge.

This is very cool but where is the context, where is the how this was made?

The realism is so-so. Big raindrops do not accumulate smaller ones well enough when touching. And there is no splash.

I use this effect in my Android live wallpaper app, Rainpaper. It supports weather synchronization, reddit integration, custom backgrounds (including video), and muzei extensions.

You can see the app at https://rainpaper.com

Nice, I wondered if someone had done this. One request I have for the app would be the ability to select a local folder and have the app cycle though all the pictures in it. Being able to change the picture more often (like every 10 minutes) would be great too.

Awesome app overall though!

I would pay money for this as an Android Live Wallpaper, especially if you could choose your own image to go behind the rain!

You might really enjoy Rainpaper then. It lets you choose a background or download popular images from Reddit. But my favorite feature is the integration with Dark Sky so the rain and intensity is activated when it really is raining.


Attention about high CPU usage on smartphones

Probably a pre-rendered video would do better.

Since seeking is not required, it could do away with keyframes entirely.

For sure, even a good .gif file

I'm interested - what difference does keyframes vs no keyframes make?

in the credits u should put the link of Lucas as the first one, since this is basically a rip of from the Codrops demo. (like most if not all the things u post)

This could probably be solved at the GPU

Nobody wants to have their back- and forward keys "hijacked" to undo/redo their changes in rain-sounds...

This is visually amazing. If only we could get the sound simulation to the same level but with different elements.. eg. Tin Roof / Tent / Weatherboard / Muffled Indoor / Downpipes etc. I've searched for years to find something realistic, and the closest I've been able to find was Naturescape.. but those are real seamless loop recordings.

Be cool if you could pay to view this without a background so you could overlay it on videos, livestreams, etc.

Reminds me a lot of boodler (<http://boodler.org/>) but with visual component. I wish generative audio landscapes were a more popular thing to construct in general. Thanks heaps for sharing!

Is this just an audio simulation? The sliders don't seem to change the graphics very much. :(

I've read before that they used to use the sound of bacon cooking on a skillet to mimic the sound of rain in movies. I think I can hear it...

Very smooth on iPhone 7 Safari. Only thing odd is that the larger drops are faceted like cut glass.

Is the thunder being generated? That's the most interesting part IMHO.

Are all of the sounds being generated? They sound like recordings, but I didn't wait long enough to check for a loop.

Looks like it's a few MP3s being mixed together, each quite long. e.g. splashing-rainfall160.mp3

Ah, yeah it sounds like that, thanks for checking. I suspected they were recordings because adding the window effects also adds unwanted non-window background effects. I'd have guessed a generator would keep each effect as distinct as possible from the others.

pretty great.

Something about the distribution of the droplets and the movement doesn't seem "random" enough. it seems pretty "regular" for lack of a better word.

The drops themselves look amazing.

Where's the code for this? Anything open source?

For audio at least, it uses a bunch of recordings (as mp3) and combines them in different ways.

Example (it's using an IP for some reason):

Not sure what the license is for the sound, so can't say whether it's free or not.

For playback it's using jplayer, which is open source: http://jplayer.org (I'm surprised their site doesn't list support for Opus).

Rain in movies is the opposite: it doesn't hit the camera viewport, but makes the street wet.

I'm wondering which would be more interesting to watch. Perhaps a combination of the two.

WebGL is pretty amazing.

One problem with simulation is that it's super resource intensive, particularly more than a video. It turns my laptop's fans on quickly which then fights for my attention with the relaxing audio and makes me acutely aware that I'm killing my battery and putting unnecessary load on my computer.

Maybe a better middleground is to use an animation with transparency that you can instead overlay any background, like a looping gif.

This has not been done in the most optimal way—it could do with a lot less JS being used. A version with (mostly) WebGL could be much less resource hungry.

Try this version for comparison: https://codepen.io/stefanweck/pen/Vbgeax

i think this site would be much better than that https://mynoise.net/NoiseMachine/campingRainNoiseGenerator.p...

The UI/UX on this is pretty awful.

It seems like when you change the settings, it can take 15 or more seconds to take effect.

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact