Planche de Galton (Stats)

by 18_102_elias

HTML

<body>


<h1>
  PLANCHE DE GALTON
</h1>
<h2>
  Statistiques et loi des grands nombres
</h2>

<a href="https://jsfiddle.net/18_102_elias/71aL4cvw/" target="_blank">Pour revoir la chute...</a>

<p>


  <fieldset>
    <legend>
      Paramètres de l'histogramme
    </legend>

    <p>
      Nombre de sorties : <input type='number' id='input_NbSorties' size='4' min='5' max='500' value='30' step='5'> Nombre de lancers : <input type='number' id='input_lancers' size='4' min='200' max='100000' value='1500' step='100'>
    </p>
  </fieldset>

</p> 




<fieldset>
  <legend>
    Informations sur l'histogramme
  </legend>
  <div id='info'>


    <li>La probabilité que la bille tombe au centre est de : <span id='span_reel_proba'></span></li>
    
    <span id='span_pic_proba'></span>
    
    <li>Nombre de lancers : <span id='span_compteur'></span></li>

  </div>
</fieldset>

<p>
  <button id='bouton_stats' class='bouton'>Mode défilement</button>
  <button id='bouton_instant' class='bouton'> Mode instantané </button>
  <button id='bouton_stop' class='bouton'>Arrêt</button>
</p>


<p>
  <canvas id="myCanvas" width="500" height="500"></canvas>
</p>



</body>

CSS

canvas {
  border: 3px solid grey;
    background-color: rgb(255, 255, 255);
}

body {
  background-color: rgb(255, 255, 255);
}

fieldset {
  background-color: rgb(255, 255, 255);
}

.bouton {
  height: 24px;
  vertical-align: top;
  background-color: rgb(255, 255, 200);
  color: black;
}

a:link,
a:visited {
  background-color: rgb(255, 255, 200);
  padding: 3px 10px;
  color: black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border: 2px solid lightgrey;
}

a:hover,
a:active {
  background-color: red;
}

JavaScript

function aff(variable,texte=""){   
             console.log(Object.prototype.toString.call(variable)
             + " --- " + texte, variable);
}





function reset(){

	///ECRAN BLANC///
  var monImageData = ctx.createImageData(500, 500);
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, 500, 500);
}




/////VAR GLOBALES/////

	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");
	var stats = $("#bouton_stats");
  var stop = $("#bouton_stop");
  var instant = $("#bouton_instant");
  var sorties;
  var compteur = null;
  var myVar;
  var duree;
	var lancers;
  var result;
  var listeResult;
  var pic = 0;
  
  
  
  

stats.on('click',function(){		//TimeLapse de la ChuteBille
	///ON METS TOUT A ZERO///
reset();
clearInterval(myVar);

	///DEFINITION DE VARIABLES POUR setInterval///
	sorties = $('#input_NbSorties').val();
  lancers = $('#input_lancers').val();
  
  if (lancers > 10000){
    			alert("Nombre de lancers trop grand pour le Mode Défilement.")}
  else {
        if(lancers>5000){
          alert("Le défilement risque d'être lent !");
        }
      compteur = lancers-1;
      duree = 1000/(lancers*5);
      listeResult = [];
      test();
      result = 0; 

        myVar = setInterval(ChuteBille, duree);
      }
})





function test (){
///FAUSSES VALEURS POUR Stats()///
var ajustHisto = sorties*(-1)+1;
		for (var i = 0; i<= sorties-1; i = i+1){			
        listeResult.push(ajustHisto);
        ajustHisto = ajustHisto + 2;    
		}
return listeResult;
}





function ChuteBille (){
////PARTIE HASARD////
var sorties2 = sorties;
var NewResult = result;

//Calcul des nouveaux resultats//
for (var i = 1; i<= (sorties-1); i = i+1){
	var hasard = Math.random();
		if (hasard < 0.5){
			NewResult = NewResult - 1; }
    else {
    	NewResult = NewResult + 1; }

}
	listeResult.push(NewResult);

	Stats();

//calcul de la probabilité d'atterir dans le pic central///
  if (NewResult === 0){pic = pic+1}			// pour un nombre de sortie impair
 ...