Distribution Sampling

by aholdorf

HTML

<div id="settingsDiv">
  Drop Events: <input type="text" id="dropsField" value="50"> <br/><br/>
  Spaces: <input type="text" id="spacesField" value="16"><br/><br/>
  <br/> <br/>
  <input type="button" value="Run" id="runButton"> <input type="button" value="Stop" id="stopButton">
</div>
<div id="displayDiv">
<canvas id="canvas" width="1000" height="800">
  
</canvas>
</div>

CSS

.left{
  float: left;
}
.right{
  float: right;
}
.clear{
  clear: both;
}
.hint{
  font-size: 75%;
  font-style: italic;
}
#settingsDiv{
  border-bottom: solid black 1px;
  width: 1000px;
  padding: 20px;
}
#dropsField, #spacesField{
  width: 40px;
}

JavaScript

var c;
var g;
var spaces = 16;
var drops = 50;
var timer;
var buckets = [];
var base;
var row;
var col;
var animation;
var running = false;

function drawBoard(){
	g.fillStyle = "#000000";
  g.strokeStyle = "#000000";
  for(var j=0;j<spaces;j++){
    for(var i=Math.floor(j/2);i<spaces+1-Math.ceil(j/2);i++){
			g.beginPath();
      g.arc(150+i*16+8*(j%2),(spaces+2)*10-j*10,1,0,2*Math.PI);
      g.fill();
      g.closePath();
    }
  }
  g.strokeStyle = "#CCCCCC";
  for(var i=0;i<spaces+1;i++){
  	g.beginPath();
    g.moveTo(150+i*16,(spaces+2)*10+10);
    g.lineTo(150+i*16,base);
    g.stroke();
    g.closePath();
  }
  g.fillStyle = "#FF0000";
  g.beginPath();
  g.arc(158+col*16,(spaces+2)*10-row*10,3,0,2*Math.PI);
  g.fill();
  g.closePath();
}

function drawResult(){
	g.fillStyle = "#FFFFFF";
  g.fillRect(0,0,1000,800);
  drawBoard();
  
	g.fillStyle = "#000000";
  g.strokeStyle = "#000000";
  for(var i=0;i<spaces;i++){
  	g.beginPath();
    
    g.moveTo(158+i*16,base);
    g.lineTo(158+i*16,base-buckets[i]);
    
    g.stroke();
    g.closePath();
    
    g.fillText("Bucket " +(i+1) + ": " + buckets[i],25,30+30*i);
  }
}

function drawResult2(){
	g.fillStyle = "#FFFFFF";
  g.fillRect(0,0,1000,800);
  drawBoard();
  
	g.fillStyle = "#000000";
  g.strokeStyle = "#000000";
  for(var i=0;i<spaces;i++){
  	g.beginPath();
    g.moveTo(500+(i-spaces/2)*5,base);
    g.lineTo(500+(i-spaces/2)*5,base-buckets[i]);
    g.stroke();
    g.closePath();
    
    g.fillText("Bucket " +(i+1) + ": " + buckets[i],25,30+30*i);
  }
}

$("#runButton").on("click",function(){
	sample();
});

$("#stopButton").on("click",function(){
	clearInterval(timer);
});


function sample(){
	spaces = parseInt($("#spacesField").val());
  if(spaces < 3){
  	spaces = 3;
  }
  if(spaces > 26){
  	spaces = 26;
  }
  $("#spacesField").val(spaces);
  drops = parseInt($("#dropsField").val());
  if(drops < 10){
  	drops = 10;
  }
  if(drops > 5000){
  	drops = 5000;
  }
 ...