User:Shoebby/Webby Sprouts

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

blogpost: https://www.lexie.land/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.

If I haven't added all the different scripts I've used for this as little code snippets yet, fret not! These will be added ONE DAY!

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, play with it yourself here

• 

  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)

The Final Yuri

• 

  For fun I also made the divvy sprouts compatible with the webby sprouts, so they could intermingle, pull from eachother, and kiss!