-
Notifications
You must be signed in to change notification settings - Fork 3
/
avalanche2d.html
251 lines (248 loc) · 11.7 KB
/
avalanche2d.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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html>
<head>
<title>Avalanche-JS Demo</title>
<link href="stylesheets/style.css" rel="stylesheet" type="text/css"/>
<script src="lib/sprintf.js" type="text/javascript" ></script>
<script src="src/grapher.js" type="text/javascript" ></script>
<script src="lib/d3/d3.js" type="text/javascript" ></script>
<style type="text/css">
#patchesCanvas {
width:400px;
height:400px;
padding:0px;
background-color:lightgray;
color:gray;
border: solid 1px #cccccc
}
</style>
<script type="text/javascript">
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
return window.setTimeout(callback, 1000/60);
};
})();
window.cancelRequestAnimFrame = (function() {
return window.cancelCancelRequestAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.oCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
window.clearTimeout;
})();
// a simple JavaScript source code loader
function myRequire(src, callback){
var libraries;
if (src.constructor === Array) {
libraries = src;
} else {
libraries = [src];
}
var script = document.createElement("script");
script.type = "text/javascript";
// IE
var ie = false;
script.onreadystatechange = function () {
ie = true;
if (script.readyState === 'loaded' || script.readyState === 'complete') {
script.onreadystatechange = null;
libraries.shift();
if (libraries.length > 0) {
myRequire(libraries);
}
if (callback) {
callback();
}
}
};
// Not IE
script.onload = function () {
if (!ie) {
libraries.shift();
if (libraries.length > 0) {
myRequire(libraries);
}
if (callback) {
callback();
}
}
};
script.src = libraries[0];
document.getElementsByTagName("head")[0].appendChild(script);
}
</script>
</head>
<body>
<div id="container">
<div id="header-inner">
<h1 id="title">Avalanche-JS Demo</h1>
<p>
A partial <a href='https://github.com/stepheneb/avalanche2d-js'>JavaScript adaptation</a>
of Bob Tinker's <a href='http://ccl.northwestern.edu/netlogo/'>NetLogo</a> model
<a href = 'nlogo/Bureaucrats.v6.nlogo'>Bureaucrats.v6</a> exploring
<a href="http://en.wikipedia.org/wiki/Self-organized_criticality">Self-Organised Criticality</a>.
</p>
<blockquote>
The mathematics of avalanche size and frequency follows a power law that can be simulated to
a first approximation by any system that exhibits self-organized criticality (SOC). In "How
Nature Works" Per Bak reports a simplified model of a sandpile that he, Chao Tang, and Curt
Wiesenfeld developed that shows SOC, the so-called BTW model. Bak also mentions that
Grassberger describes a representation of this model that is fanciful but equivalent to the
BTW model. Imagine an N-by-N grid of office desks and a bureaucrat sitting at each. A folder
is randomly assigned to one desk. The bureaucrat does nothing until four or more folders are
on his desk at which time he sends one to each of his four nearest neighbors. Any bureaucrat
sitting at the edge of this array throws a folder out the window if there is no desk to send
it to. Sometimes, adding one folder can cause multiple redistributions of folders as one
bureaucrat's actions causes neighbors to exceed three folders, which then ripples through
the office. In principle, just adding one new folder might involve redistribution at every
desk, sometimes multiple times.
</blockquote>
<p>
Seth Tisue, the lead NetLogo developer has contributed both <a href="nlogo/Bureaucrats-fast.nlogo">
Bureaucrats-fast</a> a simplified re-write of <a href='nlogo/Bureaucrats.v6.nlogo'>Bureaucrats.v6</a>
that runs about 20 times as fast as the original and a version of the model algorithm written in
straight Scala <a href="nlogo/Bureaucrats-fast.nlogo">Bureaucrats.scala</a>. The speed of the
Scala version should be comparable to the speed of a native Java adaptation and is much faster than
the faster NetLogo model.
</p>
<p>
Testing Oct 28 2011 show this JavaScript adaptation runs the model about the same speed as the native
Scala version and about 12 times faster than <a href="nlogo/Bureaucrats-fast.nlogo">Bureaucrats-fast</a>
in NetLogo 5.0RC2. When displaying the folder visualization and graphing the JavaScript adaptation is
about 18 times faster (<i>Chrome 14.0.835.186 on a Mac OS X 10.6.8 system with a 2.66 GHz Intel Core i7</i>).
</p>
<p>
A Google Spreadsheet is available with more complete <a href="https://docs.google.com/spreadsheet/ccc?key=0AtvlFoSBUC5kdDM4cHJhU0I4NGg5TjlWRkQ0ZExpcGc">
Avalanche2D-JS Benchmarks</a>. comparing the performance of the model and the model, visualization, and
grapher in Scala and NetLogo and on various browsers and operating systems including Android and iOS tablets
and smartphone systems.
</p>
<p>
The initial array of desks with folders consists of 100x100 cells. A yellow cell
indicates two folders on the desk, a blue cell is zero, green one, and red three
folders. The model will automatically stop after 5000 model steps if you leave it
running.
</p>
</div>
<div id="content">
<div id="webglCanvasContainer">
<ul id="visualizations" class="hlist">
<li>
<p>Avalanche-JS Model: Rendered using an HTML5 canvas</p>
<canvas id="patchesCanvas"></canvas>
</li>
<li>
<p>Average Number of folders on a desk</p>
<div id='chart'></div>
</li>
</ul>
<ul class="hlist">
<li>
<form id="step-model">
<fieldset>
<legend>Step</legend>
<label><input type="radio" name="step" value="stop" checked> Stop</input></label>
<label><input type="radio" name="step" value="step"> Step</input></label>
<label><input type="radio" name="step" value="go"> Go</input></label>
<label><input type="radio" name="step" value="reset"> Reset</input></label>
</fieldset>
</form>
</li>
<li>
<fieldset>
<legend>Desk Array Size</legend>
<select id="select-desk-array-size">
<option value="50">50x50</option>
<option value="100" selected>100x100</option>
<option value="200">200x200</option>
<option value="400">400x400</option>
</select>
</fieldset>
</li>
<li>
<fieldset>
<legend>Maximum Model Steps</legend>
<select id="select-max-model-step">
<option value= "1000">1000</option>
<option value= "5000" selected>5000</option>
<option value= "20000">20000</option>
<option value= "80000">80000</option>
<option value="320000">320000</option>
</select>
</fieldset>
</li>
<li>
<form id="show-me">
<fieldset>
<legend>Rendering</legend>
<label><input id="show-visualization" type="checkbox" checked/> Visualization</label>
<label><input id="show-graph" type="checkbox" checked/> Graph</label>
<label><input id="show-data-table" type="checkbox"/> Folder-Desk Array</label>
</fieldset>
</form>
</li>
<li>
<fieldset>
<legend>JavaScript Array Type</legend>
<select id="select-array-type">
<option value="regular">Regular</option>
<option value="" disabled="disabled">Typed Arrays ...</option>
<option value="Uint8Array">Uint8Array</option>
<option value="Uint16Array">Uint16Array</option>
<option value="Uint32Array">Uint32Array</option>
<option value="Int8Array">Int8Array</option>
<option value="Int16Array">Int16Array</option>
<option value="Int32Array">Int32Array</option>
<option value="Float32Array">Float32Array</option>
<option value="Float64Array">Float64Array</option>
</select>
</fieldset>
</li>
<li id="step-model-warning"></li>
</ul>
</div>
<div id="stats"></div>
<div id="aloop-output"></div>
<div id="info">
<h3>About the Graph Interface built with the JavaScript library
<a href='http://mbostock.github.com/d3/'>d3.js</a></h3>
<ul>
<li><b>Translate/Pan:</b> drag on the graph canvas.</li>
<li><b>Zoom in:</b> double-click or swipe up with two fingers</li>
<li><b>Zoom out:</b> shift-double-click or swipe down with two fingers</li>
<li><b>Re-scale and axis:</b> drag on one of the X or Y axis numeric labels</li>
<li><b>Select data point:</b> click on a data point to select it</li>
<li><b>Change data point:</b> drag a selected data point to change it's value</li>
<li><b>Delete data point:</b> select data point and press the delete or backspace key</li>
<li><b>Add data point:</b> hold ALT/Option key down and click an empty area of the graph to add a data point</li>
</ul>
<h3>References</h3>
<p><a href="http://jasss.soc.surrey.ac.uk/4/4/reviews/bak.html">Review of: How Nature Works: The Science of Self-Organised Criticality, Per Bak, New York, NY: Copernicus Press 1996</a></p>
<p><a href="http://books.google.com/books?id=eBZbupdVnYAC&pg=PA94&lpg=PA94&dq=Grassberger++bureaucrat&source=bl&ots=XR7W1E61Wa&sig=06HmPg4d9YyBUz63RIphjUza1ik&hl=en&ei=MxGVTvThPIjk0QG4npnGBw&sa=X&oi=book_result&ct=result&resnum=1&ved=0CBoQ6AEwAA#v=onepage&q=Grassberger%20%20bureaucrat&f=false">Self organized criticality in earth systems By Stefan Hergarten, page 94</a></p>
<p><a href="http://www.cmth.ph.ic.ac.uk/people/k.christensen/papers/preprints/preprint_btw.pdf">On the avalanche size distribution in the BTW model</a></p>
<h3>Getting a browser that supports JavaScript Typed Arrays</h3>
<div id="getting-webgl">
<p>
On some browsers using <a href=" https://developer.mozilla.org/en/JavaScript_typed_arrays">JavaScript Typed Arrays</a>
may be faster than using regular JavaScript Arrays. Typed Arrays are available in browsers that
are <a href='http://learningwebgl.com/blog/?p=11'>WebGL-enabled</a>. Get more information about
whether your browser supports WebGL here: <a href="http://get.webgl.org/">http://get.webgl.org/</a>.
</p>
</div>
<h3>Folder-Desk Data Array:</h3>
<pre id="folder-data"></pre>
</div>
</div>
<script type="text/javascript">
window.onload=function() {
myRequire([ 'src/avalanche2d.js', 'src/a2d.js' ]);
};
</script>
</body>
</html>