Cercle de coordonnées à un tableau en Javascript

Quelle est la meilleure façon d'ajouter les coordonnées d'un cercle à un tableau en JavaScript? Jusqu'à présent, j'ai seulement été en mesure de faire un demi-cercle, mais j'ai besoin d'une formule qui renvoie l'ensemble du cercle de deux tableaux: xValues et yValues. (Je vais essayer d'obtenir les coordonnées afin que je puisse animer un objet le long d'un chemin.)

Voici ce que j'ai à ce jour:

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

source d'informationauteur VirtuosiMedia

  1. 21

    Votre boucle doit être mis en place comme ceci à la place:

    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));
}
    • Commencer votre boucle à 0
    • Étape à travers tout 2 * PI gamme, et pas seulement PI.
    • Vous ne devriez pas avoir l' var xValues = [centerX]; var yValues = [centerY]; -- le centre du cercle n'est pas une partie.
  2. 7

    Bresenham de l'algorithme est plus rapide. Vous entendez parler d'elle par rapport à tracer des lignes droites, mais il y a une forme de l'algorithme pour les cercles.

    Si vous l'utiliser ou continuer avec le trig calculs (qui sont hyper rapide de ces jours) - vous avez seulement besoin de tirage au sort 1/8e de cercle. En échangeant x,y, vous pouvez obtenir une autre 1/8e, puis le négatif de x, de y et de deux échangés et unswapped - vous donne des points pour tout le reste du cercle. Une accélération de 8x!

  3. 5

    Changement:

    Math.PI * i / steps

    :

    2*Math.PI * i / steps

    Un cercle complet est 2pi radians, et vous allez seulement à pi radians.

  4. 1

    Si vous avez déjà un demi-cercle, juste le miroir de points pour obtenir l'autre moitié

    assurez-vous de le faire dans le bon ordre.

    plus speficically, pour l'autre moitié, il vous suffit de remplacer le "+ sin(...)" avec un "- sin(...)"

  5. 1

    Vous avez besoin d'utiliser une fonction partielle à l'entrée des radians en cos et sin; donc prendre les valeurs que vous obtenez pour un quart ou la moitié du cercle, et les refléter sur le centre des points de l'axe pour obtenir l'intégralité de votre cercle.

    Que dit le JavaScript de sin et cos ne sont pas tout à fait aussi difficile, donc vous devez avoir réduit de moitié votre radian ou quelque chose; je vais l'écrire 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);

    Je suppose que, pour quelque raison que ce soit vous voulais xValues[0] et yValues[0] pour être centerX et centerY. Je ne peux pas comprendre pourquoi vous voulez que, comme ce sont des valeurs passées dans la fonction déjà.

  6. 0

    J'ai été en mesure de le résoudre sur mon propre 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));
   }
}