Here is what i get with that idea. Using RGB ColorMode now
ArrayList<Color> colors;
void setup() {
size(700, 200);
colors = new ArrayList<Color>();
target = color(random(255), random(255), random(255));
from = color(random(255), random(255), random(255));
// Push initial color for shown up on the screen
for (int i = 0; i < width/w; i++) {
pushColor();
}
noStroke();
}
color start, end;
color target;
color from;
int count = 0;
//Change these two variable for different behaviour
final int range = 90; // color space
final float w = 10; // speed / detail
void draw() {
background(0);
for (int i = 0; i < width; i+=w) {
fill(colors.get(floor(i/w)).c);
rect(i, 0, w, height);
//ellipse(i, height/2, w, w);
}
popColor(); // remove oldest color
pushColor(); // add new color on the first
}
void popColor() {
colors.remove(0);
}
// this function pushs next color from the color space
void pushColor() {
float amount = (float)count/range; // get position
color c = lerpColor(from, target, amount);
colors.add(new Color(c));
count++; // keep track color position in the color space
count = count % range; // cycle counter
if (count == 0) {
from = target;
target = color(random(255), random(255), random(255));
}
}
// Not the best way to store color as an object.
class Color {
color c;
Color(color c) {
this.c = c;
}
}