This video about metaballs (really about marching squares) blew my mind when I first saw it[0]. The author is great at walking through the reasoning process starting from scratch and incrementally building up the solution in completely logical and "obvious" steps. It's amazing what you can do when you have "simple" insights that end up being powerful when put together.

[0] https://www.youtube.com/watch?v=6oMZb3yP_H8

not to be confused with munching squares, a different xscreensaver animation

How does this handle more than 2 metaballs? It seems like the interaction between them would get really complicated to manage like this, versus a marching squares approach which handles however metaballs you've got with no issue: https://jamie-wong.com/2014/08/19/metaballs-and-marching-squ...

Drawing connectors between every pair of overlapping circles would probably work. There’s an illustration of that on the reference page they linked to: http://shspage.com/aijs/en/#metaball

EDIT: I don’t think this would be a mathematically accurate metaball though, but it looks alright. No point would be influenced by more than two balls if you just connect them pairwise, and as far as I understand, in real metaballs any number of balls can influence a single point.

It doesn’t appear to even handle the case when they separate. It’s something different.

If you liked this, you would like this talk by Freya Holmér on Bezier curves, https://www.youtube.com/watch?v=aVwxzDHniEw

It's interesting how this + also (linked in other comments) marching squares method do this all with math.. I have done this effect before in computer games with shaders and its ridiculously simple with no math. You just have a wispy circle sprite that gradually fades from 100% alpha to 0% alpha for each particle. And in pixel shader you look at the combined alpha values to decide if a pixel is solid or not.

It's one of those curves that's much easier to define implicitly than to explicitly find the border. If you don't mind testing each pixel to see if it should be "in" or "out" then you can draw a picture of it easily. But if you want an explicit function for the boundary or avoid calculating much of the pixels, you'll need something like marching squares or more math to find it.

The SVG solution here is nice in that increasing the resolution doesn't require you to do any more computation to determine where the border should be, and the border will always be exact and smooth; you even get antialiasing "for free".

Yeah totally, but if u have a pixel shader then u are running some code for every pixel anyway. I think this highlights how different code that's to run on CPU can be from code that's to run on GPU.

Now imagine each frame is a slice of a 3D scan, build the object in your mind.

Whoah. What a crazy thought. I imagine an ocean

`Metaballs, not to be confused with meatballs`

Totally clicked on this thinking it said meatballs.

I too read the HN title and the contents of two comments as meatballs and was confused. I open the article and immediately "meta" jumped out from the heading (likely the larger font made it more clear), go back to check comments and they now read metaballs. My brain then crapped itself.

My brain was too busy trying to remember a movie released in 2017 titled "Meatballs" to crap itself.

Every time I see a graphics demo involving metaballs I read it as meatballs. Every. Time.