Jump to content
  • Advertisement
Sign in to follow this  
xtr33me

Math to create color palette

This topic is 2591 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I have been playing with interpolation on this but can't seem to get this working right. What I want to do is be able to create color palletes by setting my own ranges for the colors and values. Say my palette goes from 0-100. and I want to set 0-93 as my range, have 93 be Dark Green and set 5 stops along the range of values. Then 94-96 as yellow with 2 stops and 97 to 100 as 3 stops with a color of red. I am tryign to create a heatmap of sorts where the developer will be able to create these palletes easily on startup and then I will write a method that will search through the palette for the value passed and return the Html color.


I had no problem doing the interpolation when my range was from 0 - 100 and passing some value. However now that I am trying to set these ranges my html color codes are always returning the same code. Anyone have any ideas? Thanks!

public static String GetInterpolatedColor(HeatMapColors minColor, HeatMapColors maxColor, Decimal currentValue, Decimal minValue = 0m, Decimal maxValue = 100.0m)
{
//Assign our hexMaxcolor the hex value for the color passed in
var hexMinColor = GetHeatMapColorHexVal(minColor);
var hexMaxColor = GetHeatMapColorHexVal(maxColor);

//Calc our ratio
var ratio = currentValue / maxValue ;
var nRatio = 1.0m - ratio;

//Perform interpolation between white and the color passed in
Color temp = Color.FromArgb((int) Math.Round((ratio*hexMinColor.R) + (nRatio*hexMaxColor.R)),
(int) Math.Round((ratio*hexMinColor.G) + (nRatio*hexMaxColor.G)),
(int) Math.Round((ratio*hexMinColor.B) + (nRatio*hexMaxColor.B)));
var retVal = ColorTranslator.ToHtml(temp);

return retVal;
}


Share this post


Link to post
Share on other sites
Advertisement
I had no problem doing the interpolation when my range was from 0 - 100 and passing some value. However now that I am trying to set these ranges my html color codes are always returning the same code. Anyone have any ideas? Thanks! [/quote]
Did you use the same method in your example when you changed the ranges? Or did you rewrite? I'm not a Java expert, but I suspect there is a floating point truncation problem somewhere. Check the intermediate results enclosed within the Math.Round() statements.

Share this post


Link to post
Share on other sites

I had no problem doing the interpolation when my range was from 0 - 100 and passing some value. However now that I am trying to set these ranges my html color codes are always returning the same code. Anyone have any ideas? Thanks!

Did you use the same method in your example when you changed the ranges? Or did you rewrite? I'm not a Java expert, but I suspect there is a floating point truncation problem somewhere. Check the intermediate results enclosed within the Math.Round() statements.
[/quote]

The rounding I'm getting is acceptable. It is just truncating and the amount of loss is minimal. The problem is I don't know how to use the minValue in my equation. The method shown only works on a 0 to 100 scale. I was trying a number of things to try and have it calculate the interp colors between the ranges passed in but I removed all that cause i felt it was jsut adding confusion to the question. At the same time I didn't include all the code I just realized and I'm sorry for that. I beleive the issue is in the code that I posted but to build the palette I am using the code below, or should I say it was the approach I was taking. :)

public void AddPaletteEntry(Decimal colorStartVal, Decimal colorEndVal, Int32 numTotalColorStops, HeatMapColors startHeatColor, HeatMapColors endHeatColor)
{
//Get how many color stops we need between colors
var inc = (colorEndVal - colorStartVal)/numTotalColorStops;

for (var i = colorStartVal; i <= colorEndVal; i += inc )
{
var clr = CellData.GetInterpolatedColor(startHeatColor, endHeatColor, i, colorStartVal, colorEndVal);
StopPoints.Add(new HeatMapPaletteEntry(i, i+inc, clr));
}
}




Share this post


Link to post
Share on other sites
So after looking at this closer, the proper way was to simply subtract my minValue from both num and denom when calculating the ratio and it worked.

public static String GetInterpolatedColor(HeatMapColors minColor, HeatMapColors maxColor, Decimal currentValue, Decimal minValue = 0m, Decimal maxValue = 100.0m)
{
//Assign our hexMaxcolor the hex value for the color passed in
var hexMinColor = GetHeatMapColorHexVal(minColor);
var hexMaxColor = GetHeatMapColorHexVal(maxColor);

//Calc our ratio
var ratio = (currentValue-minValue) / (maxValue - minValue) ;
var nRatio = 1.0m - ratio;

//Perform interpolation between white and the color passed in
Color temp = Color.FromArgb((int)Math.Round((ratio * hexMaxColor.R) + (nRatio * hexMinColor.R)),
(int)Math.Round((ratio * hexMaxColor.G) + (nRatio * hexMinColor.G)),
(int)Math.Round((ratio * hexMaxColor.B) + (nRatio * hexMinColor.B)));

var retVal = ColorTranslator.ToHtml(temp);

return retVal;
}


Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!