let angle = 0;
let bigAngle = 0;
let r = 15;
let loopers = [];
let inc = 50;
let columns = 50, rows = 50;

function setup() {
  createCanvas(400, 400);
  
  loopers = make2darray(columns, rows);
  
  for(let i = 0; i < columns; i++){
    for(let j = 0; j < rows; j++){
      
      const xangle = map(mouseX, 0, width, -PI, -PI);
      const yangle = map(mouseY, 0, height, PI, PI);
      
      angle = (xangle * (i / width)*2) + (yangle * (j / height)*4);
      
      c = map(angle, -1, 3, 10, 50); 
      
  
      loopers[i][j] = new Looper(i* (width/columns), j * (height/rows), angle, c);
      
    }
  }
}

function draw() {
  background(158, 191, 247);
  
  
for(let i =0; i < columns; i++){
      for(let j = 0; j < rows; j++){
        
        loopers[i][j].display();
  
      }
    }

}


function Looper(bigX, bigY, angle, h){
  this.bigX = bigX
  this.bigY = bigY;
  this.angle = angle;
  this.waveAngle = this.angle;
  this.h = h;
  this.r = 0.5 - cos(this.h*15.0) * 255;
  this.g = 0.5- cos(this.h*10.0) * 255;
  this.b = 0.5-cos(this.h*20.0) * 255;
  
    
  
  this.display = function(){
      this.r = 0.5 - cos(this.h*15.0) * 255;
  this.g = 0.5- cos(this.h*10.0) * 255;
  this.b = 0.5-cos(this.h*20.0) * 255;
    
    
      let x = cos(this.angle * PI) * r;
      let y = sin(this.angle * PI) * r;
      
    
          noFill();
     
    stroke(110, 250, 159);
      ellipse(this.bigX, this.bigY, r*5);
    
      noStroke();
    
      fill(this.r, this.g, this.b);
      ellipse(this.bigX+x, this.bigY+ y, r);



     this.angle+=0.01;
    
      this.h+=0.005;
    
    this.waveAngle+=0.01;
      
    
  } 
}


function make2darray(columns, rows){

  let array = new Array(columns);
  
  for(let i=0; i < array.length; i++){
  
    array[i] = new Array(rows);
  
  }
  return array
}