Smooth color transition

[BitCrack04]

So I wanted to make color transition, I knew that I needed to transition each component (r, g and b)
I tried using Lerp(), LerpVector() and math.Approach()

And I still failed :v

So I am asking how could I make smooth color transition?
Doesn't matter how, and in what way.

And if that'll help I am using this to change derma button's color when hovering with mouse on it.

[ubre]

HSVToColor

Here's how the color wheel looks like:

https://files.facepunch.com/forum/upload/788/c7167354-44ff-4cb7-8de0-341b63c9be99/image.png

So if you want to go from green to red just do a number that slowly decreases from somewhere around 100 to 0.

[BitCrack04]

oh... I didn't knew that's how HSV works
That makes things much easier!

[Nak]

HSV returns 3 numbers.
H,S,V = ColorToHSV( Color(255,255,255) )

You can convert HSV to Color with.
HSVToColor(H, S, V)

[ubre]

Here's an example code:

[Lua] local timeStart = CurTime() local lifeTime = 3 local..

And here's how it looks like:

https://i.gyazo.com/ad7b55202da46ee285427b02535d8d85.mp4

Here's what the values mean:

lifeTime is how many seconds it will take for it to go from start to finish, in this case it's 3 seconds.

colorStart is the hue at the beginning
colorEnd is the hue at the end, so if you have one at 0 and this one at 360 it will do a full rainbow in those 3 seconds

satStart is the saturation at the beginning, the close it is to 0 the more washed up the color will look
satEnd is the saturation at the end

darkStart is the darkness at the beginning, in this case it's 0 so it starts out being black
darkEnd is the darkness at the end, since you wanted a dark gold I have it at 0.6, 1 would be full brightness.

Here's an example of HSVToColor being used in one of my codes:

https://streamable.com/94a3l

The saturation is lower than 1 so that's why the colors look like that (But it's the closest to the ones in the real videogame)

[BitCrack04]

Ok I am dumb I tried doing
HSV = ColorToHSV(Color(50, 255, 50))
print(HSV[1] .. HSV[2] .. HSV[3])

[ubre]

Those are all variables to show you what the arguments in the function mean and how you can go from State A to State B. You can just ignore them all and do
HSVToColor(55, 1, VariableThatGoesFrom0To1) where VariableThatGoesFrom0To1 will make it go from black to yellow depending on how fast it goes

[BitCrack04]

Okay... So I tried doing something my self using your tips and I got to the point where it does this.
Gif
So I have a few questions. Why does it transition different when I hover over it and when I am not hovering over it.

And why does the bottom button changes color slower than the other?

My code for changing colors.

[hoobsug]

Try doing something like this
  local item = items_list:Add( "DButton" )
    item:SetText( "" )

    item.CurBool = false
    item.CurLerp = 0

    item.Paint = function()

        if item.CurBool or (popup != nil and v == popup.Item) then
            item.CurLerp = Lerp(FrameTime()*7, item.CurLerp, 1)
        else
            item.CurLerp = Lerp(FrameTime()*7, item.CurLerp, 0)
        end

            draw.RoundedBox( 0, 0, 0, item:GetWide(), item:GetTall(), Color(255, 102, 0, 255) )

            draw.RoundedBox( 0, 0, 0, item:GetWide(), item:GetTall(), Color(255, 102, 0, 155*item.CurLerp) )

    end    

    item.OnCursorEntered = function() item.CurBool = true end
    item.OnCursorExited = function() item.CurBool = false end

[BitCrack04]

Yeah! I think I did something like that, but instead of multiplying I just put the desired value there.

[galsjel]

You're trying to translate a single color, I wouldn't worry about performance unless you're doing thousands of those each frame.

local colors = {
Vector(1, 0, 0),
Vector(0, 1, 0),
Vector(0, 0, 1)
}

local timer = 1
local speed = 1 -- the time between transitions in seconds

hook.Add("HUDPaint", "TranslationTest", function()
local len = #colors
local phase = timer % len

local a = 1 + math.floor(phase)
local b = 1 + (a % len)
local c = LerpVector( phase - math.floor(phase), colors[ a ], colors[ b ] )

surface.SetDrawColor( Color( c.x * 255, c.y * 255, c.z * 255 ) )
surface.DrawRect( 128, 128, 100, 100 )

timer = timer + (RealFrameTime() / speed)
end)