Позиционирование вращающегося объекта в Javascript

Question

Я создаю интерактивный холст Солнечной системы в Javascript.

Планеты вращаются вокруг Солнца с тригонометрической функцией. Этот конкретный код был написан для меня, поэтому я не знаю, как он работает точно.

Чтобы планеты располагались правильно, чтобы они вращались вокруг Солнца, я могу только расположить их ось X, не касаясь их оси Y. Но всякий раз, когда я обновляю страницу, они начинаются с очень нереальных позиций. Это можно исправить, зная, как правильно их расположить, или изменив скорости планет.

Вот большая часть соответствующего кода:

    function initCanvas(){

    var ctx = document.getElementById('my_canvas').getContext('2d');
    var dynamicSunW = 25;
    var dynamicSunH = 0;
    var dynamicSunX = (ctx.canvas.width * .5) - (Math.PI* 1 * .5);  
    //dynamicSun is always at dead center of canvas
    var dynamicSunY = (ctx.canvas.height * .5) - (dynamicSunH * .5);
    var angleOfSun = 0;

    var posMercuryX = (ctx.canvas.width * .5) - (Math.PI* 1 * .5) - 50;  
    var posMercuryY = (ctx.canvas.height * .5) - (dynamicSunH * .5) + 20;
    var gravityMercury = {x: posMercuryX, y: posMercuryY };

    var posVenusX = (ctx.canvas.width * .5) - (Math.PI* 1 * .5) - 50;
    var posVenusY = (ctx.canvas.height * .5) - (dynamicSunH * .5) + 46;
    var gravityVenus = {x: posVenusX, y: posVenusY };
    /*these variables with lots of calculations behind them simply represent
    dynamic positions based on canvas width and height so that whenever i change
    the canvas size, the positions will still be the same in relation to the size
     */     

    //this code was not written by, the trigonometric function
        function rotate_point(pointX, pointY, originX, originY, 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 
                };
            }


            //an array of each planet with their own position, size and style
        var Solarsystem = {     
        Venus: {
                render: function(){
                    ctx.beginPath();
                    gravityVenus = rotate_point(gravityVenus.x, gravityVenus.y, 
dynamicSunX, dynamicSunY, angleOfSun);
                    ctx.arc(gravityVenus.x,gravityVenus.y ,7, 0, 2*Math.PI);
                ctx.fillStyle = "rgba(255,165,0,1)"; 
                ctx.closePath();
                ctx.fill();
            }
        }
        , Mercury: {
            render: function(){
            ctx.beginPath();
            gravityMercury = rotate_point(gravityMercury.x, 

gravityMercury.y, 
dynamicSunX, dynamicSunY - 2, angleOfSun);
                ctx.arc(gravityMercury.x,gravityMercury.y ,5, 0, 2*Math.PI);

            ctx.fillStyle = "rgba(119,136,153,1)";  


            ctx.closePath();
            ctx.fill();
            ctx.stroke();
            }
        }
        , Sun: {
        render: function(){
        ctx.fillStyle = "rgba(255,255,51,1)";  
        ctx.save(); //store ctx so it can  be later reused 
        ctx.shadowColor = 'yellow';
        ctx.shadowBlur = 70;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;  
        ctx.beginPath();
        ctx.arc(dynamicSunX, dynamicSunY, dynamicSunW, 

dynamicSunH, Math.PI*2, true);


    ctx.closePath();
        ctx.fill();
        ctx.restore(); //ctx at time of save

А вот как я устанавливаю интервал анимации

function animate(){
        background.render();
        Solarsystem.Neptune.render();       
        Solarsystem.Uranus.render();
        Solarsystem.Saturn.render();
        Solarsystem.Jupiter.render();   
        Solarsystem.Mars.render();
        Solarsystem.Earth.render();
        Solarsystem.Venus.render();
        Solarsystem.Mercury.render();       
        Solarsystem.Sun.render(); 
    }

     var animateInterval = setInterval(animate, 1000/60);  

PS: я задал другой вопрос о том, как я могу ускорить каждую планету. Я все еще жду ответа. Если вы знаете, как, пожалуйста, пришлите мне ответ на этот вопрос тоже! В JS, как иметь несколько рисунков на разных скоростях?