Color to Color smooth transition.

[suicidalkatt]

I've been working on a function to allow me to transition one color to another.

It does its job with some additional effects but I'm wondering if there are some alternatives to my method that may do a slightly better job.

The only major downside to my function here is if the colors can cancel out and have a white or grey at the 50% region.

local function ColorFunction(l, h, lc, hc, ilvl)
    -- l here is the lower limit
    -- h here is the higher limit
    -- lc is the lower limit color table {value1,value2,value3} between 0 and 1
    -- hc is the higher limit color table
    -- ilvl is just a value in-between the limits that determines the color
    if ilvl <= l then
        return unpack(lc)
    elseif ilvl >= h then
        return unpack(hc)
    else
        local p = (ilvl-l)/(h-l) -- percent of the input
        local r,g,b = 1,1,1
        -- Red
        if hc[1] <= lc[1] then -- if the higher color's red value is lower then the lower color's red value
            local v = lc[1] - hc[1] -- find the value range
            r = lc[1] - (v*p) -- red equals the lower red value minus the percentage of the value range.
        else
            local v = hc[1] - lc[1] -- find the value range
            r = lc[1] + (v*p) -- red equals the lower red value plus the percentage of the value range.
        end
        -- Green
        if hc[2] <= lc[2] then
            local v = lc[2] - hc[2]
            g = lc[2] - (v*p)
        else
            local v = hc[2] - lc[2]
            g = lc[2] + (v*p)
        end
        -- Blue
        if hc[3] <= lc[3] then
            local v = lc[3] - hc[3]
            b = lc[3] - (v*p)
        else
            local v = hc[3] - lc[3]
            b = lc[3] + (v*p)
        end
        return r, g, b
    end
end

[zork]

Hmmm...here is what I would do.

--colorA - color table in RGB
--colorB - color table in RGB
--percentage of conversion of A to B (values from 0-1)
local function SmudgeColor(colorA, colorB, percent)
  local r, g, b = colorA.r-(colorA.r-colorB.r)*percent, colorA.g-(colorA.g-colorB.g)*percent, colorA.b-(colorA.b-colorB.b)*percent
  return {r=r,g=g,b=b}
end
 
local colorA = {r=1,g=0,b=0.5}
local colorB = {r=1,g=1,b=0}
local color = SmudgeColor(colorA,colorB,0.5)

But I think you are looking for sth else.

Red = 1,0,0
You can get all variants of red by mixing in white and black.
Adding white would add color values to red ranging from {0,0,0} to {1,1,1}. All values have a max of 1.
After that black comes into play. Depending on how dark the color should be the new color will get multiplied with the blackness ranging from {1,1,1} to {0,0,0}.

baseColor = 1,0,0
baseColor+White = 1,0.5,0.5 | +1*0,5
(baseColor+White)*Black = 0.5,0.25,0.25 | * 0.5

The blackness level of a color can be checked by looking at max(r,g,b). If the max is 1 then no black is applied. Once the blackness is removed the amount of white is min(r,g,b).

Calculating back to the base color is kind of tricky.

Lets do a quick example. (RGB in 0-255)

This is my color: RGB(87,56,78)
Blackness level is: max(r,g,b)/255=0.34
Removing the blackness = (87/0.34,56/0.34,78/0.34) = RGB(255,164,229)
The whiteness level is: min(r,g,b)/255 = 0.64
Now lets get to the actual base color. The lowest and the highest number will not be needed for this. One of this will always be 255. To get to the correct base color the whiteness has the be taken out.
The calculation for this is: 255-(255-229)/(1-0.64)
Thus the final base color is: (255,0,182)
Whitness: 0.64
Blackness: 0.34

That can be transfered into a new function. Because you are having the whiteness and blackness of a color you can apply percentages to them aswell.

Color transition is another issue.


If you want to go from {1,0,0} to {0,1,0} you cannot reduce the one value and increase the other. You have to go over {1,1,0} first. One extreme is going from red to aqua. because you go from {1,0,0} to {0,1,1}

Conclusion:
You have two colors that you want to morph on a percentage. First step is to calculate whiteness, blackness and baseColor for both colors. Next step is to decide on the color transition. Basically how should the two baseColors morph into each other. I probably would use an array for that. The array would have all colors in it. You then find both color indexes and the percentage values describes an index inbetween that is the new basecolor. You then apply the median of the whiteness and blackness values to the new basecolor and have your new final color.

[suicidalkatt]

Originally Posted by zork Hmmm...here is what I would do. ~ snip ~

I like it, makes a lot of sense.

