using lerpColor() for color tables / p5js

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