绳子模拟html5

时间:2012-10-31 22:41:39

标签: javascript jquery html5 canvas

我正在尝试在网站上模拟物理上正确的绳索。

搜索网络后,我的结论是我需要一个像box2d这样的物理引擎?

如果我理解正确,解决方案是将一个对象分成小段然后加入并将这些对象组合在一起。另外,我想将物理学与浏览器结合起来。这意味着:当我快速滚动网站时,绳索必须以物理上正确的方式作出反应。

这可能吗?

1 个答案:

答案 0 :(得分:16)

您根本不需要图书馆。 您可以愉快地使用对象,组件或程序代码,以及对基本机械物理和一些2D几何(基本微积分可能有帮助)的理解。

以优化的方式进行这项工作需要更多的工作。 以模块化和可重复使用的方式进行这项工作需要一些前期工程。

但制作一根绳子,使绳子表现正常是非常简单的。

2D绳索将是一系列线段或“骨骼”。 每根骨头都可以绕着关节弯曲。

您可以对每根骨骼施加重力或任何其他力量 每个骨骼都有约束(它附着的其他骨骼,上方和下方) 因此,当您更新“绳索”时,您将根据之前和之后的约束更新每个骨骼 您可以创建一个锚点 - 将绳索的顶部固定到墙上,这样无论其他骨骼如何移动,最顶部的骨骼将围绕其顶部关节旋转,但不会移动到任何地方。

要将物理学应用于悬挂绳索的中间(如将其拉向中间,然后放开),您将使用反向运动学来解决对一个或两个关节的力如何影响其他连接的每一个(和 约束 )关节。

想想它不像蛇,更像是自行车链 链条中每个“链节”越短,绳索看起来就越流畅,但加工过程所需的时间越长 链中的每个“链接”越长,计算更改的速度就越快,但它看起来更加僵硬和块状。

查找“Verlet集成”,“运动学”(“前进”/“反向”),并对旋转后的数学和沿2D矢量移动对象进行一半的掌握...
如果你想要用鞭子般的东西,而不仅仅是制造波浪,那里有一点点的质量。

其余的只是循环。

有关基本示例,请参阅以下内容:
http://gamedev.tutsplus.com/tutorials/implementation/simulate-fabric-and-ragdolls-with-simple-verlet-integration/

玩得开心。