using lerpColor() for color tables

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