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:

1. 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).

2. 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.

3. 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.

4. 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.

5. 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!

Konvertor

Javascript konvertor kuna u eure

Python

Jedna od glavnih prednosti Pythona je njegova čitljivost i jednostavnost. Sintaksa Pythona je vrlo jednostavna i intuitivna

Blazor

Blazor podržava dvije različite arhitekture: Blazor WebAssembly i Blazor Server.

DALL-E

DALL-E je računalni program koji je razvio OpenAI kako bi stvorio slike korištenjem umjetne inteligencije.

Dinamične web stranice

Dinamične web stranice su stranice koje se prilagođavaju korisniku i njegovim zahtjevima u realnom vremenu

Padajući izbornik

Kako u html-u napraviti padajući izbornik koji se generira pomoću javascript-a?

jQuery događaj

Kako povezati više input kontrola u jedan događaj (event) sa jQuery-om

Local Storage

Kako snimiti podatke sa web stranice u lokalni storage preglednika

##### Blog

© 2023 programiranje.com.hr