let shapeArr = [];
let x,y,size;
let xSpeed,ySpeed,xDir,yDir;
let r, g, b;

function setup() {
  
  createCanvas(1000,1000);
  canvas.style = "position:absolute; left: 50%; width: 800px; margin-left: -400px; margin-top: 50px;";
  
  xSpeed = random(0.3,5);
  size = 10;
  ySpeed = random(0.3,5);
  
  r = random(255);
  g = random(255);
  b = random(255);

  x = width/2; 
  y = height/2;

  xDir = 1;
  yDir = 1;
  
  frameRate(60);

  for(let i = 0; i < 20; i++) {
    shapeArr.push(new MovingShape(random(0,width),random(0,height),random(50,500)));

}
}

function draw() {
  
  fill( 255, 255, 255, 10); 
  rect(0, 0, width, height); 
  //drawingContext.filter =   'blur(10px)';
  
  for(let i = 0; i < 20; i++) {
    shapeArr[i].move();
    shapeArr[i].display();
}
  
  move();
  display();
  
}

function move () {
  x = x + (xSpeed * xDir);
  y = y + (ySpeed * yDir);
}

function display () {
  //add more visauls!!!!

}

class MovingShape {

  constructor(startX, startY, startSize){
    
    this.size = startSize;
    this.x = startX;
    this.y = startY;
    this.xSpeed = random(0.3,5);
    this.ySpeed = random(0.3,5);
    this.xDir = .1;
    this.yDir = .1;
  }

  move(){
    
    this.x = this.x + (this.xSpeed * this.xDir);
        this.y = this.y + (this.ySpeed * this.yDir);

        if(this.x > (width-(this.size/2)) || this.x < (this.size/2)){
            this.xDir = this.xDir * -1;
            
        }

        if(this.y > (height-(this.size/2)) || this.y < (this.size/2)){
            this.yDir = this.yDir * -1;
        }
  }

  display() {
    
    noStroke(10000);
    fill(r, g, b, 10);
    randomSeed(1989);
    ellipse(this.x, this.y,this.size,this.size);
    
  }
}







