Drehen Sie ein Objekt um ein rotierendes Objekt in JS

Question

Ich habe ein kleines Solarsystem Javascript-Projekt. Ich habe herausgefunden, wie SVG-Objekte in einem vollen Kreis um die Sonne gedreht werden können, ohne sich um die x- und y-Positionen zu kümmern. (Ich weiß, Planeten rotieren in Ellipsen, nicht wichtig.)

Dies ist der Code dafür.

function rotate_point(pointX, pointY, originX, originY, ang) { 
     ang = ang * Math.PI/180.0; 
     return { 
      x: Math.cos(ang) * (pointX-originX) - Math.sin(ang) * (pointY-originY) + originX , 
      y: Math.sin(ang) * (pointX-originX) + Math.cos(ang) * (pointY-originY) + originY 
     };} // rotate_point 

Ich kann nicht für das Leben von mir den Mond um die Erde drehen, obwohl, dann ist es, weil die Erde sich dreht, und kann es nicht positionieren genau genug. Ich befinde mich in einem perfekten Kreis, aber er wird sich niemals vom Mittelpunkt der Erde aus drehen, so dass er sich zur Seite ausbeult. Ich habe versucht, seine X- und Y-Positionen, Drehgeschwindigkeit, nichts zu optimieren.

Kann jemand sehen, welches Problem es im Code für mich gibt, um den Mond um die Erde perfekt zu drehen?

Hier ist die Geige:

https://jsfiddle.net/yf3sgsu5/

Answer 1

Ich glaube, Ihr Problem ist, dass Sie das Element Erde bewegen, bevor Sie den Mond Rotation zu tun versuchen. Also hat sich der Mittelpunkt der Mondbahn verändert, wenn du den Mond teilst. Sie erhalten eine elliptische Umlaufbahn, da der Radius davon abhängt, ob sich die Erde zum Mond hin oder von ihm weg bewegt.

Sie müssten entweder die cx,cy der Erde lesen, bevor Sie es bewegen. Oder Sie können die Orbitalpositionen unabhängig berechnen (siehe unten).

https://jsfiddle.net/yf3sgsu5/3/