¿Por qué desaparecen mis bolas?

Question

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

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

ACTUALIZACIÓN: Al parecer, el conjunto de bolas tiene bolas con coordenadas de NaN. Debajo está el código donde empujo las bolas hacia la matriz. No estoy del todo seguro de cómo las coordenadas 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); 
} 

Answer 1

Su error proviene de esta línea inicialmente:

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

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

Ésta 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 es necesario las asignaciones adicionales, y sólo se puede utilizar el += operador solo:

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

Answer 2

hay un error en la función collideBalls:

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

Debería ser:

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