Tween RGB Color Pattern, OR Hue, how? [SOLVED]

Guys, im trying to achieve something here

Im trying to tween a part to, obviously play the tween, but when it does, i want the color, for the duration of the tween to change in a rainbow / rgb pattern but i keep getting stuck

Any help would be appreciated!

It stays stuck forever in the loop which i know, but i want to achieve something like that!

EX:

I CANT MARK 2 SOLUTIONS BUT THANKS TO @foamycoolkid5 AND @2112Jay

2 Likes

You can’t set the color to a function. You’d have to set the function separately, and run it at the same time you tween.

Yeah i figued i could do that, it just seemed lazy to me but if its the only way then ill do it, except that once i run the function it runs infinitely since it has a while true loop

It isn’t setting the color property to a function

image
You have to set it to an actual value, not a function is what I’m saying.

I said it’s not set to a function. It is set to whatever the function returns since it is being called ()

This functions looks like it returns nil but it actually yields forever, meaning the creation of the awesomePart tween is never completed.

If it were to be assigned to a function, it would be:
Color = rainbowColorChanging

But in this case, it is being assigned to the returned value of the called function:
Color = rainbowColorChanging()

Yeah, you’re right, my bad for the miscommunication, essentially, all I’m saying is that you can’t set the color property to a infinite-loop void function, I shouldn’t have generalized there.

To avoid any more mess ups in terminology, I’ll just code my explanation:

local TweenService = game:GetService("TweenService")

local twnInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic, Enum.EasingDirection.Out)

local tween = TweenService:Create(awesomePart, twnInfo, {
	Size = Vector3.new(6, 6, 6),
	Transparency = 0,
})

local function rainbowChanging()
	local x = 0
	
	local isPlaying = true
	
	while isPlaying do
		x += (1 / 255)
		
		if x >= 1 then
			x = 0
		end
		
		awesomePart.Color = Color3.fromHSV(x, 1, 1)
		
		task.wait()
	end
	
	return function()
		isPlaying = false
	end
end

task.wait(2)

tween:Play()

task.spawn(function()
	local endRainbow = rainbowChanging()
	
	tween.Completed:Wait()
	
	endRainbow()
end)
1 Like

A little different. I like to define things a bit more for more control..
(I change my mind a lot)

local awesomePart = workspace:WaitForChild("AwesomePart")
local TweenService = game:GetService("TweenService")

local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Linear, Enum.EasingDirection.InOut)

local colors = {
	Color3.new(1, 0, 0),
	Color3.new(1, 0.5, 0),
	Color3.new(1, 1, 0),
	Color3.new(0, 1, 0),
	Color3.new(0, 0, 1),
	Color3.new(0.29, 0, 0.51),
	Color3.new(0.56, 0, 1)
}

local index = 1

while true do
	local nextIndex = index + 1
	if nextIndex > #colors then
		nextIndex = 1
	end
	local tween = TweenService:Create(awesomePart, tweenInfo, {Color = colors[nextIndex]})
	tween:Play()
	tween.Completed:Wait()
	index = nextIndex
end

Plase use the </> option when posting script.

1 Like

Little trick here, one of the most underrated method in my opinion, TweenService:GetValue(a). With that function, is is possible to make custom tween systems, that still allowing you to use the Enum.EasingStyle of your choise (and EasingDirection as well)

In your case, using TweenService for doing a rainbow animation, doesn’t work very well, since TweenService is built for tweening a properties from an inital value, to a goal value. In your case, the initial value and goal value could be the same (if it does 1 cycle of the rainbow), so you would have to separate the tween into smaller chunks to avoid this issue, …

(@2112Jay’s solution does that perfectly, it’s simpler than my method)

Or you can use TweenService:GetValue(a) like this. This is for a local script btw

local TweenService = game:GetService("TweenService")
local RunService = game:GetService("RunService")
local Part = workspace:WaitForChild("AwesomePart")

local function TweenCube(Cube, TweenParams)
	local StartTick = os.clock()
	
	local InitialSize = Cube.Size
	local InitialTransparency = Cube.Transparency
	
	while true do
		
		-- Alpha starts at 0, and goes to 1 gradually, after TweenParams.TweenTime amount of time
		local alpha = (os.clock() - StartTick)/TweenParams.TweenTime
		alpha = math.clamp(alpha, 0, 1) -- Prevent alpha from being bigger than 1

		-- TweenService:GetValue() modifies alpha to make it follow the easing style and direction
		-- mod_alpha still goes from 0 to 1
		local mod_alpha = TweenService:GetValue(alpha, TweenParams.EasingStyle, TweenParams.EasingDirection)
		
		-- Manually set the properties of the cube, using alpha to smoothly transition from the initial value to the goal value
		Cube.Size = InitialSize:Lerp(Vector3.new(6,6,6), mod_alpha)
		Cube.Transparency = math.lerp(InitialTransparency, 0, mod_alpha)
		
		-- Magic part, we aren't restricted to initial value -> goal value, we can instead use a function that returns a color depending on alpha
		-- alpha 0 -> red, alpha 0.5 -> Cyan, alpha 1 -> red
		Cube.Color = Color3.fromHSV(mod_alpha, 1, 1)
		
		-- You can do this to make it loop through the rainbow twice during the tween, similar to your original code
		--Cube.Color = Color3.fromHSV(mod_alpha*2 % 1, 1, 1)
		
		-- Reached the end of the tween, we can break out of the loop
		if alpha == 1 then break end
		
		RunService.RenderStepped:Wait()
	end
