-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
178 lines (175 loc) · 8.44 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Particle Music</title>
</head>
<body>
<div id="animation" class="tab-hook"></div>
<div id="readme" class="tab-hook"></div>
<div align="center">
<canvas id="canvas">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
<div id="tabs">
<ul class="tab-control">
<li><a href="#readme" class="tablinks">About</a></li>
<li><a href="#animation" class="tablinks">Control Particles</a></li>
</ul>
<div id="animationCtrl" class="tabcontent">
<div class="controls">
<div class="formField">
<label>
Radius (<span id="radiusAmount">40</span>)
</label>
<input type="range" min="1" max="500" step="1" value="40" oninput="updateRadius(this.value)">
</div>
<div class="formField">
<label>
Attraction (<span id="attractionAmount">1</span>)
</label>
<input type="range" min="0" max="500" step="1" value="1" oninput="updateAttraction(this.value)">
</div>
<div class="formField">
<label>
Flocking (<span id="flockingAmount">0</span>)
</label>
<input type="range" min="0" max="500" step="1" value="0" oninput="updateFlocking(this.value)">
</div>
<div class="formField">
<label>
Repellency (<span id="repellencyAmount">0</span>)
</label>
<input type="range" min="0" max="300" step="1" value="0" oninput="updateRepellency(this.value)">
</div>
<div class="formField">
<label>
Velocity (<span id="velocityAmount">500</span>)
</label>
<input type="range" min="1" max="1000" step="1" value="500" oninput="updateVelocity(this.value)">
</div>
<div class="formField">
<label>
Randomness (<span id="randomAmount">400</span>)
</label>
<input type="range"min="0" max="1000" step="1" value="400" oninput="updateRandom(this.value)">
</div>
<div class="formField">
<label>
Damping (<span id="dampingAmount">0</span>)
</label>
<input type="range" min="0" max="100" step="1" value="0" oninput="updateDamping(this.value)">
</div>
<div class="formField">
<label>
Size (<span id="sizeAmount">1</span>)
</label>
<input type="range" min="1" max="5" step="0.1" value="1" oninput="updateSize(this.value)">
</div>
<div class="formField">
<label>
Tail (<span id="tailAmount">5</span>)
</label>
<input type="range" min="1" max="100" step="1" value="5" oninput="updateTail(this.value)">
</div>
<div class="formField toggles">
<label>
Show Boundaries
<input name="cube" type="checkbox" onchange="showCube(this.checked)">
</label>
</div>
<div class="formField toggles">
<span style="margin-right: 10px;">
Colors
</span>
<label>
<input name="colors" type="radio" value="random" onchange="selectColors(this.value,this.checked)">
Random
</label>
<label>
<input name="colors" type="radio" value="position" onchange="selectColors(this.value,this.checked)" checked>
Position
</label>
<label>
<input name="colors" type="radio" value="epilepsy" onchange="selectColors(this.value,this.checked)">
Seizure Danger
</label>
</div>
<div class="formField vertical">
<label>
Music File
</label>
<input type="file" id="file">
<span id="fileStatus"></span>
<button
id="stopButton"
style="display: none"
onclick="stopSong(this)">
Stop Song
</button>
</div>
<div class="formField toggles">
<span style="margin-right: 10px;">
Song Vizualisation Type
</span>
<label>
<input name="vizType" type="radio" value="bars" onchange="selectVizType(this.value,this.checked)" checked>
Bars
</label>
<label>
<input name="vizType" type="radio" value="fountain" onchange="selectVizType(this.value,this.checked)">
Fountain
</label>
</div>
</div>
</div>
<div id="about" class="tabcontent">
<h1>Musical Swarm Simulation</h1>
<p>
This is an experiment with sound synthesizers and a particle flocking/attraction algorithm made for a computer science class at UFRGS (Universidade Federal do Rio Grande do Sul). The algorithm was based on <a target="_blank" href="http://www.inf.ufrgs.br/~johann/jsfs.html">previous work</a> by the class' professor, Marcelo Johann.
</p>
<p> You can zoom with the mouse wheel, rotate the particles pressing the left mouse button and pan around the 3D space with the right mouse button. The algorithm's parameters are controllable in the other tab, so <a href="#animation">play with them!</a></p>
<p>Here is a brief explanation of what each parameter does:</p>
<dl>
<dt>Radius</dt>
<dd>Controls how much particles affect each other, particles will look for neighbors in the specified radius in order to calculate the flocking and attraction behaviors.</dd>
<dt>Attraction</dt>
<dd>Affects how much particles will attract each other.</dd>
<dt>Flocking</dt>
<dd>Creates a flocking effect, where particles will tend to move in the same direction.</dd>
<dt>Repellency</dt>
<dd>The opposite of attraction, makes particles repel each other.</dd>
<dt>Velocity</dt>
<dd>The magnitue at which the other parameters affect the particles' movement.</dd>
<dt>Randomness</dt>
<dd>Adds randomness to the particles' movement.</dd>
<dt>Damping</dt>
<dd>Dampens the effects of other parameters.</dd>
<dt>Size</dt>
<dd>The radius of each particle's head.</dd>
<dt>Tail</dt>
<dd>Should affect the length of each particle's tail, but not yet implemented.</dd>
<dt>Show Boundaries</dt>
<dd>Shows the boundaries to which the particles try to be contained. (Tip: try raising repellency to see this is not always true!)</dd>
<dt>Colors</dt>
<dd>Changes particle colors, the options are: a random color for each particle, color based on position in 3D space, and a random color every frame. (WARNING: people with epilepsy or similar conditions should avoid this last option)</dd>
<dt>Music File</dt>
<dd>You can upload a song file (readable by the Web Audio API) and the particles will react to the song data,
while still following the previous parameters, making for an interesting music visualization.</dd>
<dt>Song visualization mode</dt>
<dd>There two visualization modes, named "bars" and "fountain", upload a song, rotate the camera around and see for yourself what they do.</dd>
</dl>
</div>
</div>
<script src="js/lib/three.min.js"></script>
<script src="js/lib/OrbitControls.js"></script>
<script src="js/globals.js"></script>
<script src="js/setup-scene.js"></script>
<script src="js/particle.js"></script>
<script src="js/ui-callbacks.js"></script>
<script src="js/run.js"></script>
</body>
</html>