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

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

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

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

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

правильно:

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

11
javascript trigonometry

3 ответов

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

мне не нужно было добавлять 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;
}

правильно:

10

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

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

посмотреть Math.cos документация дополнительные сведения

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