Поверните объект вокруг вращающегося объекта в JS

Question

У меня есть небольшой проект Javascript для солнечной системы. Я понял, как отлично вращать объекты SVG вокруг Солнца в полном круге, не беспокоясь о положениях x и y. (Я знаю, планеты вращаются в эллипсах, не важно.)

Это код для этого.

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 

Я не могу за жизнь мне повернуть Луны вокруг Земли, хотя, это потому, что сама земля вращается и не может позиционировать его достаточно точно. Я в идеальном кругу, но он никогда не будет вращаться от центра Земли как его ось, поэтому он держится в стороне. Я пробовал настроить свои позиции x и y, скорость вращения, ничего.

Может ли кто-нибудь увидеть, какая проблема есть в коде для меня, чтобы отлично повернуть луну вокруг земли?

Вот скрипка:

https://jsfiddle.net/yf3sgsu5/

Answer 1

Я считаю, что ваша проблема в том, что вы двигаетесь элемент Земли, прежде чем пытаться сделать вращение Луны. Таким образом, центр лунной орбиты изменился, когда вы делаете часть Луны. Вы получаете эллиптическую орбиту, потому что радиус изменяется в зависимости от того, движется ли Земля в сторону или от луны.

Вам необходимо либо прочитать cx,cy Земли, прежде чем переместить его. Или вы можете самостоятельно рассчитать орбитальные позиции (см. Ниже).

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