A Flood-Fill Algorithm for Creative Coders

This is the source code for a section of my website. You’re welcome to snoop around to see how it works, maybe even make a pull request! (I’ve been wanting to speed it up and improve performance!)

How it works

Simply click anywhere in the page to start the flooding process. It works by spreading colour to its transparent neighbours, and tweaking the colour of those neighbours slightly from the original. This results in a sort of circular shape with pretty patterns and… why don’t you just go there and see for yourself!

Plans for the future

I’d like to add a few features for things like

  • Resetting the canvas,

    (Maybe a keybind? Or a button in a menu?)

  • A menu for tweaking how it runs,

    (I found a few interesting ways to change how it updates and colours things, a few sliders should do the trick nicely.)

  • Rendering the resulting image at custom resolutions.

    (Wallpapers, icons, things like that. Not sure what kind of input would work, might just do a dropdown with the common sizes – like 1080p, 2k and 4k – or a couple of input boxes for more niche sizes – like… uhhh… 3002 by 273?)


View Github