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. 
code is always welcome!
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
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.