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

Математика, стоящая за этим вопросом, была задана несколько раз, так что я не специально, что мне нужно. Скорее, я пытаюсь запрограммировать уравнение для определения этих точек в цикле в 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 балл, помещается вручную):

Правильно:

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

Ответы

Ответ 1

Обновление: вычислено!

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

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

Правильно:

Ответ 2

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

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

Подробнее см. Math.cos.

Ответ 3

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

// 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();