Tree Fractal | Zona Land Education

Here's the code that runs the above animation.

You can change the code, if you like, and then click the following 'Reevaluate code' button. The program will then work as per your changes. Of course, your changes, especially random changes, can introduce errors, miscalculations, and browser crashes. If you need to get things back to their original condition, just reload this page using your browser's reload button.

The intention here is to conveniently show the inner workings of this program so that you understand how the diagram is drawn. Although there are library calls and custom objects in the code, the general logic of the fractal drawing is hopefully understandable. This program uses turtle geometry to draw the fractal.

Click the 'Code' button again to close this section.

// treeFractal.js

// Necessary library files.
// Requires jQuery.js, NumberAdjuster.js, XYGraph.js


// Fractal parameters interface.
window.startingSizeNumberAdjusterDiv;
window.startingSizeNumberAdjuster;
window.minimumSizeNumberAdjusterDiv;
window.minimumSizeNumberAdjuster;
window.shrinkFactorNumberAdjusterDiv;
window.shrinkFactorNumberAdjuster;
window.angleNumberAdjusterDiv;
window.angleNumberAdjuster;

// Drawing surface object.
window.canvas;

// Drawing logic object.
window.xyGraph;


// The following function is called once at the start.
// This functions sets up the program.
window.initializeTreeFractal = function()
{
	// Get parameter user interface containers. 
	startingSizeNumberAdjusterDiv = jQuery('#startingSizeNumberAdjusterDivId');
	minimumSizeNumberAdjusterDiv  = jQuery('#minimumSizeNumberAdjusterDivId');
	shrinkFactorNumberAdjusterDiv = jQuery('#shrinkFactorNumberAdjusterDivId');
	angleNumberAdjusterDiv        = jQuery('#angleNumberAdjusterDivId');
	 
	// Fill interface containers with created parameter adjusters.
	startingSizeNumberAdjuster = new NumberAdjuster2('Starting size', 'white', 4.5,   0.1,   20,  0.1,   1, startingSizeNumberAdjusterDiv, update);
	minimumSizeNumberAdjuster  = new NumberAdjuster2('Minimum size',  'white', 0.1,   0.1,   15,  0.1,   1, minimumSizeNumberAdjusterDiv, update);
	shrinkFactorNumberAdjuster = new NumberAdjuster2('Shrink factor', 'white', 0.6,  0.01,  0.8, 0.01, 0.1, shrinkFactorNumberAdjusterDiv, update);
	angleNumberAdjuster        = new NumberAdjuster2('Angle',         'white',  52,  -360,  360,    1,  10, angleNumberAdjusterDiv, update);
	
	// Get the drawing surface.
	canvas = document.getElementById('canvasId');
	
	// Create drawing logic object.
	xyGraph = new XYGraph(canvas);
	
	// Draw the diagram.
	update();
}


// This functions readies the drawing surface,
//   gets the fractal parameters from the interface,
//   and calls the function fractalTree, which draws the fractal.
window.update = function()
{
	// Clear the diagram.
	xyGraph.clear();
	
	// Setup the graphics.
	xyGraph.setLineThickness(3);
	xyGraph.setLineColor('lime');
	
	// Home the turtle and aim it up.
	xyGraph.penUp();
	xyGraph.home();
	xyGraph.setH(90);
	xyGraph.penDown();
	
	// Get fractal parameters.
	var startingSize = startingSizeNumberAdjuster.get();
	var minimumSize  = minimumSizeNumberAdjuster.get();
	var shrinkFactor = shrinkFactorNumberAdjuster.get();
	var angle        = angleNumberAdjuster.get();
	
	// Draw the fractal.
	fractalTree(startingSize, minimumSize, shrinkFactor, angle);
}


// This function is the recursive function that draws the fractal.
window.fractalTree = function(l, min, factor, angle)
{
	var nextL; // The length for the next recursion.

	// Is our current length larger than the minimum length?
	// Only draw and recurse if so.
	if(l > min)
	{
		// Calculate the next smaller length for the next recursion.
		nextL = l * factor;

		// Turn to the right.
		xyGraph.right(angle);
		
		// Go up this right branch.
		xyGraph.forward(l);
		// Recurse at the end of this right branch.
		// When done, this recursion will return the turtle
		//   to this end of this right branch.
		// Note function calls itself.
		fractalTree(nextL, min, factor, angle);
		// After recursing, go back down this right branch without drawing.
		xyGraph.penUp(); xyGraph.back(l); xyGraph.penDown();
		
		// Turn to left.
		xyGraph.left(2.0 * angle);
		
		// Go up this left branch.
		xyGraph.forward(l);
		// Recurse at the end of this left branch.
		// When done, this recursion will return the turtle
		//   to this end of this left branch.
		// Note function calls itself.
		fractalTree(nextL, min, factor, angle);
		// After recursing, go back down this left branch without drawing.
		xyGraph.penUp(); xyGraph.back(l); xyGraph.penDown();
		
		// Turn to the right.
		// This returns the turtle to its original aim.
		xyGraph.right(angle);
	}
}