// this is for P5JS

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

// clr1 array example 
// 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

let stageW       = 1080;
let stageH       = 1080;

let clrLen;
let whichClr;

let clr1=[ [102,102,102], [153,153,153], [236,31,39], [102,47,144], [236,31,39] ];
let clr2=[ [51,51,51], [255,51,0], [255,255,255] ];
let clr3=[ [255,0,0], [255,255,255], [0,255,0], [0,0,255] ];

let clr1Num = 300;
let clr1Cnt = -1;
let clr1Blk;

let clr2Num = 900;
let clr2Cnt = -1;
let clr2Blk;

let clrA = []; // store 300 color gradients
let clrB = []; // store 900 color gradients

function setup() {
	createCanvas(stageW, stageH, WEBGL);
	background('#111111');

	let _r = int( random(3) );

	if(_r==0) {
		whichClr = clr1;
	}
	else if(_r==1) {
		whichClr = clr2;
	}
	else {
		whichClr = clr3;
	}
	
	setColorTables();
}

function draw() {
	background('#111111');

	strokeWeight(0);
	noStroke();

	// 300 COLORS

	push();
		translate( -((stageW/2)-20), -((stageH/2)-20) );
		for (let i = 0; i < clr1Num; ++i) {
			fill( clrA[i] );
			rect(5+(i*1), 0, 1, 100);
		}
	pop();

	push();
		translate( -((stageW/2)-20), -((stageH/2)-130) );
		for (let i = 0; i < clr1Num; ++i) {
			fill( clrA[ (i+(frameCount*5))%clrA.length ] );
			rect(5+(i*1), 0, 1, 100);
		}
	pop();

	// 900 COLORS

	push();
		translate( -((stageW/2)-20), -((stageH/2)-320) );
		for (let i = 0; i < clr2Num; ++i) {
			fill( clrB[i] );
			rect(5+(i*1), 0, 1, 100);
		}
	pop();

	push();
		translate( -((stageW/2)-20), -((stageH/2)-430) );
		for (let i = 0; i < clr2Num; ++i) {
			fill( clrB[ (i+(frameCount*2))%clrB.length ] );
			rect(5+(i*1), 0, 1, 100);
		}
	pop();
}

function setColorTables() {
	clrLen = whichClr.length;
	clr1Blk = floor(clr1Num/clrLen);
	clr2Blk = floor(clr2Num/clrLen);
	for (let i = 0; i < clr1Num; ++i) {
		if( i%clr1Blk==0 ) clr1Cnt = (clr1Cnt+1)%clrLen;
		let _c1 = color( whichClr[(clr1Cnt)][0], whichClr[(clr1Cnt)][1], whichClr[(clr1Cnt)][2] );
		let _c2 = color(whichClr[(clr1Cnt+1)%clrLen][0], whichClr[(clr1Cnt+1)%clrLen][1], whichClr[(clr1Cnt+1)%clrLen][2]);
		clrA.push(  lerpColor( _c1, _c2, map(i, (clr1Cnt*clr1Blk), (((clr1Cnt+1))*clr1Blk), 0.0, 1.0) ) );
	}
	for (let i = 0; i < clr2Num; ++i) {
		if( i%clr2Blk==0 ) clr2Cnt = (clr2Cnt+1)%clrLen;
		let _c1 = color(whichClr[(clr2Cnt)][0], whichClr[(clr2Cnt)][1], whichClr[(clr2Cnt)][2]);
		let _c2 = color(whichClr[(clr2Cnt+1)%clrLen][0], whichClr[(clr2Cnt+1)%clrLen][1], whichClr[(clr2Cnt+1)%clrLen][2]);
		clrB.push( lerpColor( _c1, _c2, map(i, (clr2Cnt*clr2Blk), (((clr2Cnt+1))*clr2Blk), 0.0, 1.0) ) );
	}
}