View more

View more

View more

### Image of the Day Submit

IOTD | Top Screenshots

### The latest, straight to your Inbox.

Subscribe to GameDev.net Direct to receive the latest updates and exclusive content.

# Creating a Linear Gradient with Java for a drop down menu

Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

8 replies to this topic

### #1Hankenstien  Members

Posted 05 August 2014 - 12:56 PM

I have been playing around with creating a UI in Java's awt class.  I made a drop down menu that animates open and close when hovering.  Right now I have a linear gradient that runs from the top of the drop down to the bottom and I don't like the look of it.  I want the gradient to still go from top to bottom, but each Rectangle2D in the menu should have a solid color of that gradient.  I want to use a for loop to progress throught the menu's rectangles and fill each with a slowly darkening/lightening shade of the first color or maybe slowly progress from one color to another.

Something like this is what I was thinking but the color seem to jump from dark to light and its not a smooth transition.

int tempColor = 0x0000ff;

for(int i = 0; i < rectList.size(); i++){
tempColor -= (i * 10);// if I was wanting a red transition I think I might multiply by 10000
g.setColor(tempColor);
g.fill(rectList.get(i));//fills with new gradient color
g.setColor(Color.black);
g.draw(rectList.get(i));//border
}

On a side note this is the first time I have ever asked for help online, but thought I would give it a try.  Any help would be appreciated.

### #2Glass_Knife  Moderators

Posted 05 August 2014 - 02:02 PM

It is a common mistake when trying to interpolate a color encoded in a 32bit value to just adjust the value.  But that doesn't work (as you have found out).

1.  Use the Color( float, float, float ) constructor that takes values from 0.0 - 1.0, and perform your linear interpolation on each value separately.

2.  Keep a different integer for each red, green, and blue component, clamped between (0, 255), and then OR them together to create the final color.
int color = 0xFF << 24 | red << 16 | green << 8 | blue;  // the 0xFF is the alpha value.

I think, therefore I am. I think? - "George Carlin"
My Website: Indie Game Programming

My Book: http://amzn.com/1305076532

### #3Hankenstien  Members

Posted 05 August 2014 - 02:11 PM

Thanks a lot Glass_Knife!  It works great!

### #4Chris_F  Members

Posted 05 August 2014 - 04:55 PM

If banding is noticeable you might want to consider adding a simple random dither to it.

### #5Waterlimon  Members

Posted 05 August 2014 - 05:13 PM

I did something like that once and faced an additional problem. Something to do with "gamma correction".

Basically even if the numbers were linear (as in 0.1, 0.2, 0.3), the actual color produced didnt look like it brightened in linear steps.

So what I did, was take the linearly interpolated value (between 0 and 1!) and take the square root of it (actually you should do pow(value, 1.0f/2.2f) but I found square root to be close enough for my purposes) and use that instead

so see if it looks any better if you use

Color(sqrt®,sqrt(g),sqrt(b)) instead of Color(r,g,b)

o3o

### #6Chris_F  Members

Posted 05 August 2014 - 05:17 PM

I did something like that once and faced an additional problem. Something to do with "gamma correction".

Basically even if the numbers were linear (as in 0.1, 0.2, 0.3), the actual color produced didnt look like it brightened in linear steps.

So what I did, was take the linearly interpolated value (between 0 and 1!) and take the square root of it (actually you should do pow(value, 1.0f/2.2f) but I found square root to be close enough for my purposes) and use that instead

so see if it looks any better if you use

Color(sqrt®,sqrt(g),sqrt(b)) instead of Color(r,g,b)

Gamma correction isn't necessary unless you really desire a linear gradient. Gradients in Photoshop, for example, are not linear.

### #7Hankenstien  Members

Posted 05 August 2014 - 05:40 PM

If banding is noticeable you might want to consider adding a simple random dither to it.

do you mean just a random float that is less than what i subtracted added back into the amount or just subtracting a random float from the value to get the new value?

### #8Chris_F  Members

Posted 05 August 2014 - 06:57 PM

If banding is noticeable you might want to consider adding a simple random dither to it.

do you mean just a random float that is less than what i subtracted added back into the amount or just subtracting a random float from the value to get the new value?

Normally you would use floor(value * 255.0f + 0.5f) to convert your [0, 1] value to a 24-bit image. Instead use floor(value * 255.0f + random), where random is a float in the range [0, 1]. You can see the effect this has here.

### #9Hankenstien  Members

Posted 05 August 2014 - 08:05 PM

If banding is noticeable you might want to consider adding a simple random dither to it.

do you mean just a random float that is less than what i subtracted added back into the amount or just subtracting a random float from the value to get the new value?

Normally you would use floor(value * 255.0f + 0.5f) to convert your [0, 1] value to a 24-bit image. Instead use floor(value * 255.0f + random), where random is a float in the range [0, 1]. You can see the effect this has here.

Thanks Chris this explains a lot with problems I have been having.

Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.