DFrame Custom Background Material

[Bloom_]

How do you make this code change the background of a DFrame slower, because when i put this in the paint function it just changes superfast.

local Backgrounds = { "image1", "image2", "image3", "image4", "image5", "image6" }

surface.SetDrawColor( 255, 255, 255, 255 )
		
surface.SetMaterial( Material( table.Random( Backgrounds ) .. ".jpg" ) )
		
surface.DrawTexturedRect( 0, 0, DermaFrame:GetWide(), DermaFrame:GetTall() )

[Cyaegha]

local Backgrounds = {
	"gui/center_gradient",
	"gui/gradient",
	"gui/gradient_down",
	"gui/gradient_up",
}
local delay = 2 -- how long it takes for the background to change in seconds

-- ALWAYS cache materials outside of any hooks
for i, img in next, Backgrounds do -- loop through Backgrounds
	Backgrounds[i] = Material(img) -- replace the string with the material
end

hook.Add("HUDPaint", "material shit", function()
	local bgnd = #Backgrounds * delay
	local i = CurTime() % bgnd -- this will return a float between 0 and bgnd
	i = math.Remap(i, 0, bgnd, 0, #Backgrounds)
	i = math.floor(i) + 1 -- table indexes start at 1, not 0.

	surface.SetDrawColor(color_black)
	surface.SetMaterial(Backgrounds[i]) -- set the material
	surface.DrawTexturedRect(0, 0, ScrW(), ScrH()) -- instead of using ScrW and ScrH use the width and height passed to Panel:Paint instead of calling 2 functions
end)