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
gradient

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 https://thebookofshaders.com/

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.addColor(edge);

mesh.addVertex(rightTop); //vertex 2
mesh.addColor(edge);

mesh.addVertex(leftCenterTop); //vertex 3
mesh.addColor(center);

mesh.addVertex(rightCenterTop); //vertex 4
mesh.addColor(center);

mesh.addVertex(leftCenterBottom);  //vertex 5
mesh.addColor(center);

mesh.addVertex(rightCenterBottom); //vertex 6
mesh.addColor(center);

mesh.addVertex(leftBottom);  //vertex 7
mesh.addColor(edge);

mesh.addVertex(rightBottom);  //vertex 8
mesh.addColor(edge);

mesh.setMode(OF_PRIMITIVE_TRIANGLE_STRIP);

}

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.

2 Likes

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