Почему мои шары исчезают?

Question

Простите смешное название. Я создал небольшую графическую демонстрацию из 200 шаров, подпрыгивающих и сталкивающихся, как со стенами, так и друг с другом. Вы можете видеть, что у меня сейчас есть: http://www.exeneva.com/html5/multipleBallsBouncingAndColliding/

Проблема в том, что всякий раз, когда они сталкиваются друг с другом, они исчезают. Я не знаю, почему. Может кто-нибудь взглянуть и помочь мне?

ОБНОВЛЕНИЕ: По-видимому, массив шаров имеет шары с координатами NaN. Ниже приведен код, в который я вставляю шары в массив. Я не совсем уверен, как координаты получают 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

Ваша ошибка происходит от этой линии на начальном этапе:

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

Вы ball1.velocitY (что undefined) вместо ball1.velocityY. Таким образом, Math.atan2 дает вам NaN, и это значение распространяется через все ваши вычисления.

Это не является источником вашей ошибки, но есть что-то другое, что вы можете захотеть изменить на этих четырех линий:

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

Вам не нужны дополнительные задания, и может просто использовать += оператор в одиночку:

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

Answer 2

Там есть ошибка в функции collideBalls:

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

Оно должно быть:

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