CODEWITHSUNDEEP
colorsluahexrgbpercentage
Eli Bell
Eli Bell

Reputation: 247

Lua: color fading function

I'm trying to create a function that inputs two RGB colors and a percentage then returns a color in-between the two based off of the percentage.

I found the Dec2Hex function somewhere online and figured it would be useful.

Right now I have tried:

function Dec2Hex(nValue) -- http://www.indigorose.com/forums/threads/10192-Convert-Hexadecimal-to-Decimal
    if type(nValue) == "string" then
        nValue = String.ToNumber(nValue);
    end
    nHexVal = string.format("%X", nValue);  -- %X returns uppercase hex, %x gives lowercase letters
    sHexVal = nHexVal.."";
    if nValue < 16 then
        return "0"..tostring(sHexVal)
    else
        return sHexVal
    end
end

function fade_RGB(colour1, colour2, percentage)
    r1, g1, b1 = string.match(colour1, "#([0-9A-F][0-9A-F])([0-9A-F][0-9A-F])([0-9A-F][0-9A-F])")
    r2, g2, b2 = string.match(colour2, "#([0-9A-F][0-9A-F])([0-9A-F][0-9A-F])([0-9A-F][0-9A-F])")
    r3 = (tonumber(r1, 16)/tonumber(r2, 16))*(percentage)
    g3 = (tonumber(g1, 16)/tonumber(g2, 16))*(percentage)
    b3 = (tonumber(b1, 16)/tonumber(b2, 16))*(percentage)
    return "#"..Dec2Hex(r3).. Dec2Hex(g3)..Dec2Hex(b3)
end

I think I'm headed in the right direction but the math isn't right and I can't figure out how to fix it. Thanks in advance!

Upvotes: 2

Views: 2225

Answers (2)

Tim Tom
Tim Tom

Reputation: 809

No Name's answer is almost right, but he's not merging the two colors based on the percentage.

What you instead want is to do a linear interpolation of the two values (though know that human vision/light wise this isn't how interpolating colors works, but a lot of libraries do it this way because it is easy and works for simple cases).

r3 = tonumber(r1, 16)*(100-percentage)/100.0 + tonumber(r2, 16)*(percentage)/100.0

As you may notice multiplying and dividing the percentages by 100 is kind of tedious, so you may want to pass it in already divided.

Upvotes: 3

No Name
No Name

Reputation: 131

If I'm right, the line

r3 = (tonumber(r1, 16)/tonumber(r2, 16))*(percentage)

should be

r3 = math.abs(tonumber(r1, 16) - tonumber(r2, 16))*(percentage/100)

The other similar lines follow the same concept.

EDIT:

r3 = math.min(tonumber(r1, 16), tonumber(r2, 16)) + 
    math.abs(tonumber(r1, 16) - tonumber(r2, 16)) * (percentage/100)

should yield red for fade_RGB("#FF0000", #0000FF, 0) and blue for fade_RGB("#FF0000", #0000FF, 100).

Upvotes: 1

Related Questions