javascript - 如何实现二维圆之间的斥力 (paperjs)

标签 javascript collision-detection paperjs

我正在制作一个 paperjs 应用程序,其中有圆圈,每个圆圈都可以自由移动。一些圆通过线相互连接,这会导致圆彼此更靠近——即,线模拟圆之间的松紧带。然而,圆圈不允许重叠,所以我想进行某种碰撞排斥。目前我已将其实现为圆之间的排斥力。对于每个圆,我检查所有其他圆的位置,并且每个圆的速度矢量在与靠近它的圆相反的方向上增加,与它与该圆的接近程度成正比。所以实际上类似于 velocityvector += -(vectorFromThereToHere/10)

然而,这会产生这样的效果:在相连的圆之间的吸引力和所有圆之间的排斥力之间,最终会出现持续的来回抖动。

那么,在圆之间实现某种排斥的最佳方法是什么,这种排斥不会引起任何颤动,而只是让圆的边缘相互接触,同时又不会靠得更近呢?实际上,我希望这些圆圈只是相互碰撞,不允许它们相互滑动,但允许它们沿着彼此的外边缘无摩擦地滑动,以到达其动量所携带的位置。

最佳答案

您可以实现 inelastic collision ,然后是定位步骤。这个想法是沿着冲击的法线方向对物体施加冲量。

// vx: velocity vector of object x
// ux: velocity vector of object x after impact
// mx: mass of the object x (1 if all objects are the same size)
// n: normal of impact (i.e.: p1-p2 in the case of circles)
// I: the coefficient of the impulse

// Equation of an inelastic collision
u1 * n = u2 * n
// Equations of the velocities after the impact
u1 = v1 + I * n / m1
u2 = v2 - I * n / m2

// solved for I:
I = (v1 - v2) * n / ((n*n)*(1/m1 + 1/m2))

当您有I时,您只需应用速度更改即可。您不妨在施加脉冲之前检查I > 0,以防止形状粘在一起。让我们看看它是如何工作的,如果在所有这些之后球开始缓慢重叠,则添加位置迭代。

PS:您也可以在一个时间范围内重复整个碰撞步骤,以便在对象参与多次碰撞时获得更好的结果(因为它们粘在一起形成一个大球)

关于javascript - 如何实现二维圆之间的斥力 (paperjs),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34583710/

相关文章:

ios - Sprite Kit 碰撞检测

java - 检测和组合重叠/碰撞圆的算法

Javascript 日期时间休息两小时

javascript - 句子大小写一段文本,同时忽略其中的 html 元素

java - 如何在java中进行碰撞检测?

javascript - 使用 Tween.js 使用 Paper.js 缩放栅格

javascript - 使用 PaperJs 绘制线条动画

javascript - Paper.js 在 Angular 上再添加 2 个点以增加高度

javascript - 如何将组件钩子(Hook)与 Formik handleSubmit 一起使用?

javascript - 如何在json2html库中使用li标签