SketchBook

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);
}