Creating a flood fill for my drawing system?

Hey! I’m working on a custom drawing system for a public release and somebody suggested a paint bucket. I want to implement this, I just don’t know where to start.

After some research they led me to something called a ‘flood fill algorithm’. I just don’t know if that’s the best way to approach something like this.

I would’ve normally like checked like the grid to fill it in but there’s a catch this time. As I started working on this, I noticed that if the mouse moved too fast Roblox wouldn’t update it and it left noticeable gaps in the drawing. To fix this, I implemented some geometry that fills in the gaps between them leaving a rotated frame that fills in the gaps so that’s probably not gonna make this any easier.

Does anybody have any pointers / posts I didn’t find? Also, I’m literally only in Algebra 1 so if you post some super complicated math as a response you may need to dumb it down.

Make a 2d array with each element is a pixel of the canvas, it’s where you can apply flood fill algorithm.

How can I have this work effectively with objects that have rotation applied to them and not have it go outside of their bounds?

You don’t need to rotate frames to make this algorithm to work.

I meant, there are some rotated frames when it’s drawn so the design looks smooth and doesn’t consist of gaps.

There’s rotated frames between every two points if the distance > 0 to fill in those gross gaps.

Using this math:

I see what you meant, but it’s better to use pixel method, no complicate math required.

image
Then my drawings would look like this and then the flood fill would probably fill in the entire canvas because of all the gaps.
image

Yeah, that’s why I recommend you to switch to pixel method, it can fix the gaps. Check if the player is drawing, colorize the pixel when the player is hovering it.