Pasted

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