Metaballs
Creative
generative graphics demo
SHOW HN2017
How HN took it
9 positive, 16 neutral or asking, 0 mixed, 9 critical, out of 34 comments about the project. Thread score +0.05.
Idea: 5 for, 2 againstPerformance: 1 for, 3 againstExecution: 0 for, 3 againstDesign: 2 for, 0 againstDocs: 0 for, 1 against
The thread, comment by comment
Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.
positive neutral or mixed critical about another commenter or something else the maker
What HN said
What people liked
Visually satisfying and cool to watch
From 2 comments
That is weirdly satisfying to watch...
fergyfresh on HNThat bubble slider is super cute. https://codepen.io/chrisgannon/pen/GZNgLw
bpicolo on HN
Objections
Approximation is far from real metaballs; the bigger disc does not change size
From 1 comment
Much better. There's definitely many improvements that could be done, but that was the main one. The other big one is how the bigger disc doesn't change size. The approximation…
ehsankia on HN
Math could be optimized by avoiding trigonometry
From 1 comment
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…
Const-me on HN
Requests
Extend beyond two balls
From 2 comments
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…
shove on HNFrom 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…
slavik81 on HN
Questions
Can this extend to 3D?
From 1 comment
Could this extend to 3D?
Osmium on HN
Alternatives named
CSS blur and contrast filter metaballs
From 2 comments
References https://codepen.io/keithclark/pen/sEbFz which does metaballs using pure CSS (using a combination of a contrast filter with a blur filter). Beautiful article.
robocat on HNthe same effect (albeit with less crisp edges) can also be achieved by abusing the blur filter in CSS -- with no need for JavaScript or SVG at all.…
woodrowbarlow on HN
Jamie Wong's marching squares article
From 1 comment
An alternative method (with potentially different applications) that I found interesting. The visual aids in both articles are very good.…
christotty on HN
Three.js marching cubes demo
From 1 comment
Yes, there's a Three.js demo: https://threejs.org/examples/#webgl_marchingcubes
kowdermeister on HN