added test for random generator

index.html

@@ -46,15 +46,16 @@ <h2>growingSurfaces
           <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><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>
+              <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>
@@ -106,8 +107,12 @@ <h4>What to expect</h4>
    * 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); }
+  if(global_choose_deposition == 'RD'){ 
+    random_deposition_update(mydata); 
+  }
+  if(global_choose_deposition == 'BD'){ 
+    ballistic_deposition_update(mydata); 
+  }
   animation(svg1,mydata);
 }
 

js/grid.js

@@ -17,8 +17,6 @@ function grid_main(){
   setInterval(step,100/15,svg1,mydata); // step defined in index.html
 };
 
-
-
 function render(svg1,mydata){
   svg1.selectAll('rect')
     .data(mydata)
@@ -31,7 +29,6 @@ function render(svg1,mydata){
     .attr("y",function(d){ return sq*d.y;});
 }
 
-
 function clear_grid(){
   for(var n=0; n<N; n++){
     for(var m=0; m<M; m++){
@@ -107,7 +104,6 @@ function clear_stats(){
   s_data = [];
 }
 
-
 function col_h(arr,n){ // get height of n-th column
   var h = M;
   var this_full = false;
@@ -202,7 +198,3 @@ function get_interface(arr){
 }
 
 
-
-
-
-

js/grid_navigation.js

@@ -1,22 +1,29 @@
 function load_listeners(){
   document.getElementById("RD").addEventListener("click", switch_RD);
   document.getElementById("BD").addEventListener("click", switch_BD);
+  document.getElementById("stop").addEventListener("click", stop_sim);
   //document.getElementById("clear_graph").addEventListener("click", clear_graph);
 }
 function switch_RD(){
   clear_grid();
   clear_stats();
   clear_graph();
   global_choose_deposition = 'RD';
-  //document.getElementById("describe-deposition")
-   // .innerHtml = "random deposition";
+  turn_off_lights();
+  document.getElementById("rndtitle").style.color = "red";
 }
 function switch_BD(){
   clear_grid();  
   clear_stats();
   clear_graph();
   global_choose_deposition = 'BD';
-  //document.getElementById("describe-deposition")
-   // .innerHtml = "ballistic deposition";
+  turn_off_lights();
+  document.getElementById("baltitle").style.color = "red";
+}
+function stop_sim(){
+  global_choose_deposition = null;
+}
+function turn_off_lights(){
+  document.getElementById("rndtitle").style.color = "";
+  document.getElementById("baltitle").style.color = "";
 }
-

test_ran.html

@@ -0,0 +1,50 @@
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
+<script type="text/javascript" src="js/mersenne-twister.js"></script>
+<script>
+  ;
+//var randomNumber = m.random();
+
+MT = new MersenneTwister();
+var labels = [];
+var histo = [];
+nbin = 100;
+nthrow = 1000;
+for( var i=0; i<nbin; i++){
+  labels[i] = i;
+  histo[i] = 0;
+}
+for(var i=0; i<nthrow; i++){
+  var rnd = MT.random()*nbin;
+  var num = Math.floor(rnd)%nbin;
+  //console.log(num);
+  histo[num]++;
+}
+for(var i=0; i<nbin; i++){
+  histo[i] -= nthrow/nbin;
+}
+console.log(histo);
+
+
+</script><canvas id="myChart" width="100" height="100"></canvas>
+<script>
+  var ctx = document.getElementById("myChart").getContext('2d');
+var myChart = new Chart(ctx, {
+  type: 'bar',
+  data: {
+    labels: labels,
+    datasets: [{
+      label: '# of Votes',
+      data: histo,
+    }]
+  },
+  options: {
+    scales: {
+      yAxes: [{
+        ticks: {
+          beginAtZero:true
+        }
+      }]
+    }
+  }
+});
+</script>