¿Por qué mis bolas desaparecen?

Perdona el gracioso título. Creé una pequeña demostración gráfica de 200 bolas rebotando y colisionando, tanto contra las panetworkinges como entre sí. Puede ver lo que tengo actualmente aquí: http://www.exeneva.com/html5/multipleBallsBouncingAndColliding/

El problema es que cada vez que chocan entre ellos, desaparecen. No estoy seguro por qué. ¿Alguien puede echar un vistazo y ayudarme?

ACTUALIZACIÓN: Aparentemente el set de bolas tiene bolas con coorderadas de NaN. Debajo está el código donde empujo las bolas hacia la matriz. No estoy del todo seguro de cómo las coorderadas están recibiendo NaN.

// Variables var numBalls = 200; // number of balls var maxSize = 15; var minSize = 5; var maxSpeed = maxSize + 5; var balls = new Array(); var tempBall; var tempX; var tempY; var tempSpeed; var tempAngle; var tempRadius; var tempRadians; var tempVelocityX; var tempVelocityY; // Find spots to place each ball so none start on top of each other for (var i = 0; i < numBalls; i += 1) { tempRadius = 5; var placeOK = false; while (!placeOK) { tempX = tempRadius * 3 + (Math.floor(Math.random() * theCanvas.width) - tempRadius * 3); tempY = tempRadius * 3 + (Math.floor(Math.random() * theCanvas.height) - tempRadius * 3); tempSpeed = 4; tempAngle = Math.floor(Math.random() * 360); tempRadians = tempAngle * Math.PI/180; tempVelocityX = Math.cos(tempRadians) * tempSpeed; tempVelocityY = Math.sin(tempRadians) * tempSpeed; tempBall = { x: tempX, y: tempY, nextX: tempX, nextY: tempY, radius: tempRadius, speed: tempSpeed, angle: tempAngle, velocityX: tempVelocityX, velocityY: tempVelocityY, mass: tempRadius }; placeOK = canStartHere(tempBall); } balls.push(tempBall); } 

Su error proviene de esta línea inicialmente:

 var direction1 = Math.atan2(ball1.velocitY, ball1.velocityX); 

Tienes ball1.velocitY (que undefined está undefined ) en lugar de ball1.velocityY . Entonces Math.atan2 está dando NaN , y ese valor de NaN está propagando a través de todos tus cálculos.

Esta no es la fuente de su error, pero hay algo más que es posible que desee cambiar en estas cuatro líneas:

 ball1.nextX = (ball1.nextX += ball1.velocityX); ball1.nextY = (ball1.nextY += ball1.velocityY); ball2.nextX = (ball2.nextX += ball2.velocityX); ball2.nextY = (ball2.nextY += ball2.velocityY); 

No necesita las asignaciones adicionales, y solo puede usar el operador += solo:

 ball1.nextX += ball1.velocityX; ball1.nextY += ball1.velocityY; ball2.nextX += ball2.velocityX; ball2.nextY += ball2.velocityY; 

Hay un error en la function collideBalls :

 var direction1 = Math.atan2(ball1.velocitY, ball1.velocityX); 

Debería ser:

 var direction1 = Math.atan2(ball1.velocityY, ball1.velocityX);