if (ball.y < (ball.radius)) {
                        ball.y = ball.radius + 2;
                        ball.vy *= -1;
                        ball.vy *= (1 - collisionDamper);
                    }
                    
                    // right wall condition
                    if (ball.x > (canvas.width - ball.radius)) {
                        ball.x = canvas.width - ball.radius - 2;
                        ball.vx *= -1;
                        ball.vx *= (1 - collisionDamper);
                    }
                    
                    // left wall condition
                    if (ball.x < (ball.radius)) {
                        ball.x = ball.radius + 2;
                        ball.vx *= -1;
                        ball.vx *= (1 - collisionDamper);
                    }
                }
            }
            
            function Ball(x, y, vx, vy, color){
                this.x = x;
                this.y = y;
                this.vx = vx;
                this.vy = vy;
                this.color = color;
                this.origX = x;
                this.origY = y;
                this.radius = 10;
            }
            
            function animate(canvas, balls, lastTime, mousePos){
                var context = canvas.getContext("2d");
                
                // update
                var date = new Date();
                var time = date.getTime();
                var timeDiff = time - lastTime;
                updateBalls(canvas, balls, timeDiff, mousePos);
                lastTime = time;
                
                // clear
                context.clearRect(0, 0, canvas.width, canvas.height);
                
                // render
                for (var n = 0; n < balls.length; n++) {
                    var ball = balls[n];
                    context.beginPath();
                    context.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI, false);
                    context.fillStyle = ball.color;
                    context.fill();
                }
                
                // request new frame
                requestAnimFrame(function(){
                    animate(canvas, balls, lastTime, mousePos);
                });
            }
            
            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var balls = initBalls();
                var date = new Date();
                var time = date.getTime();
                /*
                 * set mouse position really far away
                 * so the mouse forces are nearly obsolete
                 */
                var mousePos = {
                    x: 9999,
                    y: 9999
                };
                
                canvas.addEventListener("mousemove", function(evt){
                    var pos = getMousePos(canvas, evt);
                    mousePos.x = pos.x;
                    mousePos.y = pos.y;
                });
                
                canvas.addEventListener("mouseout", function(evt){
                    mousePos.x = 9999;
                    mousePos.y = 9999;
                });
                
                animate(canvas, balls, time, mousePos);
            };
        </script>