Compléments au script : dessin du projectile
Attention, votre navigateur ne supporte pas le javascript ou celui-ci à été désactivé. Certaines fonctionnalitées dynamiques de ce module sont restreintes.
Le projectile est dessiné sous forme d'un cercle plein bleu, de rayon 5.
Un cercle se définit par arc(abscisse centre, ordonnée centre, rayon, angle de départ, angle de fin).
Un cercle devient plein par la méthode fill.
Le cercle a pour centre un point appartenant à la courbe qui modélise la trajectoire. Cette courbe est une parabole déjà saisie. Une variable appelée compteur allant de 0 à 600 décrira l'abscisse. L'ordonnée sera obtenue par la fonction f(x). Cette fonction est déjà saisie.
La variable compteur est ajoutée au début du script, à la suite de la variable intervalle. Sa valeur initiale est 0.
A chaque appel de la fonction dessin, le compteur sera incrémenté d'un pas de 1 excepté si le projectile a atteint le sol (ordonnée à 0).
Le projectile part dès que la page est chargée. Afin de laisser le temps à l'utilisateur d'effectuer ses réglages, il est nécessaire de placer un bouton sur lequel l'opérateur appuiera pour effectuer le tir.
<!DOCTYPE HTML>
<html lang = "fr">
<head>
<title>modéliser tir</title>
<link rel="stylesheet" media="screen" href="styles.css" type="text/css">
<meta charset = "utf-8" />
</head>
<body>
<canvas id = "schema" height = "300" width = "600" style="border:1px solid">Votre navigateur ne supporte pas la balise canvas</canvas><br/>
Vitesse lancement <input type="range" id="Vi" min="50" max="200" step="10" value="50"> cm/s<br/>
Angle de lancement<input type="range" id="alpha" min="-90" max="90" step="1" value="45">°<br/>
Hauteur lancement <input type="range" id="hauteur" min="0" max="250" step="10" value="100">cm<br/>
<script>
var zone_dessin = document.getElementById("schema");
var tir = zone_dessin.getContext('2d');
var intervalle=setInterval(dessin,30);
var compteur=0;
function dessin() {
tir.clearRect(0,0,600,300);
var hauteur=document.getElementById('hauteur');
var alpha=document.getElementById('alpha');
tir.beginPath();
tir.lineWidth="5";
tir.moveTo(10,290-hauteur.value);
tir.lineTo(10+10*Math.cos(2*Math.PI*alpha.value/360),290-hauteur.value-10*Math.sin(2*Math.PI*alpha.value/360));
tir.stroke();
tir.fillStyle="blue";
tir.beginPath();
tir.arc(compteur+10,290-f(compteur),5,0,Math.PI*2);
tir.fill();
if(f(compteur)>=0) compteur=compteur+1;
tir.fillStyle="green";
tir.fillRect(400,270,20,20);
tir.beginPath();
tir.lineWidth="1";
tir.strokeStyle="black";
tir.moveTo(0,290);
tir.lineTo(600,290);
tir.moveTo(10,300);
tir.lineTo(10,0);
tir.stroke();
tir.fillText(100,111,300);
tir.fillText(300,311,300);
tir.fillText("distance (cm)",520,285);
tir.fillText("hauteur (cm)",20,10);
tir.fillText(100,20,190);
}
function f(x) {
var y=-0.5*9.81*x*x*(1+(Math.tan(2*Math.PI*alpha.value/360))*(Math.tan(2*Math.PI*alpha.value/360)))/(Vi.value*Vi.value)+x*Math.tan(2*Math.PI*alpha.value/360)+hauteur.value*1;
return (y);
}
</script>
</body>
</html>
