Расчет равномерно распределенных точек по периметру круга

Question

Математика, стоящая за этим вопросом, задавалась много раз, так что это не совсем то, что я ищу. Скорее, я пытаюсь запрограммировать уравнение для определения этих точек в цикл в JavaScript, чтобы я мог отображать точки равномерно по кругу.

Итак, с уравнениями для положений X и Y точек:

pointX = r * cos(theta) + centerX 
pointY = r * sin(theta) + centerY

Я должен быть в состоянии рассчитать это с этим:

var centerX = 300;
var centerY = 175;
var radius = 100;
var numberOfPoints = 8;
var theta = 360/numberOfPoints;

for ( var i = 1; i <= numberOfPoints; i++ ) {

    pointX = ( radius * Math.cos(theta * i) + centerX );
    pointY = ( radius * Math.sin(theta * i) + centerY );
    // Draw point ( pointX , pointY )
}

И это должно дать мне координаты x,y по периметру на 8 точек, расставленных на 45° друг от друга. Но это не работает, и я не понимаю, почему.

Это вывод, который я получаю (используя элемент Canvas HTML5). Точки должны находиться на самом внутреннем красном круге, так как этот имеет

Неправильно:

Когда это "должно" выглядеть следующим образом (хотя это всего лишь 1 балл, размещенный вручную):

Правильный:

Может ли кто-нибудь помочь мне? Прошло много лет с тех пор, как я взял триггер, но даже глядя на другие примеры (на разных языках), я не понимаю, почему это не работает.

Answer 1

Обновление: разобрался!

Мне не нужно было добавлять centerX и centerY к каждому вычислению, потому что в моем коде эти точки уже были относительно центра круга. Таким образом, в то время как центр холста был в точке (300, 175), все точки были относительно круга, который я создал (линия обводки, на которой они должны быть расположены), и поэтому центр для них был в (0, 0). Я удалил это из кода и разделил вычисления тета и угла на две переменные для лучшей читаемости, и вуаля!

totalPoints = 8;

for (var i = 1; i <= totalPoints  ; i++) {
    drawPoint(100, i, totalPoints);
}

function drawPoint(r, currentPoint, totalPoints) {  

    var theta = ((Math.PI*2) / totalPoints);
    var angle = (theta * currentPoint);

    electron.pivot.x = (r * Math.cos(angle));
    electron.pivot.y = (r * Math.sin(angle));

    return electron;
}

Правильный:

Answer 2

cos а также sin в Javascript принимайте аргументы в радианах, а не в градусах. Вы можете изменить свой theta расчет в

var theta = (Math.PI*2)/numberOfPoints;

Увидеть Math.cos документация для деталей

Answer 3

@Emmett J. Решение Батлера должно работать. Ниже приведен полный рабочий пример

// canvas and mousedown related variables
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();

// save canvas size to vars b/ they're used often
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;


var centerX = 150;
var centerY = 175;
var radius = 100;
var numberOfPoints = 8;
var theta = 2.0*Math.PI/numberOfPoints;

ctx.beginPath();
for ( var i = 1; i <= numberOfPoints; i++ ) {

    pointX = ( radius * Math.cos(theta * i) + centerX );
    pointY = ( radius * Math.sin(theta * i) + centerY );
    ctx.fillStyle = "Red";
    ctx.fillRect(pointX-5,pointY-5,10,10);

    ctx.fillStyle = "Green";
}
ctx.stroke();