afficheImage TPE n°2

by 18_102_elias

HTML

<body>
<h1>
    PLANCHE DE GALTON
</h1>


<fieldset>
  Nombre de sorties ? <input type='number'  id='input_NbSorties' size='4' min='6' max='350' value ='10'>
  Epaisseur des pics ? <input type='number'  id='input_Epaisseur' size='4' min='1' max='100' value ='5'>
  
    <button id='bouton' class='bouton'>Lancer la simulation</button>
  
  <button id='bouton_MiseAJour' class='bouton'>mettre à jour la planche</button>
  
  Vitesse de la bille : <input type='range'  id='input_vitesse' size='4'  min='1' max='100'>
</fieldset>
  
  
  <p>
   <canvas id="myCanvas" width="500" height="500" ></canvas>
  </p>
 
  <!--à mettre en canvas qui se crée tout seul, puis affiche la chute de la bille en diaporama -->

CSS

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

JavaScript

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



$("#bouton_MiseAJour").on("click",function(){
	init();
})


function init (){
		//drawImage();
var X = 500;			//dimension en pixel du canvas
var Y = 500;
var x = parseInt(document.getElementById("input_NbSorties").value); //$('#input_NbSorties');				//NbSorties
var H = x-1;			//le nombre d'étapes
var A = X/x;			//la taille d'une sortie en pixel
var T = x/2;			//la distance entre les murs et le triangle de pics
var ep = parseInt(document.getElementById("input_Epaisseur").value); //$('#input_NbSorties');				//diamètre de chaque pic
var h = Math.round(X/H);			//le nombre de lignes vides entre chaques lignes à pics
var t = 0; 				//nombre d'espaces interpics par ligne
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
//alert("avant monImageData");
//////
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var monImageData = ctx.createImageData(500, 500);				//deux variables pour le fond d'écran

ctx.rect(0, 0, 500, 500);
ctx.fillStyle = "white";
ctx.fill();

alert("init finit");
PosiPic(h,E,X,T,e,A,H,t,ep);		//toutes les variables marchent
}


function PosiPic (h,E,X,T,e,A,H,t,ep){			//et NegaPic mdr 
alert("PosiPic start");
			for(var i = 0; i < H; ++i){							// for des étapes
              
///======= Barrière de Ca marche !!!!======///
              
          		for(var iii = 0; iii <= t; ++iii){
///======= Barrière de Ca marche !!!!======///;
											aff(E,'E =');aff(h,'h =');aff(X,'X =');
                      if (h % 2 == 1){
                      	h = h - 1;
                        		if(h == 0){
                            	h = h + 2;
                            }
                      }
                      var idx = E*h*X;
    											idx = idx + (T*A);
    											idx = idx + (e*A);
    ...