var N = 3;
var SIZE = 600;
var rects = [];
var colors = [];
var flag = 0;
function setup() {
createCanvas(SIZE, SIZE);
flag = 0;
colors[flag] = [];
colors[flag][0] = color(200, 100, 108);
colors[flag][1] = color(198, 73, 117);
colors[flag][2] = color(110, 130, 15);
colors[flag][3] = color(99, 14, 100);
flag = 1;
colors[flag] = [];
colors[flag][0] = color(0, 15, 210);
colors[flag][1] = color(0, 120, 170);
colors[flag][2] = color(59, 77, 205);
colors[flag][3] = color(64, 200, 99);
rects = [];
for (var i = 0; i < N; i++) {
rects[i] = SIZE - i * (SIZE / (N - 1));
}
}
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 - , 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);
}