background gradient

Hi everyone,
as a beginner I have some basic questions regarding OF
here it is one:
how I can set a gradient background of my window…
or how I can customize the background…
let say I want to have an animated water background?
besides the importing video

to set a gradient background, you’ll have to create it manually.

there’s a couple of ways to do this. you could create a new ofImage on setup(), fill it with your gradient, and draw it each frame before drawing anything else. or, if you’re feeling fancy, you could create a quad that fills the whole screen using OpenGL, and set different vertex colours for the top and bottom points, so that OpenGL itself does the gradient for you:

// draw a quad that fills the whole screen, that is red at   
// the top and blue at the bottom  
glColor3f( 1.0f, 0.0f, 0.0f );  
glVertex3f( 0.0f, 0.0f, 0.0f );  
glVertex3f( ofGetWidth(), 0.0f, 0.0f );  
glColor3f( 0.0f, 0.0f, 1.0f );  
glVertex3f( ofGetWidth(), ofGetHeight(), 0.0f );  
glVertex3f( 0.0f, ofGetHeight(), 0.0f );  

either way will work.

as for animated water, you’ll need to do that by hand as well. it depends what you mean by ‘water’ but there’s a tonne of info out there, just google it. in particular if you can find some Java code to do it will be a straightforward task to port it to C++.


also, an alternative is to load in an image, and draw it full screen. Since textures are bilinearly interpolated, it can even be smaller then the screen size and scaling it doesn’t effect too much (I’ve drawn 320x240 and 640x480 fullscreen without feeling pain).

fullscreen drawing is done by using the ofImage.draw(x,y,w,h), as in:

myImage.draw(0,0,ofGetWidth(), ofGetHeight());  

the nice thing about that, in contrast to using a gradient from opengl, is that you can add noise to the image, or making the gradient non linear (I’ve used circular gradients, for example), which can help in certain situations. For example, some projectors / monitors have banding with gradients, and they work much better with a noisy image.

Another thing my partner golan and I have done is use some very large soft edged quads moving in the background sinusoidally (lisajous, actually), very slowly. We call this effect “rothko” there are some performance penalties, but it can wind up looking very much like water and the scene becomes alot less flat.

take care!



i hope it is ok to refresh this old topic.
my question is also about gradients.

i try to do gradients in the opengl way. this works really great and it is very fast. know i am searching for a way to make linear multicolor gradients, but opengl is making crazy things with its vertex colors. check out the following code:

    glVertex3f(0, 0,0);   
    glVertex3f( 0,halfheight,0);  
    glVertex3f(0, height,0);      
    glVertex3f( width, height,0);   
    glVertex3f( width,halfheight,0);   
    glVertex3f( width,0,0);   

can someone explane me how opengl handles the colors?
first i thought every vertex gets an color. then i thought the lines between the vertex must have the same color. but all of this is wrong.

all i get from the above code is a not really symetrical gradient.

maybe i describe it a bit more and show an example:

it should look like this.

i thought i have to set 3 colors and then color the vertexes

c1 c1
| |
c2 c2
| |

but this dont works.
where is the mistake within my thinking.

or is this only possible by using a texture?

No this is definitely possible with OpenGL and most likely much faster than using a texture (unless you need to, as Zach pointed out).

At a glance your code looks ok, except what happens when you use GL_QUADS instead of GL_POLYGON?

does GL_QUADS supports more than 4 vertexes? or is it possible to color a quad in a different way? for more than two colors i need more vertex points, am i right?

try a quad strip:

    glVertex3f(0, 0,0);  
    glVertex3f( width,0,0);  
    glVertex3f( 0,halfheight,0);  
    glVertex3f( width, halfheight,0);  
    glVertex3f( 0, height,0);  
    glVertex3f( width, height,0);  

1 Like

hey memo, thank you verry much. thats it. i thought about doing 3 quads behind each other, but overlooked that opengl has a better way where it shares the verteces.

you helped me allot again.

Nice thread guys - its been very helpful. I have another question though.

Zach mentioned “soft edged” quads moving in the background to make a fluid looking and dynamic background… What is the easiest way to produce soft edged quads? Do I need to write a shader or is there a simpler method that I am overlooking?

Any help would be appreciated!