Построение точек в полукруге

Question

Я пытаюсь построить точки, равномерно распределенные по полукругу, используя JavaScript.

До сих пор я разработал формулу для расчета координаты Y на основе координат X, которая создает полукруг. Проблема в том, что мои координаты 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 Maths и я борюсь с этим) ...

Может кто-то, пожалуйста, помогите мне настроить этот код, чтобы точки вывода были более равномерно размещены?

PS. Он не должен быть полностью точным (с использованием SIN и COS и т. Д.), Он может быть просто мультипликатором, который уменьшает интервал $ x дальше от 0, так что точки выглядят более равномерно.

Спасибо, что посмотрели!

Answer 1

Чтобы получить полный круг вам действительно нужно использовать следующую parametric equations, чтобы получить соответствующие координаты х и у:

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 }); 

}