-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
119 lines (119 loc) · 3.56 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
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
<!DOCTYPE html>
<html>
<head>
<title>3D L-System</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
<script src="js/lindenmayer.js"></script>
<script src="js/renderer.js"></script>
<script src="js/geometry.js"></script>
<script src="js/controller.js"></script>
<script src="js/preset.js"></script>
<script src="js/message.js"></script>
</head>
<body>
<div id="wrapper">
<div id="renderer"></div>
<div id="message-bar">
<span id="message-text"></span>
</div>
<div id="controls">
<table>
<tr>
<td>Preset:</td>
<td>
<select id="l3d-preset" onchange="preset(); controller.go();" value="">
<option value="tree">Tree</option>
<option value="hilbert-curve">Hilbert curve</option>
<option value="plant">Plant</option>
<option value="fern">Fern</option>
<option value="spring">Spring</option>
<option value="spiral">Square spiral</option>
</select>
</td>
<td>
<select id="l3d-render-style" onchange="controller.changeSystem(); controller.go();" value="">
<option value="lines">Lines</option>
<option value="wireframe">Wireframe</option>
<option value="tubes">Tubes</option>
<option value="plant">Plant</option>
<option value="cubes">Cubes</option>
</select>
</td>
</tr>
<tr>
<td>Axiom:</td>
<td><input id="l3d-axiom" type="text"></td>
<td>
<table>
<tr>
<td>Iterations:</td>
<td>
<input id="l3d-iterations" type="text" onchange="controller.changeSystem()"/>
</td>
<td>
<button onclick="controller.go()">Go</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Angle:</td>
<td><input id="l3d-angle" type="text" onchange="controller.changeSystem()"/></td>
<td>
<table>
<tr>
<td>
<button onclick="controller.step()">Step</button>
</td>
<td>
<button onclick="controller.clearResult()">Clear</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Constants:</td>
<td><input id="l3d-constants" type="text" onchange="controller.changeSystem()"/></td>
<td id="result-column" rowspan="7" style="width: 300px">
<textarea id="l3d-result" readonly></textarea>
</td>
</tr>
<tr>
<td>Rule 1:</td>
<td><input id="l3d-rule1" type="text" onchange="controller.changeSystem()"/></td>
</tr>
<tr>
<td>Rule 2:</td>
<td><input id="l3d-rule2" type="text" onchange="controller.changeSystem()"/></td>
</tr>
<tr>
<td>Rule 3:</td>
<td><input id="l3d-rule3" type="text" onchange="controller.changeSystem()"/></td>
</tr>
<tr>
<td>Rule 4:</td>
<td><input id="l3d-rule4" type="text" onchange="controller.changeSystem()"/></td>
</tr>
<tr>
<td>Rule 5:</td>
<td><input id="l3d-rule5" type="text" onchange="controller.changeSystem()"/></td>
</tr>
<tr>
<td>Rule 6:</td>
<td><input id="l3d-rule6" type="text" onchange="controller.changeSystem()"/></td>
</tr>
<tr id="add-rule-button">
<td></td>
<td>
<button onclick="controller.addRuleField()">Add rule</button>
</td>
</tr>
</table>
</div>
</div>
<script>controller = new Controller(document.getElementById("renderer")); preset(); controller.go();</script>
</body>
</html>