Help with Flood Fill Animation

I’m currently making a smoke system that can change its shape depending on the map geometry like cs2 and I was wondering on how I could animate/interpolate this function using custom easing functions for it to look something like this: https://youtu.be/ryB8hT5TMSg?si=fK_7fOUaDFJKoYsh&t=706

Here’s the code to my flood fill algorithm:

local function floodFillSmoke(startPos,dirPos, depth)
    if depth < 2 then
        return
    end
    local x, y, z = dirPos.X, dirPos.Y, dirPos.Z
    local voxelX = math.ceil((x+1)/voxelRes)
    local voxelY = math.ceil((y+1)/voxelRes)
    local voxelZ = math.ceil((z+1)/voxelRes)

    if voxelX >= 1 and voxelX <= widthvoxel and voxelY >= 1 and voxelY <= heightvoxel and voxelZ >= 1 and voxelZ <= depthvoxel then
        if voxelArray[voxelX][voxelY][voxelZ] == 0 then
            if distEllipsoid(1, startPos, dirPos, range, heightrange, range) <= 1 then
                voxelArray[voxelX][voxelY][voxelZ] = depth

                local part = Instance.new("Part")
                part.Size = voxelSize
                part.Name = depth
                part.Position = dirPos + cornerAtt.WorldPosition
                part.Transparency = 0
                part.CanCollide = false
                part.CanQuery = false
                part.CanTouch = false
                part.CastShadow = false
                part.Anchored = true
                part.Color = Color3.fromHSV(depth/3/range,0.5,0.5)
                part.Parent = workspace.Visualize
                
                for _, dir in ipairs(directions) do
                    task.wait()
                    coroutine.wrap(floodFillSmoke)(startPos, dirPos + dir, depth-1)
                end
            end
        end
    end
end
1 Like

If you have the original depth, you can divide the current depth with it to get a decimal from 0 to 1. You can provide that decimal number to any interpolation/easing function to get an adjusted number that eases how you like, then multiply with some constant to get an amount of time that this function waits for before showing the voxel and expanding.

1 Like

hmmm alright ill try it so should i put it inside of task.wait() inside of the for loop?

1 Like

No, that’d make the nearby voxels appear artificially, as if each side is being done sequentially. You can place the wait before the for loop or at the start of the function.

alright thanks im gonna test out your solution