coordena círculo para array em Javascript

Question

Qual é a melhor maneira de adicionar as coordenadas de um círculo para uma matriz em JavaScript? Até agora eu só tenho sido capaz de fazer um meio círculo, mas eu preciso de uma fórmula que retorna todo o círculo de duas matrizes diferentes: xValues e yValues. (Eu estou tentando obter as coordenadas para que eu possa animar um objeto ao longo de um caminho.)

Aqui está o que eu tenho até agora:

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

Answer 1

O loop deve ser configurado como este em vez disso:

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

• Comece o seu laço em 0
• Passo através de toda a 2 gama PI *, não apenas PI.
• Você não deve ter a var xValues = [centerX]; var yValues = [centerY]; -. O centro do círculo não é uma parte dela

Answer 2

O algoritmo do Bresenham é o caminho mais rápido. Você ouvi-lo em relação a desenhar linhas retas, mas não há uma forma do algoritmo para círculos.

Se você usar isso ou continuar com os cálculos trigonométricas (que são incrivelmente rápido nestes dias) - você só precisa desenhar 1 / 8th do círculo. Trocando x, y você pode conseguir outro 1 / 8th, e então a negativa de x, de y, e de ambos - trocados e unswapped - lhe dá pontos para todo o resto do círculo. A aceleração de 8x!

Answer 3

Alterar:

Math.PI * i / steps

para:

2*Math.PI * i / steps

Um círculo completo é 2pi radianos, e você está indo só para pi radianos.

Answer 4

Se você já tem metade de um círculo, apenas espelham os pontos para obter a outra metade
certifique-se de fazer isso na ordem correta.

Mais speficically, para a outra metade você simplesmente substituir o "+ sin(...)" com um "- sin(...)"

Answer 5

Você precisa usar uma função parcial para inserir os radianos em cos e pecado; portanto, ter os valores que você está recebendo para um quarto ou metade do círculo, e refletem-los ao longo do eixo dos pontos centrais para obter o seu círculo completo.

Dito pecado e cos de JavaScript não são tão exigente, então você deve ter metade seu radiano ou algo; Eu escrevê-lo como:

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

Eu assumi que por qualquer motivo você queria XValues ??[0] e yValues ??[0] para ser centerX e centerY. Eu não consigo descobrir por que você gostaria que, como eles são valores passados ??para a função já.

Answer 6

Eu era capaz de resolvê-lo em meu próprio, multiplicando o número de passos por 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));
   }
}