Calcolo di punti equidistanti sul perimetro di un cerchio

Question

La matematica dietro a questa domanda è stata posta numerose volte, quindi non è esattamente quello che sto cercando. Piuttosto, sto provando a programmare l'equazione per determinare questi punti in un ciclo in JavaScript, in modo da poter visualizzare i punti in modo uniforme attorno al cerchio.

Quindi, con le equazioni per le posizioni X e Y dei punti:

pointX = r * cos(theta) + centerX 
pointY = r * sin(theta) + centerY 

dovrei essere in grado di calcolare con questo:

var centerX = 300; 
var centerY = 175; 
var radius = 100; 
var numberOfPoints = 8; 
var theta = 360/numberOfPoints; 

for (var i = 1; i <= numberOfPoints; i++) { 

    pointX = (radius * Math.cos(theta * i) + centerX); 
    pointY = (radius * Math.sin(theta * i) + centerY); 
    // Draw point (pointX , pointY) 
} 

E mi dovrebbe dare la x, y le coordinate lungo il perimetro per 8 punti, distanti 45 ° l'una dall'altra. Ma questo non funziona, e non capisco perché.

Questo è l'output che ottengo (utilizzando l'elemento Canvas HTML5). I punti devono risiedere sul cerchio rosso più interno, come quello ha un

errato:

Quando "dovrebbe" così (anche se questo è di solo 1 punto, posizionati manualmente):

corretto:

Qualcuno potrebbe darmi una mano? Sono passati anni da quando ho preso il trigone, ma anche guardando altri esempi (da varie lingue), non vedo perché questo non funzioni.

Answer 1

Aggiornamento: capito!

Non ho bisogno di aggiungere il centroX e il centroY ad ogni calcolo, perché nel mio codice, quei punti erano già relativi al centro del cerchio. Quindi, mentre il centro della tela era al punto (300, 175), tutti i punti erano relativi al cerchio che ho creato (la linea del tratto su cui devono essere posizionati), e quindi il centro per loro era a (0, 0). Ho rimosso questo dal codice e diviso i calcoli theta e angle in due variabili per una migliore leggibilità, e voilà!

totalPoints = 8; 

for (var i = 1; i <= totalPoints ; i++) { 
    drawPoint(100, i, totalPoints); 
} 

function drawPoint(r, currentPoint, totalPoints) { 

    var theta = ((Math.PI*2)/totalPoints); 
    var angle = (theta * currentPoint); 

    electron.pivot.x = (r * Math.cos(angle)); 
    electron.pivot.y = (r * Math.sin(angle)); 

    return electron; 
} 

corretta:

Answer 2

cos e sin in Javascript accetta un argomento in radianti, non gradi. È possibile modificare il calcolo theta a

var theta = (Math.PI*2)/numberOfPoints; 

Vedere la Math.cos documentation per i dettagli

Answer 3

soluzione @Emmett J. Butler dovrebbe funzionare. Quello che segue è un esempio operativo completo

// canvas and mousedown related variables 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var $canvas = $("#canvas"); 
var canvasOffset = $canvas.offset(); 
var offsetX = canvasOffset.left; 
var offsetY = canvasOffset.top; 
var scrollX = $canvas.scrollLeft(); 
var scrollY = $canvas.scrollTop(); 

// save canvas size to vars b/ they're used often 
var canvasWidth = canvas.width; 
var canvasHeight = canvas.height; 


var centerX = 150; 
var centerY = 175; 
var radius = 100; 
var numberOfPoints = 8; 
var theta = 2.0*Math.PI/numberOfPoints; 

ctx.beginPath(); 
for (var i = 1; i <= numberOfPoints; i++) { 

    pointX = (radius * Math.cos(theta * i) + centerX); 
    pointY = (radius * Math.sin(theta * i) + centerY); 
    ctx.fillStyle = "Red"; 
    ctx.fillRect(pointX-5,pointY-5,10,10); 

    ctx.fillStyle = "Green"; 
} 
ctx.stroke();