How do I lerpColor() between two background color values?

missing_n

I'm somewhat unclear how to lerpColor() between two background colors. Currently I have a program that selects a new random background color out of an array on a key release, but I'm unsure how to animate between them after scratching my head about the lerpColor documentation. Can anyone post a suggestion or example?

Thank you!

color[] colorArray  = {color(0,0,0),color(255, 192, 0),color(200, 0, 0),color(126, 255, 0)};
int currentColor;


    void setup(){
    size(640,480);
    smooth();
    noStroke();
    currentColor = 0;
}
void draw(){
    background(colorArray[currentColor]);
}
void keyReleased(){
    if(key == 's'){
        println("currentColor: "+currentColor);
        int newColor = currentColor;
        while (newColor == currentColor)
        newColor=(int) random(colorArray.length);
        currentColor = newColor;
    }
}

missing_n

Ended up doing an alpha. This oddly works. Just leaving it here in case people stumble on it.

http://pastebin.com/7pYiCAeS

jeremydouglass

Huh. That's odd. I have no idea why that works....

Edit O-oh. Ok, I see why that works. You are slowly painting the new color on at 10/256ths transparency each frame, until it eventually becomes the only color. I could see it happening much more clearly when I dropped frameRate to ~3.

Anyway, neat solution.

An alternative: If you want a linear interpolation, and if you want it to work with background(), try using a timer or a countdown: "After I press 's', set a countdown, and do a lerp each draw until countdown = 0 and then stop."

/** lerpColor background
 *  
 *  Press any key to fade in new background. Use a countdown to control linear interpolation
 *  between old and current colors; load progressive results with background().
 *  2016-09-20 Jeremy Douglass - Processing 3.2.1 
 *  forum.processing.org/two/discussion/18224/how-do-i-lerpcolor-between-two-background-color-values#latest
 */

color[] colorArray  = {color(0,0,0),color(255, 192, 0),color(200, 0, 0),color(126, 255, 0)};
int currentColor;
int lastColor;

float lerpRange;
float lerpCount;

void setup(){
    size(640,480);
    smooth();
    noStroke();
    currentColor = 0;
    lerpCount = 0;
    lerpRange = 20; //// edit the range to change how many frames a fade takes
    frameRate(10);  //// set frameRate to control seconds - 20 lerp / 10fps = 2 second fades
}
void draw(){
    if(lerpCount > 0){
      //// mix colors
      background(lerpColor(colorArray[currentColor], colorArray[lastColor], (1/(lerpRange/lerpCount))));
      lerpCount = lerpCount - 1; //// count down steps to new color
    } else {
      background(colorArray[currentColor]);
    }

    //// display the last and current colors -- this is for inspection, not needed for lerp
    fill(colorArray[lastColor]);
    rect(0, 0, width*.1, height*.1);
    fill(128,128,128);
    text("LAST", width*.025, height*.05);
    fill(colorArray[currentColor]);
    rect(width*.1, 0, width*.1, height*.1);
}
void keyReleased(){
    lastColor = currentColor;
    while (lastColor == currentColor)
    currentColor = (int) random(colorArray.length);
    lerpCount = lerpRange; //// begin countdown
}

KevinWorkman

Please link between crossposts.

Note that this question has an answer here: http://stackoverflow.com/questions/39603472/color-change-a-background-in-processing-w-out-affecting-particles