2

I want to render color gradient that start from one side to another. In the figure as you can see, the color gradients start from minimum bounding box to maximum bounding box. The code is below.

Point c = (VERTICES[i] - min) / (max - min);
p_COLOR[i].setRGB(c.red, c.green, c.blue);

enter image description here

Here the issue is, the color gradient is not following any direction (for example down to up: down side has two colors red and bluish purple). But I need to apply gradient that start from -x to x OR -y to y OR -z to z, means if red color start from -y then only red color covers -y side area then by moving gradient from -y to y, increment the color with red after blue then green then yellow etc. There should not be red and bluish purple at down side, there must be only red then moving upward to blue then green and so on.

how can I do that ? what would be the equation ?

maxpayne
  • 1,111
  • 2
  • 21
  • 41
  • Might want to look into the [HSV color space](http://en.wikipedia.org/wiki/HSL_and_HSV), and defining your gradient as the hue. That sounds like it would fit this description better than RGB. The equations are a little complex though. – Tim Sep 26 '12 at 07:50
  • May this helps you: http://stackoverflow.com/questions/10361569/android-opengl-es-gradient-background – Bruno Bieri Sep 26 '12 at 10:39
  • thanks @Tim I have converted and make a list of HSL colors. for(int i=0; i – maxpayne Sep 27 '12 at 05:33

1 Answers1

2

Your solution is very simple, yet very limited. You should only use one component of your VERTICES struct (I assume VERTICES[i] holds position of the current vertex) if you want the gradient to apply across only one axis. Split your code into two parts:

The gradient function

vec3 Gradient (float param) 
{
    param = clamp(param, 0, 1);

    // we are treating these colors as HSL now:
    vec3 ColorA (0, 0.5, 0.5);
    vec3 ColorB (1, 0.5, 0.5);

    // so now we need to convert them to plain old RGB
    // note how the blending equation remains the same
    return HSL2RGB(param * ColorA + (1-param) * ColorB); // simple blending equation
}

The coloring function

float c = ((VERTICES[i] - min) / (max - min)).x; // or y,z
p_COLOR[i].setRGB(Gradient(c));

The shaders are in normal GLSL, so please excuse my ignorance in ES.

Bartek Banachewicz
  • 38,596
  • 7
  • 91
  • 135
  • Thanks @Bartek, your code works fine. but it draws gradient with just two colors (colorA and colorB). but i want to draw gradient with four colors. R G B Y. i used this method to convert HSL2RGB and make a list of colors in temp. for(int i=0; i – maxpayne Sep 26 '12 at 19:03
  • 1
    You don't need a list. I've added `HSL2RGB` (I assume it itself works correctly) – Bartek Banachewicz Sep 27 '12 at 09:26
  • now it works perfectly. Thanks. Could you please give me an idea how can I remove one color from the gradient. I want to remove pink color from the gradient. Total colors will be 4 or 5 not six. When I remove one color from HSL2RGB function, removed color area transform into black with no color. I want that the removed color area should be filled by previous color, and gradient look fine with 4 colors. Thanks. – maxpayne Sep 27 '12 at 16:22
  • You could upvote/accept my answer, just saying. What you are asking now is kind of more complicated. Try fiddling with the `Gradient` function and `ColorA`/`ColorB`; I don't want to be harsh, but I've already put about an hour of my time into this answer. – Bartek Banachewicz Sep 27 '12 at 16:45
  • 2
    @furqan: If you have another problem, post another question. – Puppy Sep 27 '12 at 16:45
  • Thanks for your precious time. – maxpayne Sep 27 '12 at 18:51