-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
143 lines (142 loc) · 8.53 KB
/
Copy pathindex.html
File metadata and controls
143 lines (142 loc) · 8.53 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<html>
<head>
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<title>Tree Generator - Addison Prairie</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div class="panel-holder">
<div class="panel">
<div class="panel-section">
<h3>Simulation Controls</h3>
<div class="input-group">
<button id="step">start</button>
</div>
</div>
<div class="panel-section">
<h3>Camera Controls</h3>
<div class="input-group" style="display: none; position: absolute;">
<label>distance</label>
<input type="number" value="0">
</div>
<div class="input-group">
<label>height</label>
<input id="height" type="range" value=".125" min="0" max="1" step=".0001">
</div>
</div>
<!--<div class="panel-section">
<h3>Stats</h3>
<div class="input-group">
<label>nodes</label>
</div>
<div class="input-group">
<div class="stats-panel"></div>
</div>
<div class="input-group">
<label>time (ms)</label>
</div>
<div class="input-group">
<div class="stats-panel"></div>
</div>
</div>-->
<div class="panel-section">
<h3>Tree Settings</h3>
<div class="input-group">
<label class="tooltip"><span class="ttext">map size:</span><span class="tooltiptext" style="width: 96%;">resolution of the shadow map.</span></label>
</div>
<div class="input-group">
<label> x</label>
<input id="SHADOW_MAP_X" type="number" value="400" min="50" max="800" step="10" class="integer">
</div>
<div class="input-group">
<label> y</label>
<input id="SHADOW_MAP_Y" type="number" value="400" min="50" max="800" step="10" class="integer">
</div>
<div class="input-group">
<label> z</label>
<input id="SHADOW_MAP_Z" type="number" value="600" min="50" max="800" step="10" class="integer">
</div>
<div class="input-group">
<label>shadow:</label>
</div>
<div class="input-group">
<label class="tooltip"> <span class="ttext">strength</span><span class="tooltiptext">strength of the shadow.</span></label>
<input id="SHADOW_A" type="number" value=".8" min=".01" max="10" step=".001" class="minmax">
</div>
<div class="input-group">
<label class="tooltip"> <span class="ttext">decay</span><span class="tooltiptext">ratio the shadow decreases as the distance from a node increases.</span></label>
<input id="SHADOW_B" type="number" value="1.1" min="1.0" max="4." step=".001" class="minmax">
</div>
<div class="input-group">
<label class="tooltip"> <span class="ttext">distance</span><span class="tooltiptext">the maximum distance a node's shadow will reach vertically downward. Higher values are more realistic but take longer to compute.</span></label>
<input id="SHADOW_Q_MAX" type="number" value="16" min="1" max="48" step="1" class="integer">
</div>
<div class="input-group">
<label>seed</label>
<input id="SEED" type="text" value="4ec3e00e7b">
</div>
<div class="input-group">
<button id="reset">reset tree</button>
</div>
</div>
<div class="panel-section">
<h3>Simulation Settings</h3>
<div class="input-group">
<label class="tooltip"><span class="ttext">shoot direction:</span><span class="tooltiptext" style="width: 96%;">weight of different factors when computing shoot direction.</span></label>
</div>
<div class="input-group">
<label class="tooltip"> <span class="ttext">tropism η</span><span class="tooltiptext">weight of gravity in shoot direction. <br>0: no effect<br>< 0: downward tendency<br>> 0: upward tendency</span></label>
<input id="TROPISM_ETA" type="number" value="0.0" min="-10." max="10." step=".001" class="minmax">
</div>
<div class="input-group">
<label class="tooltip"> <span class="ttext">light η</span><span class="tooltiptext">weight of light in shoot direction. Higher values cause the tree to seek out light more.</span></label>
<input id="LIGHT_ETA" type="number" value="3.0" min="0.0" max="10." step=".001" class="minmax">
</div>
<div class="input-group">
<label class="tooltip"> <span class="ttext">tree η</span><span class="tooltiptext">weight of the tree's genetics in shoot direction. Higher values make the tree look more organized and self similar.</span></label>
<input id="TREE_ETA" type="number" value="10.0" min="1.0" max="10." step=".001" class="minmax">
</div>
<div class="input-group">
<label class="tooltip"><span class="ttext">light</span><span class="tooltiptext">ambient light exposure at each point.</span></label>
<input id="SHADOW_C" type="number" value="5" min="1.0" max="48.0" step=".001" class="minmax">
</div>
<div class="input-group">
<label class="tooltip"><span class="ttext">energy α</span><span class="tooltiptext">energy multiplier at base of tree. Higher values give tree more energy.</span></label>
<input id="ENERGY_ALPHA" type="number" value="2.0" min=".5" max="10." step=".001" class="minmax">
</div>
<div class="input-group">
<label class="tooltip"><span class="ttext">energy λ</span><span class="tooltiptext">how energy is split at branches.<br>.5: balanced<br>< .5: bias towards lateral branch<br>> .5: bias towards main branch</span></label>
<input id="ENERGY_LAMBDA" type="number" value=".52" min="0.0" max="10." step=".001" class="minmax">
</div>
<div class="input-group">
<label class="tooltip"><span class="ttext">prune ratio</span><span class="tooltiptext">ratio<br>(ENERGY/NUM_CHILDREN)<br>at which branches are pruned. Higher values cause trees to drop branches more often.</span></label>
<input id="PRUNE_RATIO" type="number" value=".45" min="0.0" max="2." step=".001" class="minmax">
</div>
<div class="input-group">
<label class="tooltip"><span class="ttext">branch θ</span><span class="tooltiptext">direction a lateral branch will grow:<br>0: perpendicular to main axis<br>> 0: towards main axis</span></label>
<input id="BRANCHING_ANGLE_FACTOR" type="number" value="1" min="-4.0" max="4.0" step=".001" class="minmax">
</div>
<div class="input-group">
<button id="update">update settings</button>
</div>
<!--<div class="input-group">
<button id="reset">copy</button>
<button id="reset">paste</button>
</div>-->
</div>
</div>
</div>
<canvas id="canvas" style="width: 100%; height: 100%;"></canvas>
<script src="js/glMatrix/gl-matrix-min.js"></script>
<script src="js/render/renderer.js" type="module"></script>
<script src="js/render/orbit.js" type="module"></script>
<script src="js/ui/ui.js" type="module"></script>
<script src="js/main.js" type="module"></script>
<script type="module">
import { initApp } from "./js/main.js";
window.onload = () => {initApp();};
</script>
</body>
</html>