Javascript 模拟轨道上物体的引力

Javascript 模拟轨道上物体的引力,javascript,animation,html5-canvas,easing,easing-functions,Javascript,Animation,Html5 Canvas,Easing,Easing Functions,我试图在下面的动画中模拟引力/加速度=360){ earth.angularPosition=0; } position.innerHTML=earth.angularPosition+“°”; 翻译(earth.x,earth.y); context.beginPath(); 弧(0,0,earth.r,0,360*Math.PI/180); closePath(); context.fillStyle=earth.fill; context.fill(); 请求动画帧(绘制); } 请求动画

我试图在下面的动画中模拟引力/加速度<地球的角速度应该随着它接近太阳而增加,而随着它越来越远而减小。我想我需要一个缓和函数来修改earth.angularVelocity,但不知道如何修改

我不知道是否或将工作。我需要的缓解功能应如下图所示:

地球的近日点是180°,远日点是0/360°。如何创建这样一个函数并使其工作

function pullRelease(angularPosition, begin, change, maxVelocity) {
    // ?
}
earth.angularVelocity = pullRelease(earth.angularPosition, 0, 360, 3);
var canvas=document.getElementById(“canvas”);
var context=canvas.getContext(“2d”);
var sol={
x:125,
y:150,
r:30,
填充:“黄金”,
};
var轨道={
x:200,
y:150,
半少校:150,
半小调:75,
};
var接地={
r:15,
填充:“道奇蓝”,
角度位置:0,
角速度:1,
};
//晒太阳
context.beginPath();
弧(sol.x,sol.y,sol.r,0360*Math.PI/180);
context.fillStyle=sol.fill;
context.fill();
//绘制假太阳以标记轨道中心
context.beginPath();
弧(orbit.x,orbit.y,sol.r,0,360*Math.PI/180);
context.fillStyle=“rgba(255215,0,1)”;
context.fill();
//绘制地球的轨道轨迹
context.beginPath();
椭圆(orbit.x,orbit.y,orbit.semiMajor,orbit.semiMinor,0,0,2*Math.PI);
stroke();
//这些是固定的,所以将它们另存为背景图像
canvas.style.backgroundImage=“url(“+canvas.toDataURL()+”);
函数绘图(){
resetTransform();
clearRect(0,0,canvas.width,canvas.height);
var newPosition=旋转(-earth.angularPosition,orbit.semigmary,orbit.semigmary,orbit.x,orbit.y);
接地x=新位置x;
earth.y=新位置.y;
//earth.angularVelocity=拉力释放(earth.angularPosition,0,360,3);
地球角位置+=地球角速度;
如果(接地角度位置>=360){
earth.angularPosition=0;
}
position.innerHTML=earth.angularPosition+“°”;
翻译(earth.x,earth.y);
context.beginPath();
弧(0,0,earth.r,0,360*Math.PI/180);
closePath();
context.fillStyle=earth.fill;
context.fill();
请求动画帧(绘制);
}
请求动画帧(绘制);
函数旋转(角度、距离X、距离Y、原点、原点){
返回{
x:originX+Math.cos(角度*Math.PI/180)*距离x,
y:originY+Math.sin(角度*Math.PI/180)*距离,
}
}
正文{
背景:gainsboro;
}
帆布{
背景:白色;
长方体阴影:1px1px1pRGBA(0,0,0,1);
}
#位置{
显示:内联块;
宽度:35px;
文本对齐:右对齐;
}


位置:0

经过一番思考,我想出了一个似乎可以工作的函数,但我仍然认为效果感觉不自然。函数生成左侧的图形。理想的是右边的那个。所以这个函数还需要做一些工作


职位:0


速度:0

重力就是加速度。请参阅此答案以了解如何模拟恒定重力:。对于天体,你只需要根据平方反比定律(谷歌搜索它)通过距离改变引力即可。@slebetman在我的例子中,没有自由空间/动态物体。唯一动态的东西是遵循固定路径的地球(位置)。我希望它的速度也是动态的。我不认为我需要复杂的物理计算,但需要某种缓和函数。我已经有一个在工作了。它只是需要一些改进。
function pullRelease(angularPosition, begin, change, minVelocity, maxVelocity) {
    var midWay = Math.floor(change/2);
    if (angularPosition >= begin && angularPosition < midWay) {
        var percent = angularPosition / midWay;
        return minVelocity + (maxVelocity-minVelocity) * percent;
    }
    else if (angularPosition == midWay) {
        return maxVelocity;
    }
    else if (angularPosition > midWay && angularPosition <= change) {
        var midWayOffset = angularPosition - midWay;
        var remaining    = midWay - midWayOffset;
        var percent      = remaining / midWay;
        return minVelocity + (maxVelocity-minVelocity) * percent;
    }
}