Perché le mie palle scompaiono?

Question

Perdonate il titolo divertente. Ho creato una piccola demo grafica di 200 palle che rimbalzano e si scontrano, sia contro le pareti che tra loro. Potete vedere cosa ho attualmente qui: http://www.exeneva.com/html5/multipleBallsBouncingAndColliding/

Il problema è che ogni volta che si scontrano, scompaiono. Non sono sicuro del perché. Qualcuno può dare un'occhiata e aiutarmi?

AGGIORNAMENTO: Apparentemente l'array di sfere ha sfere con coordinate di NaN. Di seguito è riportato il codice in cui spingo le sfere nell'array. Non sono del tutto sicuro di come le coordinate stanno diventando 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

tuo errore proviene da questa linea inizialmente:

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

Hai ball1.velocitY (che è undefined) invece di ball1.velocityY. Quindi Math.atan2 ti dà NaN e il valore NaN si sta propagando attraverso tutti i tuoi calcoli.

Questa non è la fonte del vostro errore, ma c'è qualcos'altro che si potrebbe desiderare di cambiare su queste quattro linee:

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

Non è necessario le assegnazioni in più, e può solo usare il += solo operatore:

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

Answer 2

c'è un errore nella funzione collideBalls:

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

Dovrebbe essere:

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