Fractal Tree
One of the simplest fractals to create. Playing around with the parameters is fun, though. And with the right parameters, you can get something that doesn’t resemble a tree at all anymore but has quite the beauty to it.
The rules to draw the trees are simple: At the end of each branch, create two more branches with a certain angle between them.
Move the mouse over the canvas to change branch length and angle. Increase or decrease the depth to get simpler or more complex structures. With the shortening factor, you can determine, how much shorter each branch gets, the higher up it is. Values larger than 1.0 means the branches actually get longer towards the tree top and with a large enough angle, you’ll get canvas-filling structures.
The code is very simple, using recursion:
function drawFractalTreeLine(start, length, branch_angle, current_angle, current_level, shortening_factor = 1.0) {
if (current_level < 0) { return; }
const end = start.add(Vector.fromPolar(length, current_angle));
drawLine(start, end);
drawFractalTreeLine(end, length * shortening_factor, branch_angle, current_angle + branch_angle, current_level - 1, shortening_factor);
drawFractalTreeLine(end, length * shortening_factor, branch_angle, current_angle - branch_angle, current_level - 1, shortening_factor);
}
According to Wikipedia, there are structures in nature that resemble this fractal tree. Obviously, there’s trees, but also the pulmonary system, blood vessels, and more. Also, when the branch-angle is 90 degrees (having your mouse horizonally in the center of the canvas), you’ll get a H tree. Not only does it look cool, it also seems to be useful in the design of integrated circuits or antennas.