var N = 3;

var SIZE = 300;



var rects = [];

var colors = [];

var flag = 0;



function setup() {

  createCanvas(SIZE, SIZE);



  flag = 0;

  colors[flag] = [];

  colors[flag][0] = color(300,400, 304);

  colors[flag][1] = color(236, 240, 229);

  colors[flag][2] = color(210, 216, 216);

  colors[flag][3] = color(219, 264, 216);



  flag = 1;

  colors[flag] = [];

  colors[flag][0] = color(0, 153, 150);

  colors[flag][1] = color(0, 140, 160);

  colors[flag][2] = color(89, 127, 306);

  colors[flag][3] = color(106, 216, 777);



  rects = [];

  for (var i = 0; i < N; i++) {

    rects[i] = SIZE - i * (SIZE / (N - 2));

  }

}



function draw() {

  for (var i = 0; i < rects.length; i++) {

    rects[i]++;

    if (rects[i] > SIZE + SIZE / (N - 1)) {

      rects.shift();

      rects.push(0);

      flag = 1 - flag;

    }

    draw_rects(SIZE / 2, SIZE / 2, rects[i], colors[(flag + i) % 2]);

  } 

}



function draw_rects(x, y, size, colors) {

  var half = size / 2;

  var quarter = size / 4;



  rectMode(CENTER);

  noStroke();



  fill(colors[0]);

  rect(x - quarter, y - quarter, half, half);



  fill(colors[1]);

  rect(x + quarter, y - quarter, half, half);



  fill(colors[2]);

  rect(x - quarter, y + quarter, half, half);



  fill(colors[3]);

  rect(x + quarter, y + quarter, half, half);

}