使用 JavaScript 通过测量圆的面积来计算 π。

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

这是一个有趣的 JavaScript 小程序，你可以自己实现，也可以和编程俱乐部的年轻程序员一起，或者在家里实现。

数学

自阿基米德时代起，人们就已知道π的近似值。多年来，许多数学家和研究人员致力于以越来越高的精度计算π的值。人们
已经发现了许多计算这个奇妙数字的新方法。

了解π非常重要，因为它的值在许多数学应用中都会用到。其中最著名的应用可能是计算已知半径的圆的周长和面积。

在本文中，我们将尝试用一种即使是中学生也能理解的方法来计算 π 的近似值——我们将手动测量圆的面积，然后反向推导 π 的值。

我们从数学课上知道，圆的面积是：

A = πr²

我们通常用这个方程来解面积或半径。但这次我们要解这个方程来解π。

π = A / r²

算法

为了解这个方程，我们将借助 JavaScript 使用一种经验方法。这种方法非常简单：

• 步骤 1：假设一个半径为 r 的圆。
• 步骤二：用一个紧密的正方形包围圆。正方形的边长等于圆的直径。
• 步骤 3：通过计算圆内所有像素的数量来确定圆的面积。
• 步骤 4：通过将面积除以半径的平方来确定 π，就像上面的公式一样。

挑战1：正如你所见，算法很简单，但第一个挑战已经出现。在步骤3中，我们提到需要判断一个点是否在圆内。

为了实现这一点，我们将扫描外正方形内的所有点，并判断该点是否在圆内。这是通过比较圆的半径与该点到圆心的距离来实现的。

如果距离小于或等于半径，则该点在圆内。

由于这是一种经验方法，我们将尝试使用足够大的圆来提高计算精度。使用半径较小的圆可能会导致 π 近似值不够精确，因为圆的形状不够理想。请参见下图：

挑战二：前一个挑战本身又提出了一个新的挑战：我们如何确定两点之间的距离？

答案是：借助一点几何知识和勾股定理。

由于我们知道这两个点的坐标，我们可以确定三角形的边，然后利用勾股定理求出斜边。

下图应该足以说明问题。

现在我们已经有了开始编写计算 π 的 JavaScript 代码所需的所有数据。

您可以使用任何 JavaScript 环境或 Playground 来编写代码。在本文中，我们将使用免费的codeguppy.com环境（不妨创建一个免费帐户——您会玩得很开心）。

虽然我们之前只讨论了图形概念，但代码不会使用任何图形库。我们可以完全使用纯 JavaScript 来实现这个算法，而无需绘制圆形或方形。

var p = calcPI();
println(p);

function calcPI()
{
    // Choose an arbitrary circle radius
    var r = 100;
    var diameter = r * 2;
    var area = 0;

    // Scan all the pixels inside the square
    for(var x = 0; x < diameter; x++)
    {
        for(var y = 0; y < diameter; y++)
        {
            // Calculate the distance from each pixel
            // to the center of the circle
            var d = dist(x, y, r, r);
            if (d <= r)
            {
                // If distance is less than the radius
                // then add it to the area of the circle
                area++;
            }
        }
    }

    // Calculate PI by dividing the area to the 
    return area / (r * r);
}

如果您将上述代码复制到codeguppy.com编辑器中并运行，您将看到显示的结果：

3.1415

对于如此简单的经验方法来说，这个结果相当准确！

注意：我们没有定义用于计算两点之间距离的 dist 函数。这是因为该函数已在codeguppy.com中定义。但是，如果您想在codeguppy.com之外运行代码，则可以按照上述说明，仅需几行代码即可轻松实现该函数。
我们将 dist 函数的实现留给感兴趣的读者自行练习。

想象圆圈

正如你所见，使用这种方法计算π不需要任何图形库。不过，既然我们身处图形化环境中，不妨稍微增加一些趣味性，将我们正在扫描的点可视化。

我们将使用 point 函数来绘制扫描点，如果扫描点位于圆内，则绘制“青色”；如果扫描点位于圆外，则绘制“浅蓝色”。

只需在正确的位置添加以下内容stroke()和行：point()

...
            if (d <= r)
            {
                // If distance is less than the radius
                // then add it to the area of the circle
                area++;

                stroke("teal");
            }
            else
            {
                stroke("lightblue");
            }

            point(x, y);
...

这就是执行效果：

希望你享受这次 JavaScript 数学探索之旅！

您可以在此 Playground 中找到此代码的运行示例：https://codeguppy.com/code.html?Z25MRrzMBK8zRwDaeaZY

祝您编程愉快，别忘了分享您的编程经验！