2

つまり、Raphael JSを使用して基本的な軌道シミュレーターを実行しているところです。ここでは、1つの円を「星」として、別の円を「惑星」として描画します。シミュレーションが続行されると、軌道の動きが滑らかでなくなるまでフレームレートが徐々に遅くなるという1つの問題があり、問題なく機能しているようです。コードは次のとおりです（注：ページを初期化するためにのみjQueryを使用します）：

$(function() {
    var paper = Raphael(document.getElementById('canvas'), 640, 480);
    var star = paper.circle(320, 240, 10);
    var planet = paper.circle(320, 150, 5);
    var starVelocity = [0,0];
    var planetVelocity = [20.42,0];
    var starMass = 3.08e22;
    var planetMass = 3.303e26;
    var gravConstant = 1.034e-18;
    function calculateOrbit() {
        var accx = 0;
        var accy = 0;
        accx = (gravConstant * starMass * ((star.attr('cx') - planet.attr('cx')))) / (Math.pow(circleDistance(), 3));
        accy = (gravConstant * starMass * ((star.attr('cy') - planet.attr('cy')))) / (Math.pow(circleDistance(), 3));
        planetVelocity[0] += accx;
        planetVelocity[1] += accy;
        planet.animate({cx: planet.attr('cx') + planetVelocity[0], cy: planet.attr('cy') + planetVelocity[1]}, 150, calculateOrbit);
        paper.circle(planet.attr('cx'), planet.attr('cy'), 1); // added to 'trace' orbit
    }
    function circleDistance() {
        return (Math.sqrt(Math.pow(star.attr('cx') - planet.attr('cx'), 2) + Math.pow(star.attr('cy') - planet.attr('cy'), 2)));
    }
    calculateOrbit();
});

とにかく、そのコードのどの部分でもアニメーションが徐々に遅くなってクロールするようには見えないので、問題を解決するための助けをいただければ幸いです。

4

1 に答える 1

3

問題は、planet.animate() 呼び出しでの calculateOrbit へのコールバックにあります。これは raphael によって正しく処理されず、メモリ リークや実行速度の低下を引き起こしています。それを削除してラインを交換する場合

calculateOrbit()

と

setInterval(calculateOrbit, 150);

スムーズに実行する必要があります。

完全なコード:

$(function() {
var paper = Raphael(document.getElementById('canvas'), 640, 480);
var star = paper.circle(320, 240, 10);
var planet = paper.circle(320, 150, 5);
var starVelocity = [0,0];
var planetVelocity = [20.42,0];
var starMass = 3.08e22;
var planetMass = 3.303e26;
var gravConstant = 1.034e-18;
function calculateOrbit() {
    var accx = 0;
    var accy = 0;
    accx = (gravConstant * starMass * ((star.attr('cx') - planet.attr('cx')))) / (Math.pow(circleDistance(), 3));
    accy = (gravConstant * starMass * ((star.attr('cy') - planet.attr('cy')))) / (Math.pow(circleDistance(), 3));
    planetVelocity[0] += accx;
    planetVelocity[1] += accy;
    planet.animate({cx: planet.attr('cx') + planetVelocity[0], cy: planet.attr('cy') + planetVelocity[1]}, 150);
    paper.circle(planet.attr('cx'), planet.attr('cy'), 1); // added to 'trace' orbit
}
function circleDistance() {
    return (Math.sqrt(Math.pow(star.attr('cx') - planet.attr('cx'), 2) + Math.pow(star.attr('cy') - planet.attr('cy'), 2)));
}
setInterval(calculateOrbit, 150);
});
于 2010-05-19T18:35:02.270 に答える