230322lerpColor_rhythm.js

// reference: Joshua Davis's awesome lerpColor rhythm technique!!
// https://pastebin.com/0t4CwtpN

let numAssets = 15;

let paramsClrs = [];
let paramsClrsProbability;
let paramsClrsMax = [4000, 1000, 100];

let clrs = [
  ["#ffffff", "#af939f", "#5b274b", "#066505", "#b5e655"],
  ["#ffffff", "#8f7788", "#5b274b", "#412049", "#245e79"],
  ["#af939f", "#8f7788", "#5b274b", "#e7070e", "#ff530d"],
];

function buildColors(_i, _whichClr, _paramsClrsProbability) {
  let whichClr = shuffle(clrs[_whichClr]);
  let whichClrLen = whichClr.length;
  let clrCnt = -1;
  let clrMaxPerLerp = floor(_paramsClrsProbability / whichClrLen);

  for (let j = 0; j < _paramsClrsProbability; ++j) {
    if (j % clrMaxPerLerp == 0) {
      clrCnt = (clrCnt + 1) % whichClrLen;
    }
    let c1 = color(whichClr[clrCnt]);
    let c2 = color(whichClr[(clrCnt + 1) % whichClrLen]);
    paramsClrs[_i].push(
      lerpColor(
        c1,
        c2,
        map(j, clrCnt * clrMaxPerLerp, (clrCnt + 1) * clrMaxPerLerp, 0.0, 1.0)
      )
    );
  }
}

function preload() {
  for (let i = 0; i < numAssets; ++i) {
    paramsClrs[i] = [];
    let _tempProb = random(1);
    if (_tempProb < 0.6) paramsClrsProbability = paramsClrsMax[2];
    // get 4000 colors / 60% of the time
    else if (_tempProb < 0.8) paramsClrsProbability = paramsClrsMax[1];
    // get 1000 colors / 20% of the time
    else paramsClrsProbability = paramsClrsMax[0]; // get 100 colors  / 20% of the time
    buildColors(i, int(random(clrs.length)), paramsClrsProbability);
  }
}

function setup() {
  createCanvas(1000, 1000);
}

function draw() {
  background(220);
  let offset = width / 10;
  let h = height / paramsClrs.length;
  for (let j = 0; j < paramsClrs.length; j++) {
    let y = map(j, 0, paramsClrs.length, offset, height - offset);
    // rect(0,y,width,h);
    let w = width / paramsClrs[j].length;
    for (let i = 0; i < paramsClrs[j].length; i++) {
      noStroke();
      fill(paramsClrs[j][i]);
      let x = constrain(
        map(i, 0, paramsClrs[j].length, offset, width - offset),
        offset,
        width - offset - w
      );
      rect(x, y, w, h);
    }
  }
  noLoop();
}