[Dridzt]

I'm using a slightly modified version of the ColorGradient user function that's used in 99% of addons

local ColorGradient = function(perc, ...)
    local num = select("#", ...)

    if perc >= 1 then
        return select(num-2, ...), select(num-1, ...), select(num, ...)
    elseif perc <= 0 then
    	local r,g,b = ...
    	return r,g,b
    end

    num = num / 3

    local segment, relperc = modf(perc*(num-1))
    local r1, g1, b1, r2, g2, b2
    r1, g1, b1 = select((segment*3)+1, ...), select((segment*3)+2, ...), select((segment*3)+3, ...)
    r2, g2, b2 = select((segment*3)+4, ...), select((segment*3)+5, ...), select((segment*3)+6, ...)

    if not r2 or not g2 or not b2 then
        return r1, g1, b1
    else
        return r1 + (r2-r1)*relperc,
        g1 + (g2-g1)*relperc,
        b1 + (b2-b1)*relperc
    end
end

Used as ColorGradient(percent,r1,g1,b1, r2,g2,b2 [,r3,g3,b3]) where percent is between 0 - 1

[p3lim]

There's an own wiki entry about this:
http://www.wowwiki.com/ColorGradient

[Resike]

My question is how many decimals should the r, b, g, a values should have to use exactly the same color what the user picked.

[zork]

Regarding the color gradient calculation I probably would use a radial solution.



Red {1,0,0} = 0°
Yellow {1,1,0} = 60°
Green {0,1,0} = 120°
Aqua {0,1,1} = 180° or -180°
Blue {0,0,1} = 240° or -120°
Magenta {1,0,1} = 300° or -60°

Your two base colors will be on that ring and the smallest radius between the two points describes the pie that will be used for color extraction.

I think this can be achieved most easily by using a HSV conversion on the baseColor.
http://wowprogramming.com/docs/widge...ct/SetColorRGB
http://wowprogramming.com/docs/widge...ct/GetColorHSV

That will give you an angle, hue and saturation. You can then calculate a new angle and use the color selector to create a new basecolor.

---update---------------

Actually by thinking it through it may be possible to just use the hsv calculation. Not only do we get an angle, but we get saturation (whiteness) and value (blackness) all in one step.

Thus it is very easy to create a new point between two HSV colors. You just apply the conversion ratio on the HSV values of your two colors and create a new color based on the conversion.

[zork]

This should do it:

local colorA = {r=1,g=0.4,b=0}
local colorB = {r=0.5,g=0.8,b=1}
local colorC = {}
local percentage = 0.3
 
local colorSelector = CreateFrame("ColorSelect") or ColorPickerFrame
 
local function GetHsvColorByRgb(color)
  colorSelector:SetColorRGB(color.r, color.g, color.b)
  color.h, color.s, color.v = colorSelector:GetColorHSV()
  return color
end
 
local function GetRgbColorByHsv(color)
  colorSelector:SetColorHSV(color.h, color.s, color.v)
  color.r, color.g, color.b = colorSelector:GetColorRGB()
  return color
end
 
GetHsvColorByRgb(colorA)
GetHsvColorByRgb(colorB)
 
colorC.h = colorA.h-(colorA.h-colorB.h)*percentage
colorC.s = colorA.s-(colorA.s-colorB.s)*percentage
colorC.v = colorA.v-(colorA.v-colorB.v)*percentage
 
GetRgbColorByHsv(colorC)

If for whatever reason the ColorSelect does not want to play you can use the conversion formulas from Leaf or LibCrayon.
https://github.com/minism/leaf/blob/master/color.lua
http://www.wowace.com/addons/libcrayon-3-0/

[Resike]

Not sure what element you guys want to color, but if it's a texture then:

http://wowprogramming.com/docs/widge...tGradientAlpha

[zork]

We want to calculate a specific intermediate color that lives between two other colors.
What you posted is a function to fill a texture with a gradient color. That is not what we want.

[ravagernl]

How about something like this, found it on my harddrive, but can't remember from where I found this

local function ColorMixAlpha(red1, green1, blue1, alpha1, red2, green2, blue2, alpha2, weight)
    weight = weight or 0.5
 
    local w, a, w1, w2
    w = weight * 2 - 1
    a = alpha1 - alpha2
 
    w1 = ((w * a == -1 and w or (w + a)/(1 + w * a)) +1) / 2
    w2 = 1 - w1
 
    return
        w1 * red1 + w2 * red2,
        w1 * green1 + w2 * green2,
        w1 * blue1 + w2 * blue2,
        alpha1 * weight + alpha2 * (weight - 1)
