ofSetColor : how change color gradually/slowly?

Hello,
I would like to change the color of an image from one to another gradually, making some kind of slow transition effect.
I’m using ofSetColor to set the color, e.g. yellow, and then I want to make a transition to another color, e.g. green.
Does anyone know how to do this?

Thank you in advance!

There are several ways you could do this. They way I would recommend that has the smoothest color shifting is using ofColor’s lerp( ofColor c , float lerpAmount ) function

Which you might use like so :

  
  
ofColor red = ofColor ( 255 , 0 , 0 ) ;   
ofColor blue = ofColor ( 0 , 0 , 255 ) ;   
  
ofColor inBetween = red.lerp( blue , 0.5f ) ; // returns a color halfway between red and blue  
  

The last argument is the interpolate distance between 0.0 and 1.0
For a smooth transition overtime you could try using timers or tweening classes to get the behavior you want.

Using ofxTweenzor for instance you could call :

  
  
float lerpAmount = 0.0f ;   
Tweenzor::add ( &lerpAmount , lerpAmount, 1.0f , 0.0f , 1.0f , EASE_OUT_QUAD ) ;  
  

and if we are using the red and blue ofColor’s from up above …

  
  
  
void testApp::draw( )   
{  
ofColor lerpColor = red.lerp( blue , lerpAmount ) ;   
ofSetColor (  lerpColor )   
ofRect ( 0 , 0 , 50 , 50 ) ;    
}  
  

And you will see the transition over 1 second from red to blue.

You can also try using hexadecimal values but those tend to to create strange colors in between instead of a smooth transition.

Thank you for your reply!
I tried to do exactly what you said, using the ofxTweenzor addon, but I can’t get the transition. I also tried to change the parameters of “Tweenzor::add” but nothing happen.
I followed the example code in the ofxTwwnzor example folder but I can’t get the transition, the color remain the same.

That’s my code:

  
  
void testApp::setup() {  
	ofSetFrameRate(60);	  
	Tweenzor::init();  
        onComplete(200);  
}  
  
void testApp::onComplete(float args) {  
    ofColor red = ofColor(255, 0, 0);  
    ofColor green = ofColor(0, 255, 0);  
  
    float lerpAmount = 0.0f;  
    Tweenzor::add(&lerpAmount, lerpAmount, 1.0f, 0.0f, 1.0f, EASE_OUT_QUAD);  
    GR_lerpColor = green.lerp(red, lerpAmount); //ofColor type   
    Tweenzor::getTween(&lerpAmount)->addListener((int)Tween::COMPLETE, this, &testApp::onComplete);  
}  
  
void testApp::update(){  
    Tweenzor::update();  
}  
  
void testApp::draw() {  
	ofSetColor(GR_lerpColor);  
        ...  
        ...  
  

It looks like you need to include the current time in Milliseconds for the Tweenzor::update() call

  
  
  
Tweenzor::update( ofGetElapsedTimeMillis() ) ;   
  
  

should do the trick.

Thank you Ben! I solved.
That’s what I’ve done:

  
  
void testApp::setup() {    
       ofSetFrameRate(60);  
       Tweenzor::init();    
       lerpAmount = 255.f;  
       Tweenzor::add(&lerpAmount, 0.f, 255.f, 0.f, 2.f);  
       Tweenzor::getTween(&lerpAmount)->setRepeat(-1, true);  
}  
  
void testApp::update(){  
       Tweenzor::update(ofGetElapsedTimeMillis());  
}  
  
void testApp::draw() {    
    ofSetColor(lerpAmount, 0, 0);  
}  
  

this makes me get a repeated transition from red to black and vice versa.
Thank you!