Окружать координаты массива в Javascript

Какой лучший способ добавить координаты круга в массив в JavaScript? До сих пор мне удалось сделать только половину круга, но мне нужна формула, которая возвращает весь круг в два разных массива: xValues и yValues. (Я пытаюсь получить координаты, чтобы я мог анимировать объект по пути.)

Вот что я до сих пор:

circle: function(radius, steps, centerX, centerY){
    var xValues = [centerX];
    var yValues = [centerY];
    for (var i = 1; i < steps; i++) {
        xValues[i] = (centerX + radius * Math.cos(Math.PI * i / steps-Math.PI/2));
        yValues[i] = (centerY + radius * Math.sin(Math.PI * i / steps-Math.PI/2));
   }
}

Ответы

Ответ 1

Вместо этого вместо этого нужно настроить этот цикл:

for (var i = 0; i < steps; i++) {
    xValues[i] = (centerX + radius * Math.cos(2 * Math.PI * i / steps));
    yValues[i] = (centerY + radius * Math.sin(2 * Math.PI * i / steps));
}

Начните свой цикл с 0
Шаг через весь диапазон 2 * PI, а не только PI.
Вы не должны иметь var xValues = [centerX]; var yValues = [centerY]; - центр круга не является его частью.

Ответ 2

Алгоритм Брешенема быстрее. Вы слышите об этом по отношению к рисованию прямых линий, но есть форма алгоритма для кругов.

Используете ли вы это или продолжаете с помощью триггерных вычислений (которые в наши дни невероятно быстрые) - вам нужно всего лишь нарисовать 1/8 круга. Поменяв x, y, вы можете получить еще 1/8-й, а затем отрицательный x, y, а для обоих - swapped и unswapped - дает вам очки для всего остального круга. Ускорение 8x!

Ответ 3

Изменить:

Math.PI * i / steps

2*Math.PI * i / steps

Полный круг - 2pi радианов, и вы только собираетесь pi радиан.

Ответ 4

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

более конкретно, для другой половины вы просто заменяете "+ sin(...)" на "- sin(...)"

Ответ 5

Вам нужно использовать частичную функцию для ввода радианов в cos и sin; поэтому возьмите значения, которые вы получаете за четверть или половину круга, и отразите их по оси центров, чтобы получить полный круг.

Это говорит о том, что JavaScript sin и cos не совсем такие же придирчивые, поэтому вы должны вдвое уменьшить ваш радиан или что-то в этом роде; Я бы написал это как:

function circle(radius, steps, centerX, centerY){
    var xValues = [centerX];
    var yValues = [centerY];
    var table="<tr><th>Step</th><th>X</th><th>Y</th></tr>";
    var ctx = document.getElementById("canvas").getContext("2d");
    ctx.fillStyle = "red"
    ctx.beginPath();
    for (var i = 0; i <= steps; i++) {
        var radian = (2*Math.PI) * (i/steps);
        xValues[i+1] = centerX + radius * Math.cos(radian);
        yValues[i+1] = centerY + radius * Math.sin(radian);
        if(0==i){ctx.moveTo(xValues[i+1],yValues[i+1]);}else{ctx.lineTo(xValues[i+1],yValues[i+1]);}
        table += "<tr><td>" + i + "</td><td>" + xValues[i+1] + "</td><td>" + yValues[i+1] + "</td></tr>";
    }
    ctx.fill();
    return table;
}
document.body.innerHTML="<canvas id=\"canvas\" width=\"300\" height=\"300\"></canvas><table id=\"table\"/>";
document.getElementById("table").innerHTML+=circle(150,15,150,150);

Я предположил, что по какой-то причине вы хотели бы, чтобы xValues [0] и yValues [0] были центром X и центром Y. Я не могу понять, зачем вам это нужно, поскольку они уже переданы в функцию.

Ответ 6

Я смог решить это самостоятельно, умножив количество шагов на 2:

circle: function(radius, steps, centerX, centerY){
    var xValues = [centerX];
    var yValues = [centerY];
    for (var i = 1; i < steps; i++) {
        xValues[i] = (centerX + radius * Math.cos(Math.PI * i / steps*2-Math.PI/2));
        yValues[i] = (centerY + radius * Math.sin(Math.PI * i / steps*2-Math.PI/2));
   }
}