User:Shoebby/Webby Sprouts

Download here: https://addons.mozilla.org/en-US/firefox/addon/webby-sprouts/

blogpost: https://shoebby.github.io/dist/blogpost-penplot.html

(Where am I in) The Process

My dive into fractals brought me into contact with a lot of different mediums for drawing them, here is the process shown by way of images in (rough) chronological order.

Pen Plotting

First fractal, made using the pen plotter and a Math'd python script to generate instructions
Video of the first fractal being drawn, you can hear my partner in the background 'ooh' and 'aah'ing
Following fractal experiments introduce variability in left/right angles and ratios
A fractal where the left angle is higher than the right angle
Chaotic fractal 1
Chaotic fractal 2
Chaotic fractal 3
Chaotic fractal 4
This fractal introduces slight randomization per branch, set within min-max limits
This fractal also randomizes ratios per branch, adding a much more organic and clustering look to the overall structure
I think this one is quite pretty
This one looks kinda cool I think
Hey woah

PostScript

Recursion was also useable in the PostScript class we had, so I applied a bit of it here to lists of PDFs/JPEGs on my computer
Funny spin
Triggers my catholic guilt somehow
Eerie kinda feeling
I just like this one for the concept, where the text size is scaled depending on the file's size on disk

The Canvas Element

Now taking fractals fully digital I used the canvas element to generate them, generate your own here!

Fractals From Divs

Canvas didn't really tickle me however, and then Doriane came with the suggestion to instead draw them using divs, which struck me as incredibly cursed and awesome
It works, and I could even apply past things like uneven left/right angles already
Squeer
Due to the way theyre drawn you can draw multiple over eachother to make neat patterns
(gif) First experiments with animating the tree
(gif) Spin
(gif) Spinnn
(gif) Spinnnnn
(gif) Spinnnnnnn
I figured I could also expose the CSS more to the user so they could mess with the styling for themselves, to make the trees pretty and/or weird-looking
(gif) Meta-ball-ish dual fractal spinning unfurling and such
(gif) Kinda the same but with wackier colours and using mix-blend-mode

Fractals From The DOM

So now lets take it to a web extension! Assignment: generate a tree fractal based on the webpage DOM
And also show what sort of element is related to which branch!
On some pages the tree even applies some of the page's styling to itself, why? How? I wish I knew (help)
Some interactivity is introduced, now element type pops up on hover! Maybe also highlight the elements themselves? (yes)