end

[zork]

I just tested my assumption. Using ColorSelect works exactly as intended.


Code:
http://code.google.com/p/rothui/sour...e/core.lua#120

Test-Addon:
http://www.wowinterface.com/download...lorSmudge.html

There is one tiny issue though. That is if I pick a color that rolls over 360°, basically where going around the left side would be shorter. That needs some work to fix.

[suicidalkatt]

Originally Posted by zork I just tested my assumption. Using ColorSelect works exactly as intended. Code: http://code.google.com/p/rothui/sour...e/core.lua#120 Test-Addon: http://www.wowinterface.com/download...lorSmudge.html There is one tiny issue though. That is if I pick a color that rolls over 360°, basically where going around the left side would be shorter. That needs some work to fix.

Interesting approach but how much performance loss would this cause?

[zork]

Why should it? You call some API functions and multiply some values. That's it.

local frame = CreateFrame("ColorSelect")
function frame:UpdateColor()
  --get hsv color for colorA
  self:SetColorRGB(self.colorA.r, self.colorA.g, self.colorA.b)
  self.colorA.h, self.colorA.s, self.colorA.v = self:GetColorHSV()
  --get hsv color for colorB
  self:SetColorRGB(self.colorB.r, self.colorB.g, self.colorB.b)
  self.colorB.h, self.colorB.s, self.colorB.v = self:GetColorHSV()
  --calculate colorC HSV values based on HSV values from colorA and colorB and multiply them by the percentage
  self.colorC.h = floor(self.colorA.h-(self.colorA.h-self.colorB.h)*self.percentage/100)
  self.colorC.s = self.colorA.s-(self.colorA.s-self.colorB.s)*self.percentage/100
  self.colorC.v = self.colorA.v-(self.colorA.v-self.colorB.v)*self.percentage/100
  --get the RGB value of colorC
  self:SetColorHSV(self.colorC.h, self.colorC.s, self.colorC.v)
  self.colorC.r, self.colorC.g, self.colorC.b = self:GetColorRGB()
  --apply RGB color to texture
  self.texture:SetVertexColor(self.colorC.r, self.colorC.g, self.colorC.b)    
end

The only line that still needs work is this.

self.colorC.h = floor(self.colorA.h-(self.colorA.h-self.colorB.h)*self.percentage/100)

That is because the angle is > 180.
Example:
alpha = 40°
beta = 300°
Going from 40 to 300 is > 180.
So we want to go from 40 to 0/360 to 300 which is 100 in total.

I will try this drycode later. It shows the intention on how to fix it.

---update------------

Fixed the drycode.

if abs(self.colorA.h-self.colorB.h) > 180 then
      local radius = (360-abs(self.colorA.h-self.colorB.h))*self.percentage/100
      --calculate the 360° breakpoint
      if self.colorA.h < self.colorB.h then
        self.colorC.h = floor(self.colorA.h-radius)
        if self.colorC.h < 0 then
          self.colorC.h = 360+self.colorC.h
        end
      else
        self.colorC.h = floor(self.colorA.h+radius)
        if self.colorC.h > 360 then
          self.colorC.h = self.colorC.h-360
        end
      end
    else
      self.colorC.h = floor(self.colorA.h-(self.colorA.h-self.colorB.h)*self.percentage/100)
    end

[Resike]

Originally Posted by zork We want to calculate a specific intermediate color that lives between two other colors. What you posted is a function to fill a texture with a gradient color. That is not what we want.

Oh i see, my bad then.

[zork]

Here is the final color caluclation function that should work as intended. You enter two RGB colors and a percentage. You retrieve a new RGB color.

You do not need todo anything with the ColorSelect frame. You just want it for its inherited color calculation functions.

---update-----

Fixed the drycode.

