-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfractal_tree.html
More file actions
66 lines (55 loc) · 1.69 KB
/
fractal_tree.html
File metadata and controls
66 lines (55 loc) · 1.69 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fractal Tree</title>
</head>
<body>
<div style="text-align: center;">
<canvas id="canvas" width="800" height="800"></canvas>
</div>
<script>
/**
* Fractal Tree in plain Javascript
*
* Author: Carlos E. Torres
* E-mail: [email protected]
* Github: https://github.com/cetorres
*/
var canvas;
var canvasContext;
window.onload = function () {
canvas = document.getElementById("canvas");
canvasContext = canvas.getContext("2d");
// Draw background
canvasContext.fillStyle = "black";
canvasContext.fillRect(0, 0, canvas.width, canvas.height);
setTimeout(initTree, 200);
}
function initTree() {
canvasContext.translate(canvas.width / 2, canvas.height);
branch(200);
}
function branch(len) {
drawLine(0, 0, 0, -len);
canvasContext.translate(0, -len);
if (len > 4) {
canvasContext.save();
canvasContext.rotate(Math.PI / 8);
branch(len * 0.67);
canvasContext.restore();
canvasContext.save();
canvasContext.rotate(-Math.PI / 6);
branch(len * 0.67);
canvasContext.restore();
}
}
function drawLine(x1, y1, x2, y2, color = "white") {
canvasContext.strokeStyle = color;
canvasContext.moveTo(x1, y1);
canvasContext.lineTo(x2, y2);
canvasContext.stroke();
}
</script>
</body>
</html>