// this sketch is for plain ole Processing (JAVA) - which was then ported to P5JS (JavaScript)

// I should note that it creates a perfect animated color loop...

// gray blends to light gray / 0 -> 1
// light gray blends to red  / 1 -> 2
// red blends to purple      / 2 -> 3
// purple blends to red      / 3 -> 4
// red blends BACK to gray   / 4 -> 0

int       stageW  = 1000;
int       stageH  = 1000;
color     clrBG   = #ECECEC;

//                  gray             light gray     red          purple        red
color[][] clr1    = { {102,102,102}, {153,153,153}, {236,31,39}, {102,47,144}, {236,31,39} };
int       clr1Len = clr1.length;

int       clr1Num = 300;
int       clr1Cnt = -1;
int       clr1Blk = floor(clr1Num/clr1Len);

int       clr2Num = 900;
int       clr2Cnt = -1;
int       clr2Blk = floor(clr2Num/clr1Len);

color[]   clr1A   = new color[clr1Num];
color[]   clr1B   = new color[clr2Num];

void settings() {
	size(stageW, stageH, P3D);
}

void setup() {
	background(clrBG);

	for (int i = 0; i < clr1Num; ++i) {
		if( i%clr1Blk==0 ) clr1Cnt = (clr1Cnt+1)%clr1Len;
		color _c1 = color(clr1[(clr1Cnt)][0], clr1[(clr1Cnt)][1], clr1[(clr1Cnt)][2]);
		color _c2 = color(clr1[(clr1Cnt+1)%clr1Len][0], clr1[(clr1Cnt+1)%clr1Len][1], clr1[(clr1Cnt+1)%clr1Len][2]);
		clr1A[i] = lerpColor( _c1, _c2, map(i, (clr1Cnt*clr1Blk), (((clr1Cnt+1))*clr1Blk), 0.0, 1.0) );
	}

	for (int i = 0; i < clr2Num; ++i) {
		if( i%clr2Blk==0 ) clr2Cnt = (clr2Cnt+1)%clr1Len;
		color _c1 = color(clr1[(clr2Cnt)][0], clr1[(clr2Cnt)][1], clr1[(clr2Cnt)][2]);
		color _c2 = color(clr1[(clr2Cnt+1)%clr1Len][0], clr1[(clr2Cnt+1)%clr1Len][1], clr1[(clr2Cnt+1)%clr1Len][2]);
		clr1B[i] = lerpColor( _c1, _c2, map(i, (clr2Cnt*clr2Blk), (((clr2Cnt+1))*clr2Blk), 0.0, 1.0) );
	}

}

void draw() {
	background( clr1B[(floor(frameCount*0.5))%clr2Num] );

	strokeWeight(0);
	noStroke();

	// 300 colors

	for (int i = 0; i < clr1Num; ++i) {
		fill( clr1A[i] );
		rect(5+(i*1), 0, 1, 100);
	}

	for (int i = 0; i < clr1Num; ++i) {
		fill( clr1A[(i+(floor(frameCount*3)))%clr1Num] );
		rect(5+(i*1), 105, 1, 100);
	}

	// 900 colors

	for (int i = 0; i < clr2Num; ++i) {
		fill( clr1B[i] );
		rect(5+(i*1), 210, 1, 100);
	}

	for (int i = 0; i < clr2Num; ++i) {
		fill( clr1B[(i+(floor(frameCount*2)))%clr2Num] );
		rect(5+(i*1), 315, 1, 100);
	}

	// single squares with color flow

	fill( clr1A[(floor(frameCount*5))%clr1Num] );
	rect(5, 425, 445, 480);

	fill( clr1B[(floor(frameCount*2))%clr2Num] );
	rect(460, 425, 445, 480);
}