CODEWITHSUNDEEP
pythonopencvanimationflood-fill
Learner
Learner

Reputation: 35

How to make a filling algorithm/animation similar to the one in procreate?

I am working on an aesthetically pleasing flood fill algorithm and I find the flood fill animation in procreate to be quite pleasing. after putting it in slow-mo I realized that the animation itself has this circular filling pattern and it seems to create color gradients that vary in sizes surrounding the actual color. I made a video showing this: normal speed and slow-mo video

also here is my non recursive flood fill algorithm:

import mahotas
import numpy as np
import cv2 as cv
from shapely.geometry import Polygon


def flood_fill(poly, new_color):
    
    # separate the x's and y's
    xs = [i[0] for i in poly.exterior.coords]
    ys = [i[1] for i in poly.exterior.coords]
    minx, maxx = min(xs), max(xs)
    miny, maxy = min(ys), max(ys)
    X = int(maxx - minx)
    Y = int(maxy - miny)
    # create a new polygon cord that have no excess white space 
    newPoly = [(int(x - minx), int(y - miny))
               for (x, y) in poly.exterior.coords]
    # creates a mask for all the points in the polygon
    grid = np.zeros((X, Y), dtype=np.int8)
    mahotas.polygon.fill_polygon(newPoly, grid)
    # after masking return to points and translate back to original positions
    points = [[x + minx, y + miny] for (x, y) in zip(*np.nonzero(grid))]


    # now turn all the corresponding pixels in the blank_iamge to a desiered color
    for x, y in points:
        blank_image[int(y), int(x)] = np.array(new_color)

# create a blank image
blank_image = np.zeros((300, 400, 3), np.uint8)
blank_image[:, :] = (255, 255, 255)


flood_fill(poly=Polygon([[0,0],[0,100],[100,100],[100,0]]),new_color= (255,0,0))

cv.imshow("blank",blank_image)
cv.waitKey(0)

note I would like to keep my polygon filling functionality I just need to create an animation for the filling pattern and the gradient effect shown in the video. Sadly, I have no idea how to implement that.

Upvotes: 1

Views: 131

Answers (1)

user1196549
user1196549

Reputation:

Fill the shape in an auxiliary image (not displayed), to generate a mask. Then perform filling using any visual effect (such as a growing disk), and only update inside the mask.

Upvotes: 0

Related Questions