Tween color gradient over time

I’ve seen a few times where gradient backgrounds animate/tween over time through different colors. Does anyone have an example of doing this?

I’ve tried it before using a texture, but I could figure out how to go through all the hues. Any code or hints to try this?

testApp.h

  
#pragma once  
  
#include "ofMain.h"  
  
class testApp : public ofBaseApp{  
  
	public:  
		void setup();  
		void update();  
		void draw();  
  
		void keyPressed  (int key);  
		void keyReleased(int key);  
		void mouseMoved(int x, int y );  
		void mouseDragged(int x, int y, int button);  
		void mousePressed(int x, int y, int button);  
		void mouseReleased(int x, int y, int button);  
		void windowResized(int w, int h);  
		void dragEvent(ofDragInfo dragInfo);  
		void gotMessage(ofMessage msg);  
  
		unsigned long last;  
		int counter;  
		ofColor col;  
  
};  
  

testApp.cpp

  
#include "testApp.h"  
  
//--------------------------------------------------------------  
void testApp::setup(){  
    last = ofGetElapsedTimeMillis();  
    col.setHsb(0,255,255);  
}  
  
//--------------------------------------------------------------  
void testApp::update(){  
    ofBackground(col);  
    if(ofGetElapsedTimeMillis() - last > 50)  
    {  
        col.setHue(counter % 256);  
        counter ++;  
        last = ofGetElapsedTimeMillis();  
    }  
}  
  
//--------------------------------------------------------------  
void testApp::draw(){  
  
}  
  
//--------------------------------------------------------------  
void testApp::keyPressed(int key){  
  
}  
  
//--------------------------------------------------------------  
void testApp::keyReleased(int key){  
  
}  
  
//--------------------------------------------------------------  
void testApp::mouseMoved(int x, int y ){  
  
}  
  
//--------------------------------------------------------------  
void testApp::mouseDragged(int x, int y, int button){  
  
}  
  
//--------------------------------------------------------------  
void testApp::mousePressed(int x, int y, int button){  
  
}  
  
//--------------------------------------------------------------  
void testApp::mouseReleased(int x, int y, int button){  
  
}  
  
//--------------------------------------------------------------  
void testApp::windowResized(int w, int h){  
  
}  
  
//--------------------------------------------------------------  
void testApp::gotMessage(ofMessage msg){  
  
}  
  
//--------------------------------------------------------------  
void testApp::dragEvent(ofDragInfo dragInfo){  
  
}  
  

do you mean this?

Wow thanks! I’m not on 007 so I didn’t have the new ofColor stuff. I tried this though and it’s great. I’m wondering how I could go one step further and make it a linear or radial gradient. So maybe it’s starts at a gradient of red to blue and then stars the shift? Would I need to use a texture for that (since ofBackground is just for 1 color)?

yes, I would do it in that way. fill a array of pixels with colors, put it in a texture and draw it.

Thanks, I figured out a way close enough. I can post the code later for anyone else. What you did helped a lot. :slight_smile:

code is always welcome! :slight_smile:

So instead of a texture, I used openGL (which I hear is probably faster than drawing a texture). This draws a square with 4 different colors in each corner that fade between them. I think in OF 007 there’s functions for the color/vertices calls using ofVbo, but I’m not on 007 yet.

  
  
	unsigned long last;  
	int counter;  
	ofColor col;	  
	ofColor col2;	  
	ofColor col3;  
	ofColor col4;  
  
	void setup(){  
		  
		last = ofGetElapsedTimeMillis();  
		col.setHsb(0,255,255);  
		col2.setHsb(0,255,255);  
		col3.setHsb(0,255,255);  
		col4.setHsb(0,255,255);  
		counter = 0;		  
	};  
	  
  
void update(){  
		  
		if(ofGetElapsedTimeMillis() - last > 50){  
			  
			col.setHue(counter % 256);  
			col2.setHue((counter + 60) % 256);  
			col3.setHue((counter + 120) % 256);  
			col4.setHue((counter + 180) % 256);  
			counter += 1;  
			last = ofGetElapsedTimeMillis();			  
		}		  
	};  
	  
	void draw(){		  
	  
//the points to draw 2 - fullscreen rectangle  
		const GLfloat vertices[] = {  
			0, 0,  
			ofGetWidth(), 0,  
			0, ofGetHeight(),  
			ofGetWidth(), ofGetHeight(),  
		};  
  
//the colors to map to the vertices		  
		const GLubyte colors[] = {  
			col.r, col.g, col.b, 120,  
			col2.r, col2.g, col2.b, 120,  
			col3.r, col3.g, col3.b, 120,  
			col4.r, col4.g, col4.b, 120,  
		};  
		  
//draw the vertices with color   
		glVertexPointer(2, GL_FLOAT, 0, vertices);  
		glEnableClientState(GL_VERTEX_ARRAY);  
		glColorPointer(4, GL_UNSIGNED_BYTE, 0, colors);  
		glEnableClientState(GL_COLOR_ARRAY);  
		glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);  
  
//reset	  
		glDisableClientState(GL_VERTEX_ARRAY);  
		glDisableClientState(GL_COLOR_ARRAY);  
}  

old thread. but a nice one :slight_smile:

I played a bit with background & gradient.
It works fine.

I have an issue while I’m trying to draw something in the foreground (over the gradient, I mean)
Indeed, even if I’m drawing just a little circle, the whole screen seems a bit unsaturated (on a color point of view)
basically, it means a global rect with a medium alpha seems to be drawn…

I tried to ofPushStyle / ofPopStyle but it didn’t fix it.

any leads or clues I could check ?

I don’t like to let my problems solved with no personal answer.

Here, I just forgot to check the gradient generation which had an alpha of 120 …
What is strange was that alpha artifact only appeared when I begin to draw something over the gradient.

this is very interesting, since most alpha blending solution in the forum involve some sort of shader.

i am mainly interested in using this to adjust the alpha of an image. mainly blending the edges of the image.

how would i be able to define a custom amount of vertices, in order to set a strip on the left and right of an image; i.e. for edge blending purposes.

thanks.