Here's a simple example of a fractal tree using JavaScript and HTML5 Canvas:
<html>
<head>
<style>
canvas { background-color: #eee; }
</style>
</head>
<body onload="init();">
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>
function init()
{
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var startX = 250;
var startY = 500; var length = 150;
var angle = Math.PI / 2; var branchWidth = 10;
var decay = 0.66; drawTree(startX, startY, length, angle, branchWidth, decay, ctx);
}
function drawTree(startX, startY, length, angle, branchWidth, decay, ctx) {
ctx.beginPath(); ctx.moveTo(startX, startY);
var endX = startX + length * Math.cos(angle);
var endY = startY - length * Math.sin(angle);
ctx.lineCap = "round";
ctx.lineWidth = branchWidth; ctx.lineTo(endX, endY);
ctx.stroke(); if (branchWidth > 1) {
drawTree( endX, endY, length * decay, angle + Math.PI / 6, branchWidth * decay, decay, ctx );
drawTree( endX, endY, length * decay, angle - Math.PI / 6, branchWidth * decay, decay, ctx );
}
}
</script>
</html>
This code draws a fractal tree on an HTML5 canvas. The drawTree function is called recursively to draw smaller branches, which in turn spawn even smaller branches, creating the fractal pattern. You can adjust the starting position, length, angle, branch width, and decay rate to change the appearance of the tree.
Here's a description of the code for the fractal tree in JavaScript:
-
The init function is called when the page loads. It sets up the canvas, gets a reference to the canvas context, and sets some initial values for the tree (start position, length, angle, branch width, and decay rate).
-
The drawTree function is the heart of the code, responsible for actually drawing the tree. It takes several parameters: the starting position (startX and startY), the length of the branch, the angle of the branch, the width of the branch, the decay rate (how much smaller each successive branch will be), and a reference to the canvas context.
-
The function begins a new path and moves to the starting position. It then calculates the end position of the branch using trigonometry (endX and endY). The line is drawn with a rounded endcap and the specified width.
-
If the branch width is greater than 1, the function calls itself twice, once for each branch that will sprout from the end of the current branch. The parameters for the new branches include the end position, a length that is smaller by the decay factor, and a branch width that is smaller by the decay factor.
-
This recursive process continues until the branch width is 1 or less, at which point no more branches are drawn. The resulting tree is a fractal, with smaller and smaller branches branching off of larger branches, creating a self-similar pattern.
You can adjust the values for the initial parameters to change the appearance of the tree. For example, you can make the branches wider, or change the angle of the branches to make the tree appear more upright or more leaning. The possibilities are endless!