forked from Vitautas-C/fractal-tree
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
75 lines (69 loc) · 3.02 KB
/
index.html
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
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<section class="fractal-tree">
<div class="wrapper">
<div class="control-panel">
<button class="create-tree block">Create tree</button>
<h3>Control panel</h3>
<div class="control-wrapper">
<label class="block"> Iteration count
<input type="range" id="iterationCount" min="9" max="27" value="20" step="1">
</label>
<label class="block"> Trunk height
<input type="range" id="trunkHeight" min="20" max="200" value="80" step="1">
</label>
<label class="block"> Trunk thickness
<input type="range" id="trunkThickness" min="1" max="20" value="8" step="0.33">
</label>
<label class="block"> Branch length ratio
<input type="range" id="branchRatio" min="0.5" max="1.1" value="0.85" step="0.05">
</label>
<label class="block"> Length variability
<input type="range" id="branchLengthVariability" min="0" max="1" value="0.2" step="0.1">
</label>
<label class="block"> Branch probability
<input type="range" id="branchProbability" min="0.5" max="1" value="0.95" step="0.05">
</label>
<label class="block"> Base fork angle
<input type="range" id="forkAngle" min="0.04" max="2.09" value="0.5" step="0.01">
</label>
<label class="block"> Fork angle pull
<input type="range" id="forkAnglePull" min="0.1" max="2" value="1" step="0.01">
</label>
<label class="block"> Rotation variability
<input type="range" id="branchRotationVariability" min="0" max="0.1" value="0" step="0.01">
</label>
<label class="block"> Leaf probability
<input type="range" id="leafProbability" min="0" max="1" value="0.1" step="0.025">
</label>
<label class="block"> Leaf size
<input type="range" id="leafSize" min="1" max="20" value="6" step="1">
</label>
<label class="block"> Branch color
<input type="range" id="branchColor" min="-10" max="90" value="20" step="5">
</label>
<label class="block"> Leaf color
<input type="range" id="leafColor" min="0" max="90" value="80" step="5">
</label>
<label class="block"> Leaf color lightness
<input type="range" id="leafLightness" min="0" max="50" value="10" step="5">
</label>
<label class="block"> Leaf color variability
<input type="range" id="leafColorVariability" min="0" max="50" value="20" step="5">
</label>
</div>
</div>
<canvas class="canvas" width="800px" height="800px"></canvas>
</div>
</section>
</body>
</html>