User:Shoebby/Webby Sprouts: Difference between revisions
| Line 8: | Line 8: | ||
===== Pen Plotting ===== | ===== Pen Plotting ===== | ||
<gallery mode="packed" widths=300 heights=200> | <gallery mode="packed" widths=300 heights=200> | ||
1 penplot 1.jpg| | 1 penplot 1.jpg|First fractal, made using the pen plotter and a Math'd python script to generate instructions | ||
1 penplot 2.mp4| | 1 penplot 2.mp4|Video of the first fractal being drawn, you can hear my partner in the background 'ooh' and 'aah'ing | ||
1 penplot 3.jpg| | 1 penplot 3.jpg|Following fractal experiments introduce variability in left/right angles and ratios | ||
1 penplot 4.png| | 1 penplot 4.png|A fractal where the left angle is higher than the right angle | ||
1 penplot 5.png| | 1 penplot 5.png|Chaotic fractal 1 | ||
1 penplot 6.PNG| | 1 penplot 6.PNG|Chaotic fractal 2 | ||
1 penplot 7.png| | 1 penplot 7.png|Chaotic fractal 3 | ||
1 penplot 9.png|Chaotic fractal 4 | |||
1 penplot 9.png| | 1 penplot 10.png|This fractal introduces slight randomization per branch, set within min-max limits | ||
1 penplot 10.png| | 1 penplot 11.png|This fractal also randomizes ratios per branch, adding a much more organic and clustering look to the overall structure | ||
1 penplot 11.png| | 1 penplot 12.PNG|I think this one is quite pretty | ||
1 penplot 12.PNG| | 1 penplot 13.png|This one looks kinda cool I think | ||
1 penplot 13.png| | 1 penplot 14.png|Hey woah | ||
1 penplot 14.png| | |||
</gallery> | </gallery> | ||
===== PostScript ===== | ===== PostScript ===== | ||
<gallery mode="packed" widths=300 heights=200> | <gallery mode="packed" widths=300 heights=200> | ||
2 postscript 1.png| | 1 penplot 8.png|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 | ||
2 postscript 2.png| | 2 postscript 1.png|Funny spin | ||
2 postscript 3.png| | 2 postscript 2.png|Triggers my catholic guilt somehow | ||
2 postscript 4.pdf| | 2 postscript 3.png|Eerie kinda feeling | ||
2 postscript 4.pdf|I just like this one for the concept, where the text size is scaled depending on the file's size on disk | |||
</gallery> | </gallery> | ||
===== The Canvas Element ===== | ===== The Canvas Element ===== | ||
<gallery mode="packed" widths=300 heights=200> | <gallery mode="packed" widths=300 heights=200> | ||
3 canvas 1.png| | 3 canvas 1.png|Now taking fractals fully digital I used the canvas element to generate them, generate your own [https://shoebby.github.io/dist/sprout.html here]! | ||
</gallery> | </gallery> | ||
===== Fractals From Divs ===== | ===== Fractals From Divs ===== | ||
<gallery mode="packed" widths=300 heights=200> | <gallery mode="packed" widths=300 heights=200> | ||
4 divvysprouts 1.png| | 4 divvysprouts 1.png|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 | ||
4 divvysprouts 2.png| | 4 divvysprouts 2.png|It works, and I could even apply past things like uneven left/right angles already | ||
4 divvysprouts 3.png| | 4 divvysprouts 3.png|Squeer | ||
4 divvysprouts 4.png| | 4 divvysprouts 4.png|Due to the way theyre drawn you can draw multiple over eachother to make neat patterns | ||
4 divvysprouts 5.gif| | 4 divvysprouts 5.gif|(gif) First experiments with animating the tree | ||
4 divvysprouts 6.gif| | 4 divvysprouts 6.gif|(gif) Spin | ||
4 divvysprouts 7.gif| | 4 divvysprouts 7.gif|(gif) Spinnn | ||
4 divvysprouts 8.gif| | 4 divvysprouts 8.gif|(gif) Spinnnnn | ||
4 divvysprouts 9.gif| | 4 divvysprouts 9.gif|(gif) Spinnnnnnn | ||
4 divvysprouts 11.png|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 | |||
4 divvysprouts 11.png| | 4 divvysprouts 12.gif|(gif) Meta-ball-ish dual fractal spinning unfurling and such | ||
4 divvysprouts 12.gif| | 4 divvysprouts 13.gif|(gif) Kinda the same but with wackier colours and using mix-blend-mode | ||
4 divvysprouts 13.gif| | |||
</gallery> | </gallery> | ||
===== Fractals From The DOM ===== | ===== Fractals From The DOM ===== | ||
<gallery mode="packed" widths=300 heights=200> | <gallery mode="packed" widths=300 heights=200> | ||
5 webbysprouts 1.png| | 5 webbysprouts 1.png|So now lets take it to a web extension! Assignment: generate a tree fractal based on the webpage DOM | ||
5 webbysprouts 2.png| | 5 webbysprouts 2.png|And also show what sort of element is related to which branch! | ||
5 webbysprouts 3.gif| | 4 divvysprouts 10.png|On some pages the tree even applies some of the page's styling to itself, why? How? I wish I knew (help) | ||
5 webbysprouts 3.gif|Some interactivity is introduced, now element type pops up on hover! Maybe also highlight the elements themselves? (yes) | |||
</gallery> | </gallery> | ||
Revision as of 02:33, 3 March 2025
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!
