Feels more organic to me if the original metaball gets smaller as the other one moves out (like its stealing material). Haven't worked out the correct math but a quick PoC is here:
Reminds me of this demo from years ago: https://tympanus.net/Development/CreativeGooeyEffects/menu.h...
Article for more detail: https://tympanus.net/codrops/2015/03/10/creative-gooey-effec...
Interesting approach! Coincidentally, I published an article [0] on this very topic last month. It uses sampling, so it's close to the approach mentioned in the Jamie Wong article you (and I) linked to, but with a path-tracing step capable of producing an SVG path definition. I'd be interested to see how the performance of these two methods stack up to each other for a given quality level.
In https://codepen.io/winkerVSbecks/pen/NazWxg, there's a "hitch" as the discs touch due to a first-derivative discontinuity. Here's a version which extrapolates the u1 and u2 variables, making the transition much smoother: https://codepen.io/panic_/pen/BwvjmK.
That bubble slider is super cute. https://codepen.io/chrisgannon/pen/GZNgLw
Good to see you on the front page, Varun. :- )
It's possible to do this somewhat efficiently beyond two balls with GLSL and lots of uniforms (or a UBO), since metaballs from the graphics perspective are really just distance fields.
If you want more than a few balls, you can do it in two passes: one to produce the distance field, and one to threshold it.
As an added benefit, it's straightforward to generalize these approaches to any two-dimensional continuous function.
For everyone complaining about the lack of meatballs… here are some: https://codepen.io/winkerVSbecks/full/oGJLwo/
The math can be optimized by at least an order of magnitude.
Trigonometry functions are expensive, especially the reverse ones.
If v=0.5, see [1] for how to find out sine/cosine of a maxSpread * v. For angleBetweenCenters + maxSpread * v, see [2] for how to find sine + cosine of a sum of angles.
If you’ll do all that math in the symbolic form (you can use Maple or Mathematica or something similar), you’ll get the equivalent formulae for p1-p4 that won’t use any trigonometry, only simple math and probably a square root.
[1] https://en.wikipedia.org/wiki/List_of_trigonometric_identiti... [2] https://en.wikipedia.org/wiki/List_of_trigonometric_identiti...
> Metaballs, not to be confused with meatballs
I once reviewed an academic paper at a major CS conference that misspelled metaballs as meatballs throughout.
I just started learning GLSL shaders. As practice, I wrote a psuedo-metaball joystick. I didn't know about metaballs, but now that I do I can do some more research and improve my next iteration.
Touch blob joystick shader: https://www.shadertoy.com/view/4lfcRf
https://www.youtube.com/watch?v=L_lD7iqG8nA
About 2 minutes in there's an excellent realtime metaballs implementation that ran smoothly on a 486-66mhz. Metaballs were an extremely popular effect in the early 90's.
Paper.js is truly a great source of vector drawing tricks. Curious how difficult it would be to extend this technique beyond two circles. Might have to dust off some old experiments ... :)
Oh no... I shook it a bunch and it broke apart ;_;
Metaballs are always nice, but I think this page (that was linked in the article) that shows compass&straight-edge constructions to be especially nifty:
During or just before WW2, Roy Liming developed analytic techniques for calculating a similar class of blend or fillet. They were taken up in aircraft design, a field that I can't imagine ever using implicit surfaces! I think it was Edgar Schmued's design for the P-51 Mustang that famously used Liming's work.
Liming wrote a book, but it's rare. Some technical discussion towards the end of this page: http://homepages.inf.ed.ac.uk/rbf/CVonline/LOCAL_COPIES/BOWY...
Was this the technique used in World of Goo?
This actually refreshes my memory. I had to implement some metaballs myself some years back for a fluid simulation.
I had to struggle with metaball rendering on canvas back then. It was so slow. Now I guess a pixel shader in webGL can do a better job.
Check this out too: https://asadmemon.com/SPHjs/ source: https://github.com/asadm/SPHjs
An alternative method (with potentially different applications) that I found interesting. The visual aids in both articles are very good.
http://jamie-wong.com/2014/08/19/metaballs-and-marching-squa...
We've use the blur+contrast approach successfully in EventDrops [1], a time series visualisation based on d3.js. It all happens client-side, with OK performance. Not sure the SVG approach brings more in this case.
Andrew Glassner published a paper on something extremely similar back in 2015:
"Globs: A Primitive Shape for Graceful Blends Between Circles"
This is pretty awesome.
I wonder how much would need to be adjusted to provide a scaling factor to the first metaball such that the area was constant (Thus ending up with two equally sized metaballs) or even utilizing the speed of the pull in determining the second balls size.
This is cool. Just watched a related talk from Casey Muratori about this yesterday: https://www.youtube.com/watch?v=SDS5gLSiLg0
What's the practical, commercial use for something like this? It looks like it must take a lot of time and effort to get this right.
Or is this university stuff? Or even spare time stuff?
I clicked through this hoping that someone had done a 'Show HN' for a literal plate of meatballs.
I keep seeing Metaballs as Meatballs.
I am from Sweden and read "meatballs" when I clicked. Just imagine my disappointment.
Cool stuff though.
there is a popular vvvv shader that implements metballs, see https://vvvv.org/blog/debug2-2
Could this extend to 3D?
Surprised I've never seen metaballs before. Very cool.
I prefer Regular Ordinary Swedish Metaballs™
That's one spacey metaball! (sorry...)
>CodePen requires a referrer to render this. Your browser isn't sending one.
Interesting.
I would love to incorporate this in some of the UI design work we do for startups. Are there more similar libraries available? We could reference it to our network of clients (mostly developer driven startups) to help translate some of the design ideas we propose. If you know of other similar projects like Metaballs, please do share below or ping me (details in my bio)
Neat... I guess. But barely 90's level tech. The balls can't rejoin?...
I was disappointed that this was not about meatballs, for I am hungry.
From the grandparent article:
> Well, for 40 bouncing circles, on a 700x500 grid, that would be on the order of 14 million operations. If we want to have a nice smooth 60fps animation, that would be 840 million operations per second. JavaScript engines may be fast nowadays, but not that fast.
The math is super-cool, and efficiency is important for finding isosurfaces in higher dimensions, but those aren't really scary numbers for normal programs. Just tinting the screen at 2880x1800 is ~2 million operations per frame. GPUs can handle it.
A simple way to render is to draw a quad for the metaball, using the metaball kernel function in the fragment shader. Use additive blending while rendering to a texture for the first pass, then render the texture to screen with thresholding for the second pass. The end result is per-pixel sampling of the isosurface.
Admittedly, it's kind of a brute-force solution, but even the integrated GPU on my laptop can render thousands of metaballs like that at HiDPI resolutions.
(Specifically, I use a Gaussian kernel for my metaballs. It requires exp, which is more expensive computationally than a few multiplies. I render 1500 of them at 2880x1671 at 5ms per frame on an Intel Iris Pro [Haswell].)
Though, the work scales with fragment count, so a few large metaballs may be as costly many smaller ones. For large numbers of metaballs, you probably also want to use instancing so you'd need OpenGL ES 3.0 / WebGL 2.0 which are fairly recent.
But 40 metaballs with a simple kernel at 700x500? That's easy for a GPU.