forked from beneater/boids
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
138 lines (136 loc) · 4.18 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>
<!-- Compiled and minified CSS -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<link rel="stylesheet" href="global.css" />
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdn.plot.ly/plotly-2.16.1.min.js"></script>
<link rel="icon" href="/favicon.svg" />
<head>
<meta charset="utf-8" />
<title>Boids</title>
<script src="./boids.js"></script>
<style type="text/css">
body {
margin: 0;
background: #282c34;
overflow: hidden;
display: flex;
flex-direction: column;
}
#boids-div {
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
}
#charts-div {
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
}
</style>
</head>
<body onmousemove="mouse_position(event)">
<form action="#" id="top">
<div class="row" style="position: relative">
<div class="col s1" style="margin-left: 0.5em">
<a class="waves-effect waves-light btn row" id="reset-button"
>Reset</a
>
<a class="waves-effect waves-light btn row" id="pause-button"
>Pause</a
>
</div>
<div class="col s1">
<p class="blue-text">Coherence</p>
<p class="range-field">
<input type="range" id="slider-coherence" min="0" max="1000" />
</p>
</div>
<!-- <a class="btn tooltipped" data-position="bottom" data-tooltip="I am a tooltip">Hover me!</a> -->
<div class="col s1">
<p class="blue-text">Separation</p>
<p class="range-field">
<input type="range" id="slider-separation" min="0" max="100" />
</p>
</div>
<div class="col s1">
<p class="blue-text">Alignment</p>
<p class="range-field">
<input type="range" id="slider-alignment" min="0" max="100" />
</p>
</div>
<div class="col s1">
<p class="blue-text">Visual Range</p>
<p class="range-field">
<input type="range" id="slider-visual-range" min="0" max="100" />
</p>
</div>
<div class="col s1">
<p class="blue-text">Predator coherence</p>
<p class="range-field">
<input
type="range"
id="slider-predator-coherence"
min="0"
max="50"
/>
</p>
</div>
<div class="col s1">
<p class="blue-text">Avoid predator</p>
<p class="range-field">
<input type="range" id="slider-avoid-predator" min="0" max="100" />
</p>
</div>
<div class="col s1">
<p class="blue-text">Obstacles</p>
<label class="switch"
><input type="checkbox" id="toggle-obstacles" />
<div></div>
</label>
</div>
<div class="col s1">
<p class="blue-text">Leader</p>
<label class="switch"
><input type="checkbox" id="toggle-leaders" />
<div></div>
</label>
</div>
<div class="col s1">
<p class="blue-text">Predator</p>
<label class="switch"
><input type="checkbox" id="toggle-predators" />
<div></div>
</label>
</div>
<div class="col s1">
<p class="blue-text">See Average</p>
<label class="switch"
><input type="checkbox" id="toggle-global-vector" />
<div></div>
</label>
</div>
<div class="col s1">
<p class="blue-text">Hide Trail</p>
<label class="switch"
><input type="checkbox" id="toggle-trail" />
<div></div>
</label>
</div>
</div>
</form>
<div id="boids-div" class="row">
<canvas id="boids"></canvas>
</div>
<div id="charts-div" class="row">
<div style="flex: 1" id="charts"></div>
</div>
</body>
</html>