使用数学来改变对象的位置(javascript)

Question

我有一个很大的要求.它涉及相当多的数学,这从来都不是我的强项,所以我想,我会问Stackoverflow上的人帮助我.

我正在使用Javascript研究这个太阳系交互式动画.我正在使用三角函数在物体周围创建完整的360度旋转旋转,用于围绕太阳的行星.我知道,行星会以椭圆形旋转,但我不希望它对我自己造成太大的影响.

function rotate_point(originX, originY, body) {
    body.angle +=  (1.0 / body.period); //calculates the angle, divided by distance from center of body
    var ang = body.angle * 2.0 * Math.PI / 180.0; //calculates full 360° rotation required based on angle
    var r = body.orbit;
    return {
        x: Math.cos(ang) * r - Math.sin(ang) * r + originX, 
        y: Math.sin(ang) * r + Math.cos(ang) * r + originY 
    };} // generic rendering of a unit orbital progression of a planet

正如你所看到的那部分已完成,我的问题是:

我需要"调整"以便将物体驱动到太阳中心的效果.就像如果我突然让引力的更坚强,这将拉动对行星的轨道,所以你看到他们最终走向崩溃的该中心.

是否可以对上述代码进行任何更改,如果是,那么代码需要看起来像什么？

我有一个JS小提琴我已经得到了什么,我希望有一些聪明的家伙看到这个挑战并帮助我!

小提琴

Answer 1

更新代码以使用开普勒的行星运动第三定律应该很容易.由于你使用的是质量(行星)"质量(太阳)"的圆形轨道,开普勒第三定律基本上只是角动量守恒的陈述.

旋转动量定义为以rad/s为单位测量的系统惯性矩(I)和角速度(Ω)的乘积.

数学上,这只是:

I1*omega1 = I2*omega2

在我们可以使用的数量方面表达这一点:

I = m*r ^2ω= r*dTheta/dt

所以通过物业保护:

I1*omega1 = I2*omega2

弥撒取消了双方,留下了r和omega的表达.

r1 ^ 2*omega1 = r2 ^ 2*omega2

因此,考虑到半径的变化,我们可以计算出角速度的必要变化.如果r1和omega1是初始半径和旋转速度,则给定轨道半径的新旋转速度表示为:

omega2 = omega1*(r1/r2)^ 2

这可以通过在rotate_point函数中添加一行代码来更新速度来实现:

function rotate_point(originX, originY, body) {
    velocity_gain = Math.pow(sol["Earth"].orbit/body.orbit, 2)
    body.angle += velocity_gain * (1.0 / body.period); //calculates the angle, divided by distance from center of body
    var ang = body.angle * 2.0 * Math.PI / 180.0; //calculates full 360° rotation required based on angle
    var r = body.orbit * orbitScale
    return {
       x: Math.cos(ang) * r - Math.sin(ang) * r + originX, 
       y: Math.sin(ang) * r + Math.cos(ang) * r + originY 
    };
  }
    // generic rendering of a unit orbital progression of a planet

  function planetrotation ( planet ) {
      var x, y, x_sun, y_sun, e, c_new;
      e = document.getElementById ( planet );
      x_sun = parseFloat ( document.getElementById ( "Sun" ).getAttribute ( "cx" ) );
      y_sun = parseFloat ( document.getElementById ( "Sun" ).getAttribute ( "cy" ) );
      c_new = rotate_point ( x_sun, y_sun, sol[planet], 0.5 );
      e.setAttribute ( "cx", c_new.x );
      e.setAttribute ( "cy", c_new.y );
    } // Rotations of the planets around Sun    

  var sol = { 
    Mars:   { period: 5.2, orbit: 400, angle: 51.0},
    Earth:  { period: 5.2, orbit: 300, angle: 51.0},
    Venus:  { period: 5.2, orbit: 200, angle: 51.0}
    };

  function animate () {
    planetrotation("Venus");
    planetrotation("Earth");
    planetrotation("Mars");
  }       

这里是模拟3个行星的小提琴:https://jsfiddle.net/8kcj3bvz/

基本上,这种平等性表明,随着轨道半径的减小,角动速必须增加,以保持动量(在这种情况下能量).

从长远来看,您可能需要考虑使用Euler方法来模拟此系统.对于像这样的引力体来说它实际上非常简单,并且在模拟两个以上的物体时可以非常强大.

编辑

只是侧面注意,轨道速度只是其半径的函数,前提是卫星的质量远小于母体.因此period,angle在代码中定义和实际上是多余的.