Circunde las coordenadas a la matriz en Javascript

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 el círculo completo 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

Tu bucle debería configurarse así:

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
• Recorra toda la gama 2 * PI, no solo PI.
• No debes tener el var xValues ??= [centerX]; var yValues ??= [centerY]; : el centro del círculo no forma parte de él.

Answer 2

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 uses eso o continúes con los cálculos de trigonometría (que son increíblemente rápidos en estos días), solo necesitas dibujar 1/8 del círculo. Al intercambiar x, y puede obtener otro 1/8, y luego el negativo de x, de y, y de ambos, intercambiados y no intercambiados, le otorga puntos para todo el resto del círculo. Una aceleración de 8x!

Answer 3

Cambiar:

Math.PI * i / steps

a:

2*Math.PI * i / steps

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

Answer 4

Si ya tiene la mitad de un círculo, simplemente refleje los puntos para obtener la otra mitad
Asegúrate de hacer esto en el orden correcto.

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

Answer 5

Necesitas 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 refleje sobre el eje de los puntos centrales para obtener su círculo completo.

Eso dice que el pecado y las cos de JavaScript no son tan delicados, así 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 motivo, querías que xValues ??[0] e yValues ??[0] fueran centerX y centerY. No puedo entender por qué querría eso, ya que los valores ya se transfirieron a la función.

Answer 6

Pude resolverlo por mi cuenta al multiplicar 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));
   }
}