JavaScript Tree Generator style body height 750px font family Trebuchet MS Helvetica Arial Verdana sans serif font size 65 style link rel stylesheet href https code jquery com ui 1 10 4 themes ui lightness jquery ui css script src https code jquery com jquery 1 10 2 js script script src https code jquery com ui 1 10 4 jquery ui js script h1 Fractal Tree Generator h1 canvas id canvas width 500 height 500 style border 1px solid grey canvas p label for depth Depth label div id slider depth style width 300px div p p label for angle Angle label div id slider angle style width 300px div p p label for branches Additional Branches at each level label div id slider branches style width 300px div p script type text javascript function draw var ctx document getElementById canvas getContext 2d ctx resetTransform Clear the canvas ctx clearRect 0 0 500 500 Move to the bottom middle of the canvas which is where we re going to start ctx translate 250 400 Call our recusive drawing function drawTree ctx 0 var maxRecursion 6 var degrees 30 var extraBranches 1 function drawTree ctx recursion if recursion maxRecursion return if recursion 0 var branches 1 else var branches recursion extraBranches 1 for var i 0 i branches i ctx save Work out the total number of degrees between all of the branches at this depth and rotate left half that amount so that we don t just grow to the right var degreesBetween branches 1 degrees ctx rotate degreesBetween 2 Math PI 180 Go from a thick branch to thin leaves ctx lineWidth maxRecursion recursion Go from brown to green ctx strokeStyle rgb 125 recursion 25 80 25 Draw our line ctx beginPath ctx lineTo 0 0 ctx lineTo 0 100 ctx stroke Translate scale and then call ourselves recursively ctx translate 0 96 ctx scale 0 75 0 75 drawTree ctx recursion 1 ctx restore ctx rotate degrees Math PI 180 function const1 slider values const1Value 0 min 0 5 max 0 5 step 0 01 slide function event ui ui handle text ui value const1Value 0 parseFloat ui value slider depth slider range max min 1 max 8 value maxRecursion slide function event ui maxRecursion ui value draw ui handle text ui value slider angle slider range max min 5 max 180 value degrees slide function event ui degrees ui value draw angle val ui value ui handle text ui value slider branches slider range max min 0 max 5 value extraBranches slide function event ui extraBranches ui value draw branches val ui value ui handle text ui value ui slider handle each function this text this parent slider values 0 draw console log loaded console log ready script
ctx rotate degreesBetween 2 Math PI 180 Go from a thick branch to thin leaves ctx lineWidth maxRecursion recursion Go from brown to green ctx strokeStyle rgb 125 recursion 25 80 25 Draw our line ctx beginPath ctx lineTo 0 0 ctx lineTo 0 100 ctx stroke Translate scale and then call ourselves recursively ctx translate 0 96 ctx scale 0 75 0 75 drawTree ctx recursion 1 ctx restore ctx rotate degrees Math PI 180 function const1 slider values const1Value 0 min 0 5 max 0 5 step 0 01 slide function event ui ui handle text ui value const1Value 0 parseFloat ui value slider depth slider range max min 1 max 8 value maxRecursion slide function event ui maxRecursion ui value draw ui handle text ui value slider angle slider range max min 5 max 180 value degrees slide function event ui degrees ui value draw angle val ui value ui handle text ui value slider branches slider range max min 0 max 5 value extraBranches slide function event ui extraBranches ui value draw branches val ui value ui handle text ui value ui slider handle each function this text this parent slider values 0 draw console log loaded console log ready script