Scripting HelpersARCHIVE
A little piece of Roblox history. Preserved for everyone, one question at a time.Read about the archive →
✓ ANSWER ACCEPTED

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

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

4 comments

0

Look up Tween Module in free models

0

My answer may be more what you were looking for than Panther's, even though his is entirely correct in itself.

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.

0

Fixed my HSL script. Forgot to remove a leftover end from the Valkyrie code

2 answers

✓ Accepted answer

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.

11 comments

0

HSL please?

0

HSL stands for Hue, Saturation and Lightness.

0

Hue, Saturation, Luminosity.

0

THX

0

19:32:51.512 - Players.Player1.PlayerGui.ScreenGui.Frame.LocalScript:25: '' expected near 'end'

0

Which part of my script does that translate to?

0

Line 25 I believe I am kind of new to scripting but I am learning :D

0

It has been fixed, presumably. If it works, please tell me and accept my answer ^^

0

So do I just insert it into a local script and the parent is a frame?

0

No. You'll have to edit it, and implement it. Change TIMETOFINISHINSECONDS, StartColor3, EndColor3, Color3Property and Object to suit your circumstances.

0

k

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

6 comments

0

Let me test this out and ill tell you the results!

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 :)

0

How would I be able to make it change colors in a pattern other than black to white?

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

0

thx

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.

This discussion is preserved as it was. New answers, comments, and votes are closed.