objects - Círculo de coordenadas a la matriz en Javascript

indexof javascript ejemplo

Question

¿Cuál es la mejor manera de agregar las coordenadas de un círculo a una matriz en JavaScript? Hasta ahora solo he podido hacer un semicírculo, pero necesito una fórmula que devuelva todo el círculo a dos matrices diferentes: xValues ​​y yValues. (Estoy tratando de obtener las coordenadas para poder animar un objeto a lo largo de una ruta).

Esto es lo que tengo hasta ahora:

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

Si ya tiene medio círculo, simplemente duplique los puntos para obtener la otra mitad
asegúrese de hacer esto en el orden correcto.

más específicamente, para la otra mitad simplemente reemplazas el " + sin(...) " con un " - sin(...) "

Answer 2

Cambio:

Math.PI * i / steps

a:

2*Math.PI * i / steps

Un círculo completo es de 2pi radianes, y solo vas a pi radianes.

Answer 3

El algoritmo de Bresenham es mucho más rápido. Lo escuchas en relación con el dibujo de líneas rectas, pero hay una forma del algoritmo para círculos.

Ya sea que use eso o continúe con los cálculos trigonométricos (que son increíblemente rápidos en estos días), solo necesita dibujar 1/8 del círculo. Al intercambiar x, y puede obtener otra 1/8ª, y luego la negativa de x, de y, y de ambas - intercambiada y no utilizada - le da puntos para todo el resto del círculo. ¡Una aceleración de 8x!

Answer 4

Necesita usar una función parcial para ingresar los radianes en cos y sin; por lo tanto, tome los valores que está obteniendo durante un cuarto o la mitad del círculo, y reflexione sobre el eje de los puntos centrales para obtener su círculo completo.

Dicho esto, el pecado y el cos de JavaScript no son tan delicado, por lo que debes haber reducido a la mitad tu radio o algo así; Lo escribiría 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);

Supuse que por cualquier razón querías xValues ​​[0] y yValues ​​[0] para ser centerX y centerY. No puedo entender por qué querría eso, ya que son valores pasados ​​a la función ya.

Answer 5

Pude resolverlo solo multiplicando el número de pasos 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));
   }
}

Answer 6

Su bucle debería configurarse así en su lugar:

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

• Comience su ciclo en 0
• Pase por todo el rango de 2 * PI, no solo PI.
• No debe tener var xValues = [centerX]; var yValues = [centerY]; var xValues = [centerX]; var yValues = [centerY]; - el centro del círculo no es parte de él.