forked from mattbierbaum/moshpits.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (128 loc) · 7.6 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
<html>
<head>
<script src="graph.js"></script>
<script src="entbody.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-38463781-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<link rel="stylesheet" href="style.css">
<title>Moshpits.js</title>
</head>
<body>
<div id='big'>
<center><h1>Moshpits Simulation</h1></center>
<div id='entbody'>
<canvas id='canvas' height=400 width=400></canvas>
</div>
<div id='panelcontainer'>
<!-- =================== add control panel items between here ============== -->
<div id='panel'>
<div>
<label class='eb_label' for="epsilon" title="How elastic the MASHers appear to one another">Soft sphere</label>
<input style='width:150px;' type="range" id="epsilon" min=1 max=300.0 step=1 value=5 onchange="update_epsilon()"></input>
<span class='eb_span' id="label_epsilon"></span>
</div>
<div>
<label class='eb_label' for="flock" title="How strongly MASHers tend to follow each other">Flock strength</label>
<input style="width:150px;" type="range" id="flock" min=0 max=5.0 step=0.1 value=0.5 onchange="update_flock()"></input>
<span class='eb_span' id="label_flock"></span>
</div>
<div>
<label class='eb_label' for="noise" title="How random their motion is (without collisions)">Noise strength</label>
<input style="width:150px;" type="range" id="noise" min=0 max=10.0 step=0.2 value=0.0 onchange="update_noise()"></input>
<span class='eb_span' id="label_noise"></span>
</div>
<div>
<label class='eb_label' for="speed" title="How fast red MASHers want to move">Speed</label>
<input style="width:150px;" type="range" id='speed' min=0 max=5.0 step=0.25 value=0.0 onchange="update_speed()"></input>
<span class='eb_span' id="label_speed"></span>
</div>
<div>
<label class='eb_label' for="damp" title="Sets the timescale to reach the desired speed">Damping</label>
<input style="width:150px;" type="range" id="damp" min=0 max=5.0 step=0.05 value=0.0 onchange="update_damp()"></input>
<span class='eb_span' id="label_damp"></span>
</div>
<div>
<label class='eb_label' for="boxsize" title="The physical system size">Box size</label>
<input style="width:150px;" type="range" id="boxsize" min=10 max=100 step=0.2 value=0.0 onchange="update_boxsize()"></input>
<span class='eb_span' id="label_boxsize"></span>
</div>
<div>
<label class='eb_label' for="dt" title="Integration timestep">Delta t</label>
<input style="width:150px;" type="range" id="dt" min=0.01 max=0.2 step=0.01 value=0.0 onchange="update_dt()"></input>
<span class='eb_span' id="label_dt"></span>
</div>
<div>
<label class='eb_label' for="frames" title="How many integration timesteps to skip between redraw">Frameskip</label>
<input style="width:150px;" type="range" id="frames" min=1 max=20 step=1 value=0.0 onchange="update_frames()"></input>
<span class='eb_span' id="label_frames"></span>
</div>
<div>
<label class='eb_label' for="frac" title="Max percentager of red MASHers (requires restart)">Fraction Red</label>
<input style="width:150px;" type="range" id="frac" min=0.0 max=1.0 step=0.01 value=0.0 onchange="update_frac()"></input>
<span class='eb_span' id="label_frac"></span>
</div>
<div>
<label class='eb_label' for="colscale" title="The scale for the force colors (must check 'Show forces')">Color Scale</label>
<input style="width:150px;" type="range" id="colscale" min=0.01 max=100.0 step=0.1 value=0.0 onchange="update_colscale()"></input>
<span class='eb_span' id="label_colscale"></span>
</div>
<div>
<center>
<input type='checkbox' id='periodicx' value=1 onclick='update_pbcx()'><label title="Enforces periodic boundaries in the x direction">x-periodic --</label></input>
<input type='checkbox' id='periodicy' value=1 onclick='update_pbcy()'><label title="Enforces periodic boundaries in the y direction">y-periodic --</label></input>
<input type='checkbox' id='showforce' value=1 onclick='update_force()'><label title="Depict forces via gray scale colors on each particle">Show forces</label></input>
</center>
</div>
<div>
<center>
<input type='checkbox' id='docircle' value=1 onclick='update_circle()'><label title="Initialize the red MASHers in a circle">Circular ICs --</label></input>
<input type='checkbox' id='vorticity' onclick='update_vorticity()'><label title="Calculate and display the graphs at the bottom">Show Graphs</label></input>
<!--<input type='checkbox' id='music' onclick='update_music()'>Music</input>-->
</center>
</div>
<br/>
<div>
<center>
<label class='eb_label' for='num'>Particle count</label>
<input type='text' id='num' value=0></input>
<input type='button' value='Change' onclick='update_num()'></input>
</div>
<div>
<center>
<input type='button' id='pause' value='Pause' onclick='update_pause()'></input>
<input type='button' id='restart' value='Restart' onclick='update_restart()'></input>
</center>
</div>
</div>
<!-- ========================== and here ================================= -->
</div>
<div id="graphpanel">
<canvas id='graph' height=100 width=802></canvas>
</div>
<center><p><strong>Keys:</strong> WASD, space, r
</object>
</span class='eb_span'>
</p></center>
<p>An improved JavaScript implementation of the simulations presented by <a href= "https://github.com/mattbierbaum/moshpits.js">Matt Bierbaum</a>
This simulation includes social rules to make more realistic moshing behaviour
Based on the <a href="http://arxiv.org/abs/1302.1886">paper</a>
<i>Collective Motion of Moshers at Heavy Metal Concerts</i>.
More details are available at Itai Cohen's group
<a href="http://cohengroup.ccmr.cornell.edu/research.php?project=10017">website</a> including
videos of mosh pits, full simulations, and a brief description.
</p><p>Play around. The buttoms above set up interesting initial conditions while the
sliders allow you to control the parameters of the model. The keys WASD allow you to
apply external forces to active MASHers. The graphs, as listed from the left, are
a time average of the angular momentum, the current angular momentum, and the speed distribution.
Read the <a href='help.html'>help</a> for more information. HTML to <a href="embed/example.txt">embed</a>.</p>
</div>
</body>
</html>