var context;
var dx=5;
var dy=5;
var radius = 10;
var numBalls = 3;
var balls = [];
var width;
var height;


 // resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);

function Ball(){

    // random x and y
    this.x = Math.floor(Math.random()*(width));
    this.y = Math.floor(Math.random()*(height));
 
    // random direction, +1 or -1
    this.dx = Math.floor(Math.random()*2) * 2 - 1;
    this.dy = Math.floor(Math.random()*2) * 2 - 1;
 
}
 


function resizeCanvas() {
    width = window.innerWidth;
    height = window.innerHeight;

    canvas.width = width;
    canvas.height = height;
}

function init()
{
  context= canvas.getContext('2d');
  resizeCanvas();

      // create an array of balls
    for(i= 0 ; i < numBalls ; i++){
       balls.push(new Ball());
    }

  setInterval(draw,10);
}

function drawBall() {

    for (i = 0; i < numBalls; i++) {
        var ball = balls[i];

        context.beginPath();
        context.fillStyle="#fff";

        context.arc(ball.x,ball.y,radius,0,Math.PI*2,true);
        context.closePath();
        context.fill();

        if( ball.x<0 || ball.x>width) ball.dx=-ball.dx; 
        if( ball.y<0 || ball.y>height) ball.dy=-ball.dy; 

        ball.x+=ball.dx;
        ball.y+=ball.dy;
    }

}

function drawTriang() {
   
    context.beginPath();
    context.fillStyle="#fff";

    context.moveTo(balls[0].x,balls[0].y);

    for (i = 1; i < numBalls; i++) {

        var ball = balls[i];
        context.lineTo(ball.x,ball.y);

    }

    context.closePath();
    context.fill();
}

function draw()
{
    context.clearRect(0,0, width,height);
    drawBall();
    drawTriang();
}

document.addEventListener('DOMContentLoaded', init);