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

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

Answers

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

    http://pastebin.com/7pYiCAeS

  • edited September 2016

    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
    }
    
Sign In or Register to comment.