end

--

task.wait(5)

local TweenParams = {
	TweenTime = 2, -- Amount of seconds
	EasingStyle = Enum.EasingStyle.Cubic,
	EasingDirection = Enum.EasingDirection.Out,
}

TweenCube(Part, TweenParams)
1 Like

Modulo is perfect in these kinds of situations, it’s not an operator that we’re familiar with, so we don’t really see it, but

local index = 1

while true do
	index = (index % #colors) + 1

	-- [...]
end

Modulo of like 1 % 3 is 1, 2 % 3 is 2, 3 % 3 is 0 (and 0 % 3 is 0). So this one line of code increments index by 1, while also mapping index = #colors to 1 :P

Hope this little trick is useful

It’s easier to read in languages that have arrays starting at 0, because then you can do index = (index + 1) % length

2 Likes

You should know me by now .. get it rolling then refine.
That looks sweet.

1 Like

The tween wont work because it is stuck already in the loop

I’m pretty sure I tested that before posting.. I bet if I look in my notes folder it’s there.
That is a ScriptScript in ServerScriptService. Just tested again .. working as intended.

Did you want it to run through them once and stop?

Do's it
--ServerScript in ServerScriptService
task.wait(2) --so the full test can be seen

local TweenService = game:GetService("TweenService")
local awesomePart = workspace:WaitForChild("AwesomePart")

local tweenInfo = TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.InOut)
local colors = {
	Color3.new(1, 0, 0),
	Color3.new(1, 0.5, 0),
	Color3.new(1, 1, 0),
	Color3.new(0, 1, 0),
	Color3.new(0, 0, 1),
	Color3.new(0.29, 0, 0.51),
	Color3.new(0.56, 0, 1)
}

awesomePart.Color = colors[#colors]
task.wait(2) --set the color to the last on the list
--or do this before hand

function showtime()
	local index = #colors
	for i = 1, #colors do
		local nextIndex = index + 1
		if nextIndex > #colors then nextIndex = 1 end
		local tween = TweenService:Create(awesomePart, tweenInfo, {Color = colors[nextIndex]})
		tween:Play()
		tween.Completed:Wait()
		index = nextIndex
	end
end

print("Let's do's this")
showtime()
print("I did's it")
task.wait(3)
print("Fine, I'll do's it again")
showtime()
print("Oh, I did's it again")
Your format
--ServerScript in ServerScriptService
local awesomePart = workspace:WaitForChild("AwesomePart")
local TweenService = game:GetService("TweenService")

local function rainbowColorChanging()
	local x = 0
	while true do
		awesomePart.Color = Color3.fromHSV(x, 1, 1)
		x = x + 1/255
		if x >= 1 then x = 0 end
		task.wait(0.01)
	end
end

local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Cubic, Enum.EasingDirection.Out)
local tween = TweenService:Create(awesomePart, tweenInfo, {
	Size = Vector3.new(6, 6, 6),
	Transparency = 0
})
tween:Play()
rainbowColorChanging()

The color function wont work in the TweenService function. Avoid using TweenService in this case and just repeat through rainbowColorChanging()

Yo this works how i wanted it to, i was looking to see how to do it with a for loop instead, which fits perfectly since it doesnt get stuck forveer in the while loop.

Thanks tho :slight_smile:

Basically all i wanted was for the tween to start and the color to change rainbow like, and then stop after the amount of the time for tween was, so i dont have a infinite while loop running in the background.

1 Like

Dude, what about the part that i want to apply this too tho, i just want the part to change rgb smoothly, not just the color

This is a new detail to me here. I did a for loop in “do’s it.” Were you able to figure out what you needed from that? If you like we can do’s it again.. :smirking_face:

Yeah it works, just wish i could make the colors loop through the Colors property table faster lol to my liking :smiley:

1 Like

Speed up the tween.. I think I have that at 2 in “Your format” version.
That’s funny.. notice I went to 1 on the other.. I felt the same way.

I mean i guess that works lol, but it affects everythign, i guess ill just stick with it how its lol, ill just make different color tables for different parts if i want them to fade tween into different colors with the same speed lol

1 Like