Source Code

 ██████╗ ███████╗███╗   ██╗███████╗██████╗  █████╗ ████████╗██╗██╗   ██╗███████╗
██╔════╝ ██╔════╝████╗  ██║██╔════╝██╔══██╗██╔══██╗╚══██╔══╝██║██║   ██║██╔════╝
██║  ███╗█████╗  ██╔██╗ ██║█████╗  ██████╔╝███████║   ██║   ██║██║   ██║█████╗
██║   ██║██╔══╝  ██║╚██╗██║██╔══╝  ██╔══██╗██╔══██║   ██║   ██║╚██╗ ██╔╝██╔══╝
╚██████╔╝███████╗██║ ╚████║███████╗██║  ██║██║  ██║   ██║   ██║ ╚████╔╝ ███████╗
 ╚═════╝ ╚══════╝╚═╝  ╚═══╝╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝   ╚═╝  ╚═══╝  ╚══════╝
        

██████╗ ███████╗███████╗██╗ ██████╗ ███╗   ██╗
██╔══██╗██╔════╝██╔════╝██║██╔════╝ ████╗  ██║
██║  ██║█████╗  ███████╗██║██║  ███╗██╔██╗ ██║
██║  ██║██╔══╝  ╚════██║██║██║   ██║██║╚██╗██║
██████╔╝███████╗███████║██║╚██████╔╝██║ ╚████║
╚═════╝ ╚══════╝╚══════╝╚═╝ ╚═════╝ ╚═╝  ╚═══╝
        

Versions 1 - 4

Now we finally move one to the new sketch that I created to show the process of creating one from start to finish.

For this one, I took some inspiration from an image that I've seen a few years back and that was stuck in my head ever since. It was the image of a tree that only consisted of a few basic lines. And this image of a tree was achieved by a recursive function. So I took this as a starting point and tried over the following four different versions to get a recursive function that makes every branch a bit shorter than the previous branch and with always the same angle to the previous branch. For that, I used the 'push()' 'pop' concept of P5.JS which lets you save a drawing context and get back to it. This way I had an easy time going back up in the call stack of the recursive function and to draw at the position where I left off.

In version 4 you can see that we have a basic tree wherefrom each branch, two new branches start. This happens until we get under a minimum length of the branch because otherwise,the recursive function wouldn't stop.