--colorselect frame
    local CS = CreateFrame("ColorSelect")
     
    --get smudge color func
    function CS:GetSmudgeColorRGB(colorA, colorB, perc)
      --get hsv color for colorA
      self:SetColorRGB(colorA.r,colorA.g,colorA.b)
      local h1, s1, v1 = self:GetColorHSV() --radius, saturation, luminance
      --get hsv color for colorB
      self:SetColorRGB(colorB.r,colorB.g,colorB.b)
      local h2, s2, v2 = self:GetColorHSV() --radius, saturation, luminance
      --calculate new HSV values based on HSV values from colorA and colorB and multiply them by the perc
      local h3 = floor(h1-(h1-h2)*perc)
      --check if the angle between the two H values is > 180
      if abs(h1-h2) > 180 then
        local radius = (360-abs(h1-h2))*perc/100
        --calculate the 360° breakpoint
        if h1 < h2 then
          h3 = floor(h1-radius)
          if h3 < 0 then
            h3 = 360+h3
          end
        else
          h3 = floor(h1+radius)
          if h3 > 360 then
            h3 = h3-360
          end
        end
      end  
      local s3 = s1-(s1-s2)*perc
      local v3 = v1-(v1-v2)*perc
      --get the RGB values of the new color
      self:SetColorHSV(h3, s3, v3)
      local r,g,b = self:GetColorRGB()
      --return the new color
      return {r=r,g=g,b=b}
    end
     
    --call
    local color = CS:GetSmudgeColorRGB({r=1,g=0,b=0}, {r=0,g=1,b=1}, 0.8)

You still can optimize this by outsourcing the HSV color calculations of colorA and colorB. Thus you can call the function directly with HSV color values.

That way it can be shortened to:

--get smudge color func
function CS:GetSmudgeColorHSV(colorA, colorB, perc)
  local h1, s1, v1 = colorA.h, colorA.s, colorA.v
  local h2, s2, v2 = colorB.h, colorB.s, colorB.v
  --calculate new HSV values based on HSV values from colorA and colorB and multiply them by the perc
  local h3 = floor(h1-(h1-h2)*perc)
  --check if the angle between the two H values is > 180
      if abs(h1-h2) > 180 then
        local radius = (360-abs(h1-h2))*perc/100
        --calculate the 360° breakpoint
        if h1 < h2 then
          h3 = floor(h1-radius)
          if h3 < 0 then
            h3 = 360+h3
          end
        else
          h3 = floor(h1+radius)
          if h3 > 360 then
            h3 = h3-360
          end
        end
      end  
  local s3 = s1-(s1-s2)*perc
  local v3 = v1-(v1-v2)*perc
  --return the new hsv color
  return h3,s3,v3
end

If you do not care about the 360° breakpoint the function is even shorter

--get smudge color func
function CS:GetSmudgeColorHSV(colorA, colorB, perc)
  local h1, s1, v1 = colorA.h, colorA.s, colorA.v
  local h2, s2, v2 = colorB.h, colorB.s, colorB.v
  return floor(h1-(h1-h2)*perc), s1-(s1-s2)*perc, v1-(v1-v2)*perc
end

[suicidalkatt]

I really appreciate your work here Zork (as always).

This is one of those threads that should be thrown into the Tutorials & Other Helpful Info.

[zork]

Final functions:

--color lib
local CS = CreateFrame("ColorSelect")
 
--ConvertColorRgbToHsv
function ConvertColorRgbToHsv(color)
  CS:SetColorRGB(color.r, color.g, color.b)
  local h,s,v = CS:GetColorHSV()
  return {h=h,s=s,v=v}
end
 
--ConvertColorHsvToRgb
function ConvertColorHsvToRgb(color)
  CS:SetColorHSV(color.h, color.s, color.v)
  local r,g,b = CS:GetColorRGB()
  return {r=r,g=g,b=b}
end
 
--CalculateNewColor
function CalculateNewColor(colorA,colorB,percentage)
  local colorC = {}
  --check if the angle between the two H values is > 180
  if abs(colorA.h-colorB.h) > 180 then
    local angle = (360-abs(colorA.h-colorB.h))*percentage
    if colorA.h < colorB.h then
      colorC.h = floor(colorA.h-angle)
      if colorC.h < 0 then
        colorC.h = 360+colorC.h
      end
    else
      colorC.h = floor(colorA.h+angle)
      if colorC.h > 360 then
        colorC.h = colorC.h-360
      end
    end
  else
    colorC.h = floor(colorA.h-(colorA.h-colorB.h)*percentage)
  end    
  colorC.s = colorA.s-(colorA.s-colorB.s)*percentage
  colorC.v = colorA.v-(colorA.v-colorB.v)*percentage
  return colorC
end
 
--GetSmudgeColor
function GetSmudgeColor(colorA,colorB,percentage)
  if colorA.r then
    return ConvertColorHsvToRgb(CalculateNewColor(ConvertColorRgbToHsv(colorA),ConvertColorRgbToHsv(colorB),percentage))
  elseif colorA.h then
    return CalculateNewColor(colorA,colorB,percentage)  
  end
  return nil
end
 
--function call
local color = GetSmudgeColor({r=1,g=0,b=0}, {r=0,g=1,b=0}, 0.5)