-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
121 lines (112 loc) · 4.82 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
<!DOCTYPE html>
<html>
<head>
<style>
.svgc {
position: static;
left: 10px;
top: 10px;
}
</style>
<meta charset="utf-8">
<!-- Bootstrap Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Awesome fonts (icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- D3 library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- grid functions -->
<script type="text/javascript" src="js/grid.js"></script>
<script type="text/javascript" src="js/grid_navigation.js"></script>
<script type="text/javascript" src="js/graphs.js"></script>
<script type="text/javascript" src="js/mersenne-twister.js"></script>
<!-- Mersenne Twistercode from https://gist.github.com/banksean/300494 -->
</head>
<body>
<div id="main" class="container">
<div class="container col-sm-6">
<div class="" id="">
<div class="page-header" id="">
<h2>growingSurfaces
<small>by <a href="http://gabrielelabanca.github.io/">Gabriele Labanca</a>
<br>
<a href="https://github.com/GabrieleLabanca/growingSurfaces">See github</a></small>
</h2>
</div>
<div class="text-info">
</div>
<div style="clear:both"></div>
</div>
<div class="">
<div>
<button class="btn btn-default" id="RD">random deposition</button>
<button class="btn btn-default" id="BD">ballistic deposition</button>
<button class="btn btn-default" id="stop">STOP</button>
</div>
<div id="describe-project">
<p>
Inspired by <a href="http://barabasi.com/book/fractal-concepts-in-surface-growth">Fractal Concepts in Surface Growth</a> by <a href="http://barabasi.com">Barabasi</a> and <a href="http://physics.bu.edu/people/show/68">Stanley</a>.
<br>
This simple model simulates a growing surfaces with basic algorithms (which can be switched with the buttons):
<ul>
<li><span ><b id="rndtitle">random deposition</b></span>: a random column is chosen, then incremented, such as a particle fell on it;</li>
<li><span id="baltitle"><b>ballistic deposition</b></span>: this simulates a somehow "sticky" particle, which will stop its falling if it gets in contact with a higher column near the chosen one.</li>
</ul>
</p>
<h4>What to expect</h4>
<p>
Since the random deposition model does not introduce any correlation (as long as there are none in the random number generation), the <b>surface width</b> (here defined as a random mean square deviation) is expected to grow indefinitely.
However, when a correlation is introduced, as it is done switching to a ballistic deposition model, it is expected to have a <b>saturation</b>, that is an halt in the thickening of the surface.
<p class="alert alert-info">
By now, the saturation is not yet visible. I will be working on this issue: probably the problem originates from the random number generation.
</>
</p>
</div>
</div>
</div>
<div class="container col-sm-6">
<div><svg class="svgc" id="svg1" width="100" height="200"></svg></div>
<div><svg class="svgc" id="svg_graph_iw" width="100" height="200"></svg></div>
<!--button id="clear_graph">clear graph</button-->
<div><table style="width:100%">
<tr>
<th>Mean height</th>
<th id="mean_height"></th>
</tr>
<tr>
<th>Interface width</th>
<th id="interface_width"></th>
</tr>
</table></div>
<div><p><br></p></div>
</div>
</div>
<script type="text/javascript">
//global variable to choose type of deposition
var global_choose_deposition;
var mydata; //have to declare it global to clear
window.onload=function(){
load_listeners();
grid_main();
graphs();
}
function step(svg1,mydata){
/* DEPOSITION MODE
* define a *_update(mydata) function
* for index value, use getn(n,m) -> corresponding index of array
*/
if(global_choose_deposition == 'RD'){
random_deposition_update(mydata);
}
if(global_choose_deposition == 'BD'){
ballistic_deposition_update(mydata);
}
animation(svg1,mydata);
}
</script>
</body>
</html>