Creating a flood fill for my drawing system?

[Jumpathy (tyler)]

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.

[CraftFireGamer (zoesads)]

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

[Jumpathy (tyler)]

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

[CraftFireGamer (zoesads)]

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

[Jumpathy (tyler)]

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:

Smooth Drawing Canvas

Hi, you linked my topic so I can answer this for you. The solution is simple. Connect the point from the first frame with to the second point from the second frame with a straight line. This will fill in the gaps between the two. This requires a combination of trigonometry and coordinate geometry. I’ll actually write out the full solution here, without the code, so you can learn from it whilst working out exactly how to code it yourself. So say for example we use renderstepped. Track where …

[CraftFireGamer (zoesads)]

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

[Jumpathy (tyler)]

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

[CraftFireGamer (zoesads)]

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.

[blondedkar (hers)]

Did you ever figure it out? I’m in the same boat right now and the closest I’ve gotten is using the input position (of the mouse) when clicked to check using magnitude for the closest “dot” nearby and then adjust the size accordingly to fill in. It does not work as intended and instead fills in the same area of the dots.

[GuinPeng (Matcha)]

Since you’re using maths to draw aka Vectors instead of pixels this should help

Vector graphics flood fill algorithms?