计算轨道运行物体的位置

Question

我使用画布创建太阳系动画，并且在计算对象的位置（x，y）值时遇到问题。

地球围绕太阳旋转，我需要计算并更新地球在每一帧的位置。利用地球的位置，我将围绕地球绕月球运行。

相关功能如下：

orbitAround : function (master) {
    master.makeOrbitCenter();
    this.increaseOrbitAngle();
    context.rotate(this.orbit.angle * Math.PI/180);
    context.translate(this.orbit.distance, 0);

    // calculate and update the X and Y position of the earth
    // so that luna can orbit around earth
    // these are the initial values of earth
    this.position.x = master.position.x + this.orbit.distance;
    this.position.y = master.position.y;
},

Fiddle demo

为了简单起见，我已经画了这张照片

让我们说蓝色圆盘是地球，位于（300,200）。太阳位于（200,200），它们之间的距离为100.在地球围绕太阳旋转45度之后，它的位置是什么？如何使用给定值计算它？

Answer 1

看起来你在那里工作了，但这里有一个细分：

Math.cos和Math.sin沿轴返回理论x和y位置。他们需要在radians中给出角度。

因此，为了获得45度角的位置，你首先需要先计算度数的弧度。

var degrees = 45;
var radians = degrees * (Math.PI / 180);

这里的结果是0.785398163。然后，您可以使用以下方法获取轨道运行对象的x和y坐标：

var x = Math.cos(0.785398163) * distance;
var y = Math.sin(0.785398163) * distance;

单帧的整个过程如下所示：

var distance = 100; // from the centre of orbit
var degrees = 45; // around a 360 degree orbit
var radians = degrees * (Math.PI / 180);

var x = Math.cos(radians) * distance;
var y = Math.sin(radians) * distance;

这是一个非常基本的fiddle方形行星和一切。

Answer 2

我会做这样的事情：

distance = 100; //distance between earth and sun.

getXPosition = function(angle){
    return distance*(Math.cos(Math.PI * (angle/180))); 
};

getYPosition = function(angle){
    return distance*(Math.sin(Math.PI * (angle/180))); 
};

var x = getXPosition(45); //70.71 from the sun
var y = getYPosition(45); //70.71 from the sun

要获得最终位置，请执行以下操作：

x += 200; //200 = sun position
y -= 200; //200 = sun position