Flood Fill For 2D Pixel Paint

[nocm1887cc (Name)]

Hello, i’m making 2d pixel paint GUI right now and i want to make paint bucket tool

i’m research how do i make it and seem like i need to make something called Flood Fill
but i don’t know how can i make it as GUI

i keep finding for a hours and still don’t found any posts that really help me about this
does anyone know how to make it? or anypost that talking about gui flood fill, I really can’t find it.
i will share the script here if i can solve it by myself

[MinecoIII2 (raph)]

When a Pixel is clicked it should check the other pixel around it,

you can do that by using the Name of the pressed Pixel for example: Pixel10x16 using string.sub or string.find you take the 10 and 16 out of the Name and subtract one of them by 1, for example 10 - 1 = 9 then take the Pixel called “Pixel9x16” using :FindFirstChild(),

Now you have the Pixel above/below, check if the Pixel has the same color as the previous pixel, if not change the color.

And keep doing that until it doesn’t find any more pixels around it. I think that should work.

EDIT: i don’t know if that was very clear

[ThanksRoBama (Emma)]

You’ll want a fast way of getting the immediate neighbors of any given pixel. This pretty much means you’ll need a way of indexing pixels by their coordinates. The string based approach Minecolll2 suggested would work, but creating a lot of variations on strings an be pretty slow. A faster way would be to use a 2D array/map -type thing. Here’s some code for that from a different post:

Grid placement and collisions

I’d use a 2d map data structure type thing: function mapSet(map, x, y, value) map[x] = map[x] or {0 map[x][y] = value end function mapGet(map, x, y) if map[x] then return map[x][y] end end I’d also have some functions for converting a world-space point to “grid space”: local GRID_SIZE = 6 function round(n, to) return math.floor(n/to + 0.5) * to end function roundV3(v3, to) return Vector3.new( round(v3.X, to), round(v3.Y, to), round(v3…

The Wikipedia article for flood fill is a pretty good intro:

Flood fill

You’ll want the one under “Moving the recursion into a data structure”. It might not be necessary in languages with tail recursion, but AFAIK Roblox Lua does not have that so you definitely do not want a recursive implementation.

Ask away if anything is confusing. I also have flood fill code for an old project, I can dig it up if you want

[nocm1887cc (Name)]

Hi! Thanks You Both For Answer This Post
I can make flood fill now

here the script if someone needed

function paintbucket(Center)
	local CenterColor = Center.BackgroundColor3
	local digits = { }
	if Center and CenterColor ~= preview.BackgroundColor3 then
		for occurrence in (Center.Name):gmatch("%d+") do
			table.insert(digits, tonumber(occurrence))
		end

		local xx, yy = digits[1], digits[2]
		local PixelA = PaintFrame:FindFirstChild("Pixel"..xx.."x"..yy)

		local function FloodFill(PixelB, x, y)
			task.wait(0.01) --Delay
			if PixelB and PixelB.BackgroundColor3 == CenterColor then
				PixelB.BackgroundColor3 = preview.BackgroundColor3
				
				if PaintFrame:FindFirstChild("Pixel"..(x-1).."x"..y) then
					PixelA = PaintFrame:FindFirstChild("Pixel"..(x-1).."x"..y)
					xx, yy = x+1, y
					task.spawn(function() FloodFill(PixelA, x-1, y) end)
				end

				if PaintFrame:FindFirstChild("Pixel"..(x+1).."x"..y) then
					PixelA = PaintFrame:FindFirstChild("Pixel"..(x+1).."x"..y)
					xx, yy = x-1, y
						task.spawn(function() FloodFill(PixelA, x+1, y) end)
				end

				if PaintFrame:FindFirstChild("Pixel"..x.."x"..y-1) then
					PixelA = PaintFrame:FindFirstChild("Pixel"..x.."x"..y-1)
					xx, yy = x, y+1
							task.spawn(function() FloodFill(PixelA, x, y-1) end)
				end

				if PaintFrame:FindFirstChild("Pixel"..x.."x"..y+1) then
					PixelA = PaintFrame:FindFirstChild("Pixel"..x.."x"..y+1)
					xx, yy = x, y-1
								task.spawn(function() FloodFill(PixelA, x, y+1) end)
				end
			end
		end
		FloodFill(PixelA, xx, yy)
	else
		print("center color and color select are same")
	end
end

here how to use

paintbucket(GUIFrame)

Canvas Create Script (Run in Command Bar)

local Frame = game.StarterGui.PixelPaint.Frame
local posi = UDim2.new(-0.03125, 0,0, 0) 
local posi2 = UDim2.new(0, 0,0, 0) 
local Y = 1  


for x = 1, 32 do  	
	for i = 1, 32 do 		
		local Pixel = Instance.new("TextButton", Frame) 		
		Pixel.Size = UDim2.new(0.03125, 0,0.03125, 0) 		
		posi = posi+UDim2.new(0.03125, 0,0, 0) 		
		Pixel.Position = posi 		
		Pixel.BackgroundColor3 = Color3.fromRGB(255,255,255) 		
		Pixel.Text = " " 		
		Pixel.Name = "Pixel"..(i).."x"..Y		
		if i == 32 then 			
			posi = UDim2.new(-0.03125, 0,0, 0) 		
		end 	
	end 	
	posi2 = posi2+UDim2.new(0, 0,0.03125, 0) 	
	posi = posi+posi2
	Y = Y+1 
end

thanks you so much!