javascript - 确定两个圆相交的点和 Angular 。

标签 javascript math canvas physics

在看到 Canvas 有多么简单后,我最近开始使用它。我的第一个项目只是在其移动时在其边界内保留一个圆圈。我又做了一些涉及圆圈运动的东西,现在......

我目前正在研究当两个圆圈相撞时将它们彼此弹开。您可以在此处查看示例:http://jsfiddle.net/shawn31313/QQMgm/7/

但是,我想使用更多一点现实世界的物理原理。此刻,当圆圈相互碰撞时,它们只是改变了路径。

如下所示:

    // Dont be confused, this is just the Distance Formula
    // We compare the distance of the two circles centers to the sum of the radii of the two
    // circles. This is because we want to check when they hit each other on the surface
    // and not the center.
    var distance = Math.sqrt(Math.pow(c1.x - c2.x, 2) + Math.pow(c1.y - c2.y, 2));
    var r1       = c1.rad;
    var r2       = c2.rad;
    if (distance < r1 + r2) {
        // Change the slope of both circle
        // I would like to figure out a more effecience way of bouncing the circles back
        // However, I have no idea how to determine the angle the ball was struck,
        // and with that information bounce it off at that angle
        c1.xi = -c1.xi; // path is reversed
        c1.yi = -c1.yi;
        c2.xi = -c1.xi;
        c2.yi = -c1.yi;
    }

但是,我希望圆的方向相反,方向​​由交点和 Angular 决定。

我才九年级,不确定这样的公式会是什么样子。但我知道这是可能的,因为这种物理现象存在于许多游戏中。一个例子是 8 球比赛。当球相互撞击时,它们会根据球相互撞击的方式在 table 上移动。

我将不胜感激任何关于如何做到这一点的建议,或者我是否应该等到我对物理和数学有了更深入的了解。

最佳答案

可惜我们无法画出一个非常简单的方案。 就物理学而言,你知道总动量是守恒的,参见 http://en.wikipedia.org/wiki/Momentum

这里有很好的插图和公式http://en.wikipedia.org/wiki/Elastic_collision#Two-_and_three-dimensional 如果两个物体具有相同的重量,您可以简化公式。

现在,让我们考虑一下 c2 固定且中心位于 (0,0) 的引用系。 该引用文献中的 c1 速度为:

c1.xfi=c1.xi-c2.xi
c1.yfi=c1.yi-c2.yi

现在,当两者之间的距离是半径之和时,就会发生碰撞。考虑两个圆的切平面。

您现在必须将 c1 的速度分解为守恒的切线分量和传递给 c2 的垂直分量(沿着 c1 和 c2 之间的线)。

然后您需要返回到原始引用系。

(抱歉,我没有给您确切的公式,但它们位于我提供的链接上)

关于javascript - 确定两个圆相交的点和 Angular 。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20722145/

相关文章:

javascript - Polymer 2 定义全局变量

javascript - Tizen 选择器触摸事件

c# - 如何从一个方向获得 XY 欧拉角?

c++ - sin 和 cos 很慢,有替代方案吗?

css - 带有嵌入式样式表的 SVG 到 PNG

javascript - 使用 Javascript 查找给定字符串中一系列出现的多个标点符号

javascript - 尝试使用 jade 渲染 html 文件,但它仍然将其定位为 jade

c++ - 使用 SSE 和 STL vector 计算平均值

javascript - 将多个套接字实例绘制到 Canvas 上并在移动时更新(多人游戏)

javascript - 如何在 HTML5 Canvas 中随文本一起绘制和旋转图像