将可调整大小的圆圈放在彼此附近

Question

我正在进行这个基于浏览器的实验,我给出了N个特定的圆圈(假设它们中有一个独特的图片),需要将它们放在一起,尽可能留下它们之间的空间.它不必排成一个圆圈,但它们应该"聚集"在一起.

圆圈尺寸可自定义,用户可以通过拖动javascript滑块更改尺寸,更改某些圆圈的尺寸(例如,在滑块的10%中,圆圈4的半径为20px,圆圈为2 10px,圆圈5保持不变等...).正如您可能已经猜到的那样,我将尝试在移动滑块时平滑地"转换"调整大小 - 重新定位.

到目前为止我尝试过的方法:不是手动尝试定位它们,而是尝试使用物理引擎 -

想法:

1. 在屏幕中央放置一些引力
2. 使用物理引擎来处理球碰撞
3. 在"拖动时间"滑块事件期间,我只需设置不同的球尺寸,让发动机负责其余部分

对于这个任务,我使用了"box2Dweb".我把一个引力拉到了屏幕的中心,然而,它花了很长时间才将球放在中心并且它们漂浮在周围.然后我在中间放了一小块静态球,这样他们就可以击中它然后停下来.它看起来像这样:

结果有点好,但是圈子在静止之前仍然移动了一段时间.即使在玩了诸如球摩擦和不同的引力之类的变量之后,整个事物只是漂浮在周围并且感觉非常"摇摆不定",而我希望球只在我拖动时间滑块(当它们改变尺寸时)移动.另外,box2d不允许更改对象的大小,我将不得不破解我的方法来解决方法.

因此,box2d方法让我意识到,留下一个物理引擎来处理这个问题并不是最好的解决方案.或许我必须包括一些我没有想到的其他力量.我在StackOverflow上发现了类似的问题.然而,非常重要的区别在于它只是"同时"生成一些非特定的圆圈,并且不允许额外的特定球尺寸和位置操纵.

我现在真的被困住了,有没有人有任何想法如何处理这个问题？

更新:已经差不多一年了,我完全忘了这个帖子.我最终做的是坚持物理模型并在几乎空闲的条件下重置力/停止.结果可以在http://stateofwealth.net/看到 你看到的三角形在这些圆圈内.其余的行通过"delaunay三角剖分算法"连接

Answer 1

我记得看过一个与你所描述的非常类似的d3.js演示.它由Mike Bostock自己撰写:http://bl.ocks.org/mbostock/1747543

它使用四叉树进行快速碰撞检测,并使用基于力的图形,它们都是d3.js实用程序.

在该tick函数中,您应该能够添加一个.attr("r", function(d) { return d.radius; })更新nodes数据时每个tick的半径.对于初学者来说,你可以将其设置为随机返回,并且圆圈应该像疯了一样抖动.

Answer 2

（不发表评论，因为不适合）

令我印象深刻的是，您引入了 Box2D 来帮助完成繁重的工作，但不幸的是，它可能不太适合您的要求，因为当您模拟刚性物体及其对象时，Box2D 才能发挥最佳作用。碰撞动力学。

我认为，如果您真正考虑您需要什么，那么它根本就不是一个刚体动力学问题。实际上，您不需要 box2d 的复杂性，因为您的所有几何体都由球体组成（我向您保证，建模比任意凸多边形要简单得多，这就是 IMO Box2D 复杂性的来源），并且正如您提到的，Box2D 无法平滑地改变几何参数并没有帮助，因为它会因为不必要的几何分配和释放而使浏览器陷入困境，并且无法应用任何类型的平滑动画。

您可能正在寻找一种算法或方法来演化一组坐标的位置（每个坐标的半径也可能发生变化），以便它们保持半径分开，并最小化它们到中心位置的距离。如果这必须是平滑的，那么您不能每次都应用最小解决方案，因为您可能会“扭曲”，因为最佳配置可能会在滑块移动的特定点处发生巨大变化。可以说，您需要做很多调整，但没有什么比 Box2D 内部必须应对的更可怕的了。

你们的圈子不重叠有多重要？我认为你应该做一个简单的迭代“解算器”，首先尝试将圆圈带向目标（屏幕中心？），然后尝试根据半径将它们分开。

我相信，如果你尝试为你想要的运动提出一个简化的数学模型，这会比尝试让 Box2D 来做更好。Box2D 很神奇，但它只擅长它擅长的领域。