-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (96 loc) · 3.72 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
<!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>
</head>
<body>
<div id="main" class="container">
<div class="container col-sm-6">
<div class="jumbotron" id="header">
<div class="" id="logo">
<h1>growingSurfaces
<small>by <a href="http://gabrielelabanca.github.io/">Gabriele Labanca</a></small>
</h1>
</div>
<div style="clear:both"></div>
<div class="text-info">
<a href="https://github.com/GabrieleLabanca/growingSurfaces">See github</a>
</div>
<div style="clear:both"></div>
</div>
<div class="">
<div>
<button id="RD">random deposition</button>
<button id="BD">ballistic deposition</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><b>random deposition</b>: a random column is chosen, then incremented, such as a particle fell on it;</li>
<li><b>ballistic deposition</b>: 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>
</div>
</div>
</div>
<div class="container col-sm-6">
<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><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>
<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>