var c=document.getElementById('canvas');
var ctx=c.getContext('2d');
ctx.strokeRect(0,0,600,600);

Ball=function(x,y,radius){
    this.x=x;
    this.y=y;
    this.radius=radius;
    this.xSpeed=RandomMinMax(-2,2)+0.1;
    this.ySpeed=RandomMinMax(-2,2)+0.1;
    this.drawlines=drawlines();
    ////////////////////////
    this.draw=function(){
    ctx.beginPath();
ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,false);
                ctx.fillStyle='rgba(0,100,210,0.8)';
       
ctx.fill();
       
};
    ///////////////////////////
    this.move=function(){
             this.x=this.x+this.xSpeed;
        this.y=this.y-this.ySpeed;
           };
  this.checkCollision = function () {

 if (this.y < this.radius || this.y > 600-this.radius) {this.ySpeed = -this.ySpeed;
                                                     
                                                       }
    if (this.x>600-this.radius||this.x<this.radius ){this.xSpeed=-this.xSpeed;

                                                    };
   };
};
function RandomMinMax(min,max){
    return Math.floor(Math.random()*(max-min+1)+min);
};


/////////////////////////////////////
//ctx.clearRect(0,0,600,600);

var group=[];
for(var i=0;i<6;i++){
    var xBall=RandomMinMax(10,590);
var yBall=RandomMinMax(10,590);
    var RandomRadius=RandomMinMax(2,10);
    group.push(new Ball(xBall,yBall,20));

};
function drawlines(){
var x1,x2,y1,y2,lenth;
for (var i in group){
  for(var j in group){
      x1=group[i].x;
      y1=group[i].y;
      x2=group[j].x;
      y2=group[j].y;
      lenth=Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2));
      if (lenth<40){
          ctx.lineWidth=0.5;
          ctx.strokeStyle='rgba(0,100,210,0.3)';
          ctx.beginPath();
          ctx.moveTo(x1,y1);
          ctx.lineTo(x2,y2);
          ctx.closePath();
          ctx.fillStyle='red';
          group[i].xSpeed=group[i].xSpeed*-1;
           group[i].ySpeed=group[i].ySpeed*-1;
          
          
          ctx.stroke();
      }
  } ; 
};
};

function animate(){
////////////////////////////
requestAnimationFrame(animate)
{
    ctx.clearRect(0,0,600,600);
    for(var i=0;i<group.length;i++){
    group[i].draw();
        group[i].move();
        group[i].checkCollision();
        drawlines();
    };
    
    ctx.strokeRect(0,0,600,600);
};
};
animate();