forked from jobtalle/Swarm
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
115 lines (115 loc) · 3.87 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
<!DOCTYPE html>
<html>
<head>
<title>Swarm</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/swarm.js"></script>
<script src="js/configuration.js"></script>
<script src="js/agent.js"></script>
<script src="js/view.js"></script>
<script src="js/vector.js"></script>
</head>
<body>
<div id="wrapper">
<div id="content">
<canvas id="renderer" width=512 height=512></canvas>
<div id="controls">
<table>
<tr>
<td>Agents:</td>
<td>
<input class="input-slider" type="range" min="0" max="250" value="50" id="input-agent-count" onchange="sim.configure();">
</td>
<td>
<input class="input-value" type="text" readonly id="value-agent-count">
</td>
</tr>
<tr>
<td>Agent speed:</td>
<td>
<input class="input-slider" type="range" min="0" max="100" value="65" id="input-agent-speed" onchange="sim.configure();">
</td>
<td>
<input class="input-value" type="text" readonly id="value-agent-speed">
</td>
</tr>
<tr>
<td>Repulsion zone:</td>
<td>
<input class="input-slider" type="range" min="0" max="64" value="17" id="input-zone-repulsion" onchange="sim.configure();">
</td>
<td>
<input class="input-value" type="text" readonly id="value-zone-repulsion">
</td>
</tr>
<tr>
<td>Alignment zone:</td>
<td>
<input class="input-slider" type="range" min="0" max="64" value="8" id="input-zone-alignment" onchange="sim.configure();">
</td>
<td>
<input class="input-value" type="text" readonly id="value-zone-alignment">
</td>
</tr>
<tr>
<td>Attraction zone:</td>
<td>
<input class="input-slider" type="range" min="0" max="64" value="16" id="input-zone-attraction" onchange="sim.configure();">
</td>
<td>
<input class="input-value" type="text" readonly id="value-zone-attraction">
</td>
</tr>
<tr>
<td>Attraction angle:</td>
<td>
<input class="input-slider" type="range" min="0" max="360" value="140" id="input-angle-attraction" onchange="sim.configure();">
</td>
<td>
<input class="input-value" type="text" readonly id="value-angle-attraction">
</td>
</tr>
<tr>
<td>Repulsion strength:</td>
<td>
<input class="input-slider" type="range" min="0" max="10" step="0.25" value="7" id="input-strength-repulsion" onchange="sim.configure();">
</td>
<td>
<input class="input-value" type="text" readonly id="value-strength-repulsion">
</td>
</tr>
<tr>
<td>Alignment strength:</td>
<td>
<input class="input-slider" type="range" min="0" max="10" step="0.25" value="3" id="input-strength-alignment" onchange="sim.configure();">
</td>
<td>
<input class="input-value" type="text" readonly id="value-strength-alignment">
</td>
</tr>
<tr>
<td>Attraction strength:</td>
<td>
<input class="input-slider" type="range" min="0" max="10" step="0.25" value="1" id="input-strength-attraction" onchange="sim.configure();">
</td>
<td>
<input class="input-value" type="text" readonly id="value-strength-attraction">
</td>
</tr>
<tr>
<td>Gravitation strength</td>
<td>
<input class="input-slider" type="range" min="0" max="10" step="0.25" value="0.75" id="input-strength-gravitation" onchange="sim.configure();">
</td>
<td>
<input class="input-value" type="text" readonly id="value-strength-gravitation">
</td>
</tr>
</table>
<button onclick="sim.scatter();">Scatter</button>
</div>
</div>
</div>
<script>sim = new SwarmSim(document.getElementById("renderer")); sim.start();</script>
</body>
</html>