//made a function in grid to translate size? scale?
//for loop grid 

let size;

function setup() {
  createCanvas(windowWidth, windowHeight);
  rectMode(CENTER);
  frameRate(8);
}

function draw() {
  
  background(255);
  noFill();
  stroke(0);

  size= min(height/5,width/10) ; 
  //move the center mode back
  translate(size/2,size/2);
  // rect(0,0,100,200);
  for(x=0;x<width;x+=size){
    for(y=0;y<height;y+=size){

      
    push();
      
    translate(x,y);
    rect(0,0,size);

    let shiftX= random(-6,6);
    let shiftY= random(-6,6);

      for (i=1;i<7;i++){
      let innersize = size - i * (size/7);
      rect(i*shiftX,i*shiftY,innersize);
      
      }
    pop();
    
    
	  }
  }
  console.log('grid:'+size);
  noLoop();
}

function windowResized(){
  resizeCanvas(windowWidth,windowHeight);
}