Pourquoi le framerate de Raphael ralentit-il sur ce code?

Question

Je suis en train de faire un simulateur basique d'orbite en utilisant Raphael JS, où je dessine un cercle comme "étoile" et un autre cercle comme "planète". Il semble fonctionner correctement, avec le seul hic que la simulation continue, son framerate ralentit progressivement jusqu'à ce que le mouvement orbital n'apparaisse plus fluide. Voici le code (note: utilise uniquement jQuery pour initialiser la page):

$(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(); 
}); 

Il ne semble pas, pour moi en tout cas, que toute partie de ce code entraînerait l'animation de ralentir progressivement à une exploration, donc toute aide pour résoudre le problème sera appréciée!

Answer 1

Le problème est avec l'appel de calculateOrbit dans votre appel planet.animate(). Il n'est pas manipulé correctement par raphael et provoque une fuite de mémoire ou une exécution ralentie. si vous supprimez et remplacez la ligne

calculateOrbit() 

avec

setInterval(calculateOrbit, 150); 

il doit fonctionner en douceur.

code complet:

$(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); 
});