32. 更加有效地墙壁反弹

来源：互联网发布：mac装双系统怎么切换编辑：程序博客网时间：2024/04/28 21:13

32. Bouncing Off The Walls, More Productively

In a previous post we saw one way to bounce a ball off walls, by using angles and rotation. In maths, there are often several ways to approach a problem, with different techniques that can be used to achieve the same result. In this post, I’m going to solvethe same problem of bouncing off the walls, but using a different technique: the dot product.

前一篇文章里我们看到一种利用角度和旋转实现小球从墙壁反弹的方法。在数学中,经常有几种方法处理问题,用不同的方法,可以用来实现相同的结果。在这篇文章中,我要去解决同样的问题,从墙壁反弹,但使用一种不同的技术:点积。

Rethinking Bouncing

重新思考反弹

One way to think about bouncing off a wall is that the angle gets reflected around the surface normal (the dotted line), as we saw last time:

考虑墙壁反弹的一种方式是角度围绕法线(虚线)发生反射,正如我们上次看到:

Another way to think about the bouncing is that the velocity parallel to the surface (perpendicular to the normal) is maintained, and the velocity perpendicular to the surface (parallel to the normal) is reversed. This can be seen in the diagram below — the coloured vectors on the left are equivalent to the sum of their dotted/dashed counterparts on the right, where the component parallel to the surface is kept constant, but the component perpendicular to the surface is reversed:

另一种思考反弹的方式是维持平行于平面(垂直于法线)的速度，而反转垂直于平面(平行于法线)的速度。这可以看到如下图中,左边的彩色矢量相当于右边它们的点线/虚线对应部分的总和，其中平行于平面的分量保持不变,但是垂直于平面的分量是颠倒过来的:

Implementing this for horizontal or vertical walls is easy, but how do you do this when the normal is at an arbitrary angle, such as the jaws of the pocket?

对于垂直或水平的墙壁实现起来是容易的，但是当法线是某个特定角度时该怎么办，比如在袋口拐角处？

The Dot Product

点积

What we need to do is be able to split a vector into two components: one being the distance in the direction along the normal, the other being the distance along a vector perpendicular to the normal. The easiest way to do this is to use something called the dot product. The dot product of two vectors refers to multiplying the X components together, and the Y components together:

我们所需要做的就是可以把一个向量分成两个分量:一个是沿着法线方向的距离,另一个是沿着一个垂直于法线的向量的距离。最简单的方法是使用所谓的点积。两个向量的点积是指将其X分量和Y分量分别相乘:

$\begin{pmatrix} \text{aX} \\ \text{aY} \end{pmatrix} \cdot \begin{pmatrix} \text{bX} \\ \text{bY} \end{pmatrix} = \text{aX} \times \text{bX} + \text{aY} \times \text{bY}$

By itself, this is of no use, but the dot product has an important theorem attached to it:

就其本身而言,这是毫无用处的,但是点积有一个重要的定理附加到它:

$\textbf{a} \cdot \textbf{b} = |\textbf{a}| \times |\textbf{b}| \times \cos(\text{angle})$

(where a and b are vectors, angle is the angle between them, and |a| is the length of the vector, which can be calculated using Pythagoras.) The reason this is useful is that if you have two vectors, calculating what is known as the “projection” of one on to another looks like this:

(a和b是向量,angle是他们的夹角,而|a|是向量的长度,可以通过勾股定理算出。)这是非常有用的，原因是如果你有两个向量,计算被称为一个到另一个的“投影”，看起来像这样:

The distance along the new vector is $\text{dist} = |\textbf{a}| \times cos(\text{angle})$ , which from rearranging the dot product result, we know to be:

$\displaystyle\frac{\textbf{a} \cdot \textbf{b}}{|\textbf{b}|} = |\textbf{a}| \times \cos(\text{angle}) = \text{dist}$

沿着新向量的距离是 $\text{dist} = |\textbf{a}| \times cos(\text{angle})$ ，通过对点积结果变形我们得到： $\displaystyle\frac{\textbf{a} \cdot \textbf{b}}{|\textbf{b}|} = |\textbf{a}| \times \cos(\text{angle}) = \text{dist}$

So, we can add a method to calculate the distance along a particular vector, using $\displaystyle\frac{\textbf{a} \cdot \textbf{b}}{|\textbf{b}|}$ :

于是，我们可以添加一个方法去计算沿着一个特殊向量的距离，使用 $\displaystyle\frac{\textbf{a} \cdot \textbf{b}}{|\textbf{b}|}$ ：

    private double distAlong(double x, double y, double xAlong, double yAlong)    {        return (x * xAlong + y * yAlong) / Math.hypot(xAlong, yAlong);            }

Get Bouncing

得到反弹

Our aim in this post is to bounce off walls. So we can use that distAlong method to calculate the distance along the normal, and reverse it. But we also need to calculate the distance along a vector perpendicular to the normal (parallel to the wall). How can we calculate a vector that’s perpendicular to the normal? It turns out that in 2D there’s a really quick, simple way to rotate a vector 90 degrees: swap the X and Y components and negate one of them (challenge for you: why/how does this work?). That gives our final code for doing the bouncing:

我们的目标在这篇文章是反弹墙壁。所以我们可以使用distAlong方法计算沿着法线的距离,并反转它。但我们也需要计算沿着一个垂直于法线(平行墙壁)的向量的距离。我们如何计算一个垂直于法线的向量呢?事实证明,在2d环境下有一个真正快速、简单的方法能够旋转矢量90度:交换X和Y分量并将其中之一取反(挑战你:为什么/这是如何工作的呢?)。这给了我们最后的反弹代码:

                double normalX = w.getNormalX((int)newX, (int)newY, b.getRadius());                double normalY = w.getNormalY((int)newX, (int)newY, b.getRadius());                double distPerpWall = distAlong(vx, vy, normalX, normalY);                double distParWall = distAlong(vx, vy, normalY, -normalX);                                //Bounce:                distPerpWall = -distPerpWall;                                vx = distParWall * normalY + distPerpWall * normalX;                vy = distParWall * -normalX + distPerpWall * normalY;

As a reminder of what that code is doing, here’s a final diagram. First (1), we calculate the normal (the black dashed line, below). Then (2) we split the incoming velocity, vx and vy, into the distance perpendicular to the wall (the orange dashed arrow, below) and the distance parallel to the wall (the orange dotted arrow, below). Next (3) we flip the direction of the dashed arrow to get the resulting blue arrows describing the velocity after the bounce, and (4) we convert the sum of those two vectors back into the new velocity, which we store back into vx and vy:

这里有一个最后的图来展示代码是如何工作的。第一个(1),我们计算出法线(黑色虚线,下图)。然后(2)我们将入射的速度，vx和vy，分解为垂直于墙壁(橙色的虚线箭头,下图)的距离和平行墙壁(橙色点线箭头,下图)的距离。接下来（3）我们翻转虚线箭头的方向来得到用于描述反弹后速度的蓝色箭头，同时（4）我们将这两个向量的和转换回去得到新的速度，并将其存回vx和vy：

I haven’t bothered to upload the new scenario, because it behaves identically tothe previous scenario! Next post we will finally implement collisions between the balls (which will again use the dot product), and then I will upload the final scenario featuring this code and the ball collision code.

我没有耐心上传新场景,因为它所表现的行为和前面的场景完全相同!下一篇文章我们将最终实现球之间的碰撞(这将再次使用点积),然后我将上传最后的场景展示这个代码和球碰撞的代码。