User:Shoebby/Webby Sprouts

From XPUB & Lens-Based wiki

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)

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!

Questions

  • (webby sprouts) Can I pull from the page's own stylesheet to style the branches and if so how?
  • Where do I go from here? Should I refine the things I already have or keep going, maybe venture into the third dimension?
  • Could this/these play a fun interactive role(s) during the Special Issue? What would be desirable?
  • Could there be another step to make these more meaningful and a bit less purely toylike? Webby sprouts has it somewhat but yeah

Goals

  • Contribute to the Special Issue in a fulfilling way
  • Enable user-end styling with the webby sprout browser extension
  • Build my own drawing robot to draw fractals with and stick 100s of them to my walls like that one scene from Sunny
  • ???
  • Get 500 million euros
Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=User:Shoebby/Webby_Sprouts&oldid=289870"