Współrzędne okręgu do tablicy w JavaScript

Question

Jaki jest najlepszy sposób dodania współrzędnych koła do tablicy w JavaScript? Do tej pory udało mi się zrobić tylko półkola, ale potrzebuję formuły, która zwraca cały okrąg do dwóch różnych tablic: xValues ​​i yValues. (Próbuję uzyskać współrzędne więc mogę animowania obiektu wzdłuż ścieżki.)

Oto co mam do tej pory:

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

Twój pętli powinny być ustawione tak, zamiast:

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

• Zacznij swój pętla 0
• Przejrzyj cały zakres 2 * PI, a nie tylko PI.
• Nie powinieneś mieć var xValues = [centerX]; var yValues = [centerY]; - środek okręgu nie jest jego częścią.

Answer 2

Jeśli masz już pół okrąg, po prostu odzwierciedlać punkty aby uzyskać drugą połowę, należy wykonać tę czynność we właściwej kolejności.

więcej speficically, na drugą połowę po prostu zastąpić „+ sin(...)” z „- sin(...)”

Answer 3

Trzeba użyć częściową funkcję do wejścia radianów na cos i grzechu; dlatego przyjmuj wartości, które otrzymujesz za ćwierć lub pół koła, i odzwierciedlaj je na osi punktów środkowych, aby uzyskać pełne koło.

Że grzechy JavaScript i cos nie są tak wybredne, więc musieliście zmniejszyć o połowę swój radian lub coś podobnego; Chciałbym napisać go jako:

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

Sądziłem, że z jakiegoś powodu chciał xValues ​​[0] i yValues ​​[0], aby być centerx i Centery. Nie rozumiem, dlaczego tego chcesz, ponieważ są to wartości już wprowadzone do funkcji.

Answer 4

udało mi się go rozwiązać na własną rękę, mnożąc liczbę kroków przez 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 5

Algorytm Bresenhama jest znacznie szybszy. Słyszycie o tym w odniesieniu do rysowania prostych linii, ale istnieje forma algorytmu dla kół.

Bez względu na to, czy używasz tego, czy kontynuujesz obliczenia trygonometryczne (które ostatnio są niesamowicie szybkie) - wystarczy, że narysujesz 1/8 okręgu. Poprzez zamianę x, y można uzyskać kolejną 1/8, a następnie ujemna wartość x, y oraz obu - zamienionych i niezapisanych - daje punkty dla całej reszty koła. Przyspieszenie 8x!

Answer 6

Zmiana:

Math.PI * i/steps 

do:

2*Math.PI * i/steps 

pełne koło jest 2pi radianów i idziesz tylko do radianach PI.