Cercle coordonnées pour tableau en Javascript

Question

Quel est le meilleur moyen d'ajouter les coordonnées d'un cercle à un tableau en JavaScript? Jusqu'à présent, je n'ai pu faire qu'un demi-cercle, mais il me faut une formule qui renvoie le cercle entier à deux tableaux différents: xValues ?? et yValues ??. (J'essaie d'obtenir les coordonnées pour animer un objet le long d'un chemin.)

Voici ce que j'ai jusqu'à présent:

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

Votre boucle devrait être configurée comme suit:

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

• Commencez votre boucle à 0
• Parcourez toute la plage 2 * PI, pas seulement PI.
• Vous ne devriez pas avoir le var xValues ??= [centerX]; var yValues ??= [centerY]; - le centre du cercle n'en fait pas partie.

Answer 2

L'algorithme de Bresenham est beaucoup plus rapide. Vous en entendez parler en relation avec le tracé de lignes droites, mais il existe une forme d'algorithme pour les cercles.

Que vous utilisiez cela ou que vous continuiez avec les calculs trigonométriques (qui sont extrêmement rapides ces temps-ci), il vous suffit de dessiner 1/8 du cercle. En échangeant x, y, vous pouvez obtenir un autre 1 / 8ème, puis le négatif de x, de y et des deux - échangé et non échangé - vous donne des points pour tout le reste du cercle. Une accélération de 8x!

Answer 3

Changer:

Math.PI * i / steps

à:

2*Math.PI * i / steps

Un cercle complet correspond à 2pi radians et vous n'allez que pi en radians.

Answer 4

Si vous avez déjà un demi-cercle, reflétez les points pour obtenir l'autre moitié
assurez-vous de le faire dans le bon ordre.

Plus spécifiquement, pour l'autre moitié, vous remplacez simplement le " + sin (...) ". avec un " - sin (...) "

Answer 5

Vous devez utiliser une fonction partielle pour saisir les radians dans cos et sin; Par conséquent, prenez les valeurs que vous obtenez pour un quart ou la moitié du cercle et réfléchissez-les sur l'axe des points centraux pour obtenir votre cercle complet.

Cela dit, les péchés et les avantages de JavaScript ne sont pas aussi difficiles, vous devez donc avoir divisé en deux votre radian ou quelque chose du genre; Je l'écrirais comme:

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

J'ai supposé que, pour une raison quelconque, vous souhaitiez que xValues ??[0] et yValues ??[0] soient centerX et centerY. Je n'arrive pas à comprendre pourquoi vous le souhaitez, car ces valeurs ont déjà été transmises à la fonction.

Answer 6

J'ai pu le résoudre moi-même en multipliant le nombre d'étapes par 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));
   }
}