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.

Pen Plotting

import math
import numpy as np

file = open("fractal.hgl", "w")

def rotate(vec, angle): 
   rads = math.radians(angle)
   a = math.cos(rads)
   b = math.sin(rads)
   R = np.array([[a,-b], [b,a]])
   return np.dot(R, vec)

def tree(x1, y1, x2, y2, angleLeft, angleRight, ratio, depth):

   if depth == 0: return

   file.write(f'PU {round(x1)},{round(y1)};\n')
   file.write(f'PD {round(x2)},{round(y2)};\n')

   base = np.array([x2 - x1, y2 - y1])
   new_base = base * ratio
   right = rotate(new_base, angleRight)
   left = rotate(new_base, -angleLeft)
   
   end = np.array([x2, y2])
   right_end = np.add(end, right)
   left_end = np.add(end, left)

   tree(x2, y2, right_end[0], right_end[1], angleLeft, angleRight, ratio, depth - 1)
   tree(x2, y2, left_end[0], left_end[1], angleLeft, angleRight, ratio, depth - 1)

print("What's the stem's starting x position? (whole numbers)")
start_x = int(input())
print("What's the stem's starting y position? (whole numbers)")
start_y = int(input())
print("What's the stem's end x position? (whole numbers)")
end_x = int(input())
print("What's the stem's end y position? (whole numbers)")
end_y = int(input())

print("Are the branch angles symmetrical? (y/n)")
symmetrical = input().lower().strip() == "y"
if symmetrical:
   print("What angle are the branches? (in degrees, whole numbers)")
   angle = int(input())
   angleLeft = angle
   angleRight = angle
else:
   print("What angle is the left branch? (in degrees, whole numbers)")
   angleLeft = int(input())
   print("What angle is the right branch? (in degrees, whole numbers)")
   angleRight = int(input())

print("What ratio should the branches be? (decimal numbers (i.e. .75)) >1 means the branches grow with every recursion, <1 means they shrink.")
ratio = float(input())
print("How many recursions should this fractal be? (whole numbers) 5-10 is usually a good starting point to get an idea of the overall shape.)")
recursions = int(input())

tree(start_x, start_y, end_x, end_y, angleLeft, angleRight, ratio, recursions)

• 

  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

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!