Make a gradient a>b>a

Hi Everyone,
I’m trying to make a series of long stripes with a complex gradient along the length. lets say from black to red to black again. I’m trying to use ofMesh, and coloring the vertices. I’m really at a loss trying to figure out how to color the center of the strip. ie. how to add a center row of vertices to add the center color and/or what winding method to use. Is there a simple way to do this?
thanks chris

Hi, using a shader would be way much simpler.
take a look at the shaders examples. I think there is one that does a simple gradient from which you can extend.
If you need to, read the excelent

Maybe this might help as well, not sure

HI Roy,
Thanks for this. I’m always scared to jump into shaders. Seems to me such a different way of thinking. But I’ll look into the Book. I’ll also check out ofxColorGradient. In the end I made a GradientStrip class using an ofMesh of 8 vertices that allowed me to set the height of the gradient edges as well as the height of the center band. Code is here , maybe it helps someone and picture of what I was going for . 100 gradient strips, different colors, different heights, with a fade to black. For here it was easy to write an update function to slide the strips up and down the screen.

I wonder if i could have done that with shaders… Since I always thought with shaders I have to come up with a formula for a whole screen. As opposed to a hundred independent strip objects that I can move independently like I have here.

test.cpp (1.3 KB)

thanks again, chris.

ahh that button uploads a file. I wanted to copy the code… here

//This is for a strip that goes the widht of the screen
//once I have the leftTop and rightTop of the strip
//I can generate the other vertices by adding edge height and center height
// as well as edge color and center color.

void GradientStrip::generateMesh(){
auto leftCenterTop =leftTop + glm::vec3(0,edgeHeight,0); //
auto rightCenterTop =rightTop + glm::vec3(0,edgeHeight,0);

auto leftCenterBottom =leftCenterTop + glm::vec3(0,centerHeight,0);
auto rightCenterBottom =rightCenterTop + glm::vec3(0,centerHeight,0);

auto leftBottom =leftCenterBottom + glm::vec3(0,edgeHeight,0);
auto rightBottom =rightCenterBottom + glm::vec3(0,edgeHeight,0);

mesh.addVertex(leftTop); //vertex 1

mesh.addVertex(rightTop); //vertex 2

mesh.addVertex(leftCenterTop); //vertex 3

mesh.addVertex(rightCenterTop); //vertex 4

mesh.addVertex(leftCenterBottom);  //vertex 5

mesh.addVertex(rightCenterBottom); //vertex 6

mesh.addVertex(leftBottom);  //vertex 7

mesh.addVertex(rightBottom);  //vertex 8



I think doing it in mesh as you’ve done is totally valid ! (and I do gradients often using a mesh with colored vertices),

shaders may allow you more flexibility – for example, to add more colors you need to add more vertices when you do a mesh, but in a shader you can use a math function (like cos / sin) or even write the code for a multi-stop linear gradient.

in case it’s helpful, there are a few shader examples in this repo

shaderExample1, 2, 3 – which may be helpful. The first one colors a rectangle based on the distance from the mouse.


yes thats helpful, thanks a lot, actually there’s a lot in this repository, that sparks my interest. thanks.