SketchBook

What

var N = 3;
var SIZE = 500;

var rects = [];
var colors = [];
var flag = 0;

function setup() {
createCanvas(SIZE, SIZE);

flag = 0;
colors[flag] = [];
 colors[flag][0] = color(777, 777, 777);
 colors[flag][1] = color(777, 777, 777);
 colors[flag][2] = color(777, 777, 777);
 colors[flag][3] = color(777, 777, 777);

flag = 1;
colors[flag] = [];
colors[flag][0] = color(1, 1, 1);
colors[flag][1] = color(1, 1, 1);
 colors[flag][2] = color(1, 1, 1);
 colors[flag][3] = color(1, 1, 1);

rects = [];
for (var i = 1; 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);
}