Scripting Helpers is winding down operations and is now read-only. More info→
Ad
Log in to vote
0

How could I make a frame change colors smoothly without writing the different color3 values?

Asked by 8 years ago

I am asking because I feel like writing the different values would not be effective.

0
Look up Tween Module in free models Validark 1580 — 8y
0
My answer may be more what you were looking for than Panther's, even though his is entirely correct in itself. User#6546 35 — 8y
0
Edited with HSL interpolation. If it's broken, tell me and I'll review the code because it came from inside of Valkyrie and I had to strip it down from its dependencies. User#6546 35 — 8y
0
Fixed my HSL script. Forgot to remove a leftover end from the Valkyrie code User#6546 35 — 8y

2 answers

Log in to vote
1
Answered by 8 years ago

You can use interpolation
You actually have 2 options, which is RGB interpolation and HSL/HSV interpolation. Both have different results, so you should consider which one you want. HSL interpolation is proper, but RGB interpolation has less overhead at cost of quality.

RGB Interpolation

local function c3i(s,e,a)
    -- Start, end, alpha
    return Color3.new(s.r+(e.r-s.r)*a,s.g+(e.g-s.g)*a,s.b+(e.b-s.b)*a);
end;
local i = 0;
local TimeScale = TIMETOFINISHINSECONDS ^-1;
while i < 1 do
    Object.Color3Property = c3i(StartColor3, EndColor3, i);
    i = i + wait()*TimeScale;
end;

HSL Interpolation

Please excuse the util functions and size of the code

local function hue2rgb(p, q, t)
    if t < 0 then t = t + 1; end
    if t > 1 then t = t - 1; end
    if t < 1 / 6 then return p + (q - p) * 6 * t; end
    if t < .5 then return q; end
    if t < 2 / 3 then return p + (q - p) * (2 / 3 - t) * 6; end
    return p;
end
local hsl = function(H,S,L)
    H = max(min(1,H),0);
    S = max(min(1,S),0);
    L = max(min(1,L),0);
    local c = H..":"..S..":"..L;
    if S == 0 then
        return Color3.new(L,L,L);
    else
        local q = L < 0.5 and L * (1 + S) or L + S - L * S;
        local p = 2 * L - q;
        local nc3 = Color3.new(hue2rgb(p, q, H + 1 / 3),
            hue2rgb(p, q, H),
            hue2rgb(p, q, H - 1 / 3))
        return nc3;
    end
end;
local hsli(s,e,a)
    local r,g,b,dr,dg,db;
    do
        r = s.r;
        g,dr = s.g,e.r;
        b,dg = s.b,e.g;
        db = e.b
    end
    do
        local tsmin, tsmax = min(r,g,b), max(r,g,b);
        local _r,_g,_b = r,g,b;
        local _dr,_dg,_db = dr,dg,db;
        local tdmin, tdmax = min(dr,dg,db), max(dr,dg,db);
        b = (tsmin + tsmax)*.5;
        db = (tdmin + tdmax)*.5;
        g = tsmin == tsmax and 0 or (b < 0.5 and (tsmax-tsmin)/(tsmax+tsmin) or (tsmax-tsmin)/(2-tsmax-tsmin))
        dg = tdmin == tdmax and 0 or (db < 0.5 and (tdmax-tdmin)/(tdmax+tdmin) or (tdmax-tdmin)/(2-tdmax-tdmin))
        if _r>_g and _r>_b then
            r = (_g-_b)/(tsmax-tsmin)
        elseif _g>_r and _g>_b then
            r = 2+(_b-_r)/(tsmax-tsmin)
        else
            r = 4+(_r-_g)/(tsmax-tsmin);
        end;
        if _dr>_dg and _dr>_db then
            dr = (_dg-_db)/(tsmax-tsmin)
        elseif _dg>_dr and _dg>_db then
            dr = 2+(_db-_dr)/(tsmax-tsmin)
        else
            dr = 4+(_dr-_dg)/(tsmax-tsmin);
        end;
        r,dr = r/6, dr/6;
        if r < 0 then r = r+1 end;
        if dr < 0 then dr = dr+1 end;
    end
    dr,dg,db = dr-r,dg-g,db-b;
    return hsl(r+dr*a,g+dg*a,b+db*a)
end
local i = 0;
local TimeScale = TIMETOFINISHINSECONDS ^-1;
while i < 1 do
    Object.Color3Property = hsli(StartColor3, EndColor3, i);
    i = i + wait()*TimeScale;
end;

Source

Instructions

To use it, just change (at the bottom of each script) these variables
* TIMETOFINISHINSECONDS - The time to finish tweening, in seconds.
* Object - The object you're going to be changing the colour of
* Color3Property - The name of the property that you're going to be tweening
* StartColor3 - The initial Color3 to tween from
* EndColor3 - The final Color3 to tween to

How does it work?

Both methods for RGB and HSL use linear interpolation, which comes down to lerp(start,end,alpha) -> start + (end-start)*alpha.
RGB tweening uses a simple 1:1 conversion of the Color3 to its components, back into a Color3.
HSL tweening uses a bunch of formulas to convert the start and end Color3 values to HSL, interpolates them linearly and then uses similar formulas to convert the HSL values back to RGB which is fed into the Color3 constructor.

0
HSL please? Relampago1204 73 — 8y
0
HSL stands for Hue, Saturation and Lightness. TheDeadlyPanther 2460 — 8y
0
Hue, Saturation, Luminosity. User#6546 35 — 8y
0
THX Relampago1204 73 — 8y
View all comments (7 more)
0
19:32:51.512 - Players.Player1.PlayerGui.ScreenGui.Frame.LocalScript:25: '<eof>' expected near 'end' Relampago1204 73 — 8y
0
Which part of my script does that translate to? User#6546 35 — 8y
0
Line 25 I believe I am kind of new to scripting but I am learning :D Relampago1204 73 — 8y
0
It has been fixed, presumably. If it works, please tell me and accept my answer ^^ User#6546 35 — 8y
0
So do I just insert it into a local script and the parent is a frame? Relampago1204 73 — 8y
0
No. You'll have to edit it, and implement it. Change TIMETOFINISHINSECONDS, StartColor3, EndColor3, Color3Property and Object to suit your circumstances. User#6546 35 — 8y
0
k Relampago1204 73 — 8y
Ad
Log in to vote
0
Answered by 8 years ago

You could change them with a loop, for example:

local r = 0
local g = 0
local b = 0

while r < 255 do
    r = r + 1
    g = g + 1
    b = b + 1
    script.Parent.BackgroundColor3 = Color3.new(r/255,g/255,b/255)
    wait(0.005)
end
0
Let me test this out and ill tell you the results! Relampago1204 73 — 8y
0
Ok. I see an issue but I am going to try to fix it. Because of how the script works, it goes from black to white. Now I think I could make it become different colors but if I need help I'll ask you :) Relampago1204 73 — 8y
0
How would I be able to make it change colors in a pattern other than black to white? Relampago1204 73 — 8y
0
I want to make my colors match material design and I would like to flow smoothly. A problem with this script is that the colors will become white eventually Relampago1204 73 — 8y
View all comments (2 more)
0
thx Relampago1204 73 — 8y
0
Maybe you can put an if then statement saying when it is the rgb value for white, reset it to a little more than white? Just spitballing here. yoman1776 85 — 8y

Answer this question