在半圆中绘制点答案

【问题标题】：Plotting points in a semi-circle在半圆中绘制点
【发布时间】：2016-03-07 03:06:39
【问题描述】：

我正在尝试使用 JavaScript 绘制点，以半圆形均匀分布。

到目前为止，我已经制定了基于 X 坐标计算 Y 坐标的公式，它产生了一个半圆。问题是，因为我的 X 坐标是固定间隔的，所以这些点在顶点处看起来更近，而在弧的两端则间隔更大（在一种抛物线配置中）。我想要生成的是均匀分布的点，就像钟面上的分钟一样。

到目前为止，这是我的代码：

$radius = 200;
for ($i = -10; $i <= 10; $i++) {
    $pos_x = $i * 20;
    $pos_y = Math.round( Math.sqrt( Math.pow($radius,2) - Math.pow($pos_x,2) ) + $radius );
}

查看我的 JSfiddle 以获得可视化示例：https://jsfiddle.net/7Lbqhtme/2/

我认为我需要更改的只是 $pos_x 上的乘数，以便间隔从你得到的 0 开始越小，（但我只有 GCSE 数学并且正在努力解决这个问题）...

有人可以帮我调整一下这段代码，让输出点更均匀吗？

PS。它不一定要完全准确，（使用 SIN 和 COS 等），它可以只是一个乘数，使 $x 间隔从 0 开始越小，点越均匀。

感谢收看！

【问题讨论】：

标签： javascript math graph plot coordinates

【解决方案1】：

要获得完整的圆圈，您确实需要使用以下 parametric equations 来获得正确的 x 和 y 坐标：

x(t) = shift_x + r*Cos(t)

y(t) = shift_y + r*Sin(t)

其中t 是以弧度为单位的角度，r 是圆的半径，shift 允许以上面的方式居中组件。对于均匀间隔的 t，您应该在中心点 (shift_x,shift_y) 周围获得均匀的空间点。

示例用法：Your JS fiddle

$r = 200;
$step = Math.PI/20
for ($i = 0; $i <= 20; $i++) {

  $x = $r * Math.cos($step*$i);
  $y = $r * Math.sin($step*$i);
  $("#point_" + Math.round($i) ).css({ "left": $x + 300 , "bottom": $y-20 });

}

【讨论】：