Planche de Galton (finale)

by 18_102_elias

HTML

<body>
<h1>
    PLANCHE DE GALTON 
</h1>
<h2>
    Chute de la bille
</h2>

<fieldset>

  <p>
    Nombre de sorties : <input type='number'  id='input_NbSorties' size='4' min='6' max='500' value ='6'>
      <button id='bouton' class='bouton'>Lancer la simulation</button>
  </p>

  <a href="https://jsfiddle.net/18_102_elias/8xmbndev/embedded"  target="_blank">Pour avoir les statistiques...</a>
</fieldset>
  
  
  <p>
   <canvas id="myCanvas" width="500" height="500" ></canvas>
  </p>
  <span id='result'></span>

CSS

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

.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 Tampon (idx,ep,couleur,li,co){
  if (idx > 0){
    co = idx % 500;
    li = (idx - co) / 500;}
/////
  ctx.beginPath();
  ctx.arc(co, li, ep, 0, 2 * Math.PI);
  ctx.fillStyle = couleur;
  ctx.fill();
}






////////////////////////////////////////////////
///////  PREMIER BLOC POUR L'AFFICHAGE /////////
////////////////////////////////////////////////


$("#input_NbSorties").on("change",function(){
	init();
})





function init (){
  reset();
  sorties = $('#input_NbSorties').val();
  var X = 500;			//taille Canvas
  var x = sorties
  var A = X/x;			//taille d'une sortie
  var T = x/2;			//distance mur <-> pic 
  var ep = Math.round(Math.pow((500/x),0.5));
  var h = Math.round(X/(x-1));		//distance entre 2 rangées de pics
  var t = 0; 				//nombre d'espaces interpics par rangées
  var E = 0.5;        //numéro de l'étape en cours de Haut->Bas (les étapes de H)
  var e = 0;					//numéro du pics dessiné en comptant de R->L

  PosiPic(sorties,h,E,T,e,A,t,ep);
}






function PosiPic (x,h,E,T,e,A,t,ep){

//Definition de variables//
var idx;
var noir = "black";

///CALCUL D'idx EN PARTANT DE 0///

	// for : Mise à jour des variables pour chaque étape de la chute //
	 for(var i = 0; i < x-1; ++i){					
   			
        // for : Calcul idx en fonction des compteurs d'étapes Ee et des totaux Tt //
        for(var i2 = 0; i2 <= t; ++i2){							
           if (h % 2 == 1){
                	idx = 250;
           }else {idx = 0}
         		 		  idx = idx + E*h*500;
							 		idx = idx + (T*A);
	    						idx = idx + (e*A);
	        	  	  idx = Math.floor(idx);
		              Tampon(idx,ep,noir,0,0);
							e = e + 1;
              
				}
			e = 0
      E = E + 1;
     	
      t = t + 1;
      T = T - 0.5;
	 }
}







/////VAR GLOBALES/////
  var c = document.getElementById("myCanvas");
  var ctx =...