11496 sujets

JavaScript, DOM et API Web HTML5

Bonjour, je suis en terminal S, spécialité ISN. Et avec mon collègue, nous sommes totalement bloqué depuis 4-5 semaines sur notre programme.

En effet, nous cherchons à créer une courbe paramétrique à l'aide nos cours de physique. C'est à dire :

y(x) = - 1/2 * g ( x / ( Vo * cos a)² + Vo * sin a * ( Vo * cos a)

avec g = gravité soit (9.81)
Vo = vitesse initiale
a = angle de tire de départ

Par conséquent la balle change de direction, quant on change les paramètres si dessus.

Nous avons essayer de le créer en canvas (car on avait trouvé un programme tout fait avec des balles qui rebondissaient)

Malheureusement étant totalement novice, nous n'avançons pas du tout.

Voici "notre" programme ->

<html>
<head>
	<title>ExplorerCanvas Example 1</title>
	<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
	<script type="text/javascript"> 

var canvas, ctx;
		var particles = [];
		var NUM_PARTICLES = 1;
        var haut = 0;
        var vitesse = 0;
        var angle = 0;
		haut = prompt('Saisir la valeur de la hauteur, située entre 0-500');
		vitesse = prompt('Saisir la valeur de la vitesse, située entre 0-250')
		angle = prompt('Saisir la valeur de l angle de tire, située entre 0-90')
	   
		
		function Particle() {
			
			this.x = 0;    
			this.y = 500-haut; 

			this.xvel = vitesse * Math.cos((2*3.14-angle*3.14/180)) ;   
			
                        this.yvel = -9.81* (this.x/ (vitesse * (Math.cos(2*3.14-angle*3.14/180)))) + (vitesse * Math.sin(2*3.14-angle*3.14/180));
		}

		Particle.prototype.update = function() {      
			this.x = this.x + this.xvel
			this.y = this.y + this.yvel

			 this.yvel = this.yvel + 0.01 ;             

			if (this.x > canvas.width || this.x < 0) {  
				this.xvel = -this.xvel;
			}

			if (this.y > canvas.height || this.y < 0) {
				this.yvel = -this.yvel;
			}
		}

		function loop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

			for(var i = 0; i < NUM_PARTICLES; i++) {
				particles[i].update();

				ctx.beginPath(); 
				
				ctx.moveTo(particles[i].x, particles[i].y);
				ctx.lineTo(particles[i].x + particles[i].xvel,particles[i].y + particles[i].yvel);

				
				ctx.stroke();
				ctx.closePath(); 
			}


			setTimeout(loop, 0.1);
		}

		function load() {
			canvas = document.getElementById("cv");
			ctx = canvas.getContext("2d");
			
             ctx.beginPath() ;
             ctx.moveTo(400,500);
             ctx.lineTo(400,450);
             ctx.lineWidth = 8;
             ctx.strokeStyle = "rgb(140, 233, 20)";
             ctx.stroke();
			for(var i = 0; i < 100; i++) {
				particles[i] = new Particle(); 
			}

			ctx.lineWidth = "3.5";
			ctx.strokeStyle = "rgb(219, 233, 20)";
			loop();
		}
		

</script>
	<style>
		body {
			background-color:black;
			margin:50px;
			text-align:center;
		}

		canvas {
			border:1px solid #444;
		}
	</style>
</head>
<body onload="load();">
	<canvas id="cv" width="800" height="500"></canvas>
</body>
</html>


Si quelqu'un peut nous aider, nous en serons entièrement reconnaissant. Je ne sais pas si cela demande beaucoup de travaille par contre, j'en suis désolé.

Au revoir et merci pour votre aide. [/i][/i][/i][/i][/i][/i][/i][/i]
Modifié par Urgent (07 Apr 2014 - 11:07)