CODEWITHSUNDEEP
algorithmcolorsrange
Tom Gullen
Tom Gullen

Reputation: 61729

Display colours algorithmically instead of hard defining values

Given a ping in ms, is there any way to algorithmically work out the shading we can make this ping without hard coding the ifs and colours? IE this function works well:

function displayPing(lngThePingTime)

    response.Write("<span style=""font-wight:bold;color:")  

    if(lngThePingTime < 50) then
        response.Write("#77ff66")
    elseif lngThePingTime < 100 then
        response.Write("#22ee00")
    elseif lngThePingTime < 150 then
        response.Write("#33bb00")
    elseif lngThePingTime < 250 then
        response.Write("#ffaa00")
    elseif lngThePingTime < 400 then
        response.Write("#ee6600")
    elseif lngThePingTime < 550 then
        response.Write("#dd4400")
    elseif lngThePingTime < 700 then
        response.Write("#dd1100")
    elseif lngThePingTime < 1000 then
        response.Write("#990000")
    else
        response.Write("#660000")
    end if

    response.Write(""">")    
    response.Write lngThePingTime        
    response.Write("</span>")

end function

But is there any way of having an algorithm that says:

Lowest Colour : #77ff66
Highest Colour: #660000
Cutoff Value: 1500 (any ping higher than this is fixed to highest colour)

So that the colour will be every shade not a set of fixed shades?

Language doesn't matter, more interested in the method!

Upvotes: 1

Views: 131

Answers (1)

Nick Fortescue
Nick Fortescue

Reputation: 44153

Colours are a multidimensional space, so you have to choose how your interpolation is done. Unusally just drawing a "straight" line with RGB as dimensions doesn't work very well.

One easy way is to use HSB/V/L color space. Many modern programming languages will automatically convert into this space, for example see the [java Color methods][2]. Otherwise the maths isn't too hard. The wikipedia article explains it.

I've had the situation where this didn't do what I wanted - for example I wanted a traffic light style "go from red to green via amber". In this case I used the following code, which was "good enough". As you can see, I took advantage of knowing a bit about the relationship between the RGB and the colour. This is not as configurable as you might want, but gives an example of the sort of method you could use:

private static int makeTrafficLight(float fraction, int brightness) {
    final float orange = 0.4f;
    if(fraction < orange) {
            int r = brightness;
            float f = fraction/orange;
            int g = (int)(brightness*(f/2.0f));
            int b = 0;
            return Color.rgb(r,g,b);
    } else {
            float f = ((fraction-orange)/(1.0f-orange));
            int r = (int)(brightness*(1.0f-f));
            int g = (int)(brightness*(f/2.0f+0.5f));
            int b = 0;
            return Color.rgb(r,g,b);
    }
}

[2]: http://download.oracle.com/javase/1.4.2/docs/api/java/awt/Color.html#HSBtoRGB(float, float, float)

Upvotes: 2

Related Questions