Voir le flux RSS

autran

Interprètation graphique d'une intégrale en JavaScript

Note : 2 votes pour une moyenne de 5,00.
par , 23/04/2016 à 23h54 (1017 Affichages)
Suite à la demande d'un internaute je propose une illustration graphique en HTML5 + JavaScript de la notion d'intégrale d'une fonction. Demande générée par le billet Calculer une intégrale en JavaScript

Cela permettra de donner un peu de consistance à la notion d’intégrale (somme) de Riemann basée sur les surfaces. Cette illustration fonctionne pour les fonctions continues à valeurs dans R+ et définies sur R+. La page reprendra pour partie le code du billet précédant.

Pour le dessin on utilisera l'objet HTML5 <canvas> qui offre une surface de dessin sur laquelle on utilisera en JavaScript le contexte de rendu 2D.
On retrouvera donc une IHM qui nous permettra de saisir le domaine d'intégration (borne inférieure et borne supérieure) et le nombres d'intervalles.

Le code JavaScript sera composé de 3 fonctions (hors mis la fonction à intégrer):
  • une fonction qui récupérera les paramètres saisis par l'utilisateur
  • une fonction qui dessine l’intégrale
  • une fonction qui calcule le max de la fonction sur le domaine choisi.

Le principe retenu sera de dessiner des rectangles de la longueur de chaque intervalle (dx) et de la hauteur de f(x0)
le maximum de la fonction et la borne supérieure permettrons de mettre le graphique à l’échelle du <canvas>
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!doctype html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<title> Calcul d'intégrale </title>
		<link <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
		<script type="text/javascript">
			function carre(x){
				return (x * x);
			}
 
			function showIntegrale(){
				var borneInf = parseInt(document.getElementById("borne_inf").value, 10);
				var borneSup = parseInt(document.getElementById("borne_sup").value, 10);
				var nbreInterval = parseInt(document.getElementById("nbre_interval").value, 10);
				drawIntegrale(borneInf, borneSup, nbreInterval, carre);
			}
 
			function drawIntegrale(borneInf, borneSup, nbreInterval, callback){
				var canvas = document.getElementById("drawing");
      	                        if (canvas.getContext) {
					var interval = (borneSup - borneInf) / nbreInterval;
					var maximum = max(borneInf, borneSup, nbreInterval, interval, callback);
					var coefHoriz = canvas.width / borneSup;
					var coefVert = - canvas.height / maximum;
        	                        var ctx = canvas.getContext("2d");
					ctx.translate(0, canvas.height);
					ctx.scale(coefHoriz, coefVert);
					for ( i = 0; i < nbreInterval; i++)
						ctx.fillRect((borneInf + i * interval), 0, interval, callback(borneInf + i * interval));
					}
				}
 
				function max(borneInf, borneSup, nbreInterval, interval, callback){
					var result = callback(borneSup);
					for ( i = 0; i < nbreInterval; i++)
						if (callback(borneInf + i * interval) > result) result = callback(borneInf + i * interval);
					return result;
				}
		</script>
	</head>
	<body>
		<section  class="container">
			<article name="data" class="well form-inline pull-left col-lg-5">
				<legend>Entrer les valeurs pour le calcul</legend>
				<fieldset class="row">
					<label for="borneInferieure" class="col-lg-5">Borne inferieure :</label>
					<input id="borne_inf" type="number" style="width:130px" class="input-sm form-control">
				</fieldset>
				<h1></h1>
				<fieldset class="row">
					<label for="borneSuperieure" class="col-lg-5">Borne superieure :</label>
					<input id="borne_sup" type="number" style="width:120px" class="input-sm form-control">
				</fieldset>
				<h1></h1>
				<fieldset class="row">
					<label for="nbreIntervalles" class="col-lg-5">Nombre d'intervalles :</label>
					<input id="nbre_interval" type="number" style="width:100px" class="input-sm form-control">
				</fieldset>
				<h1></h1>
				<fieldset class="row">
					<button class="btn btn-primary" type="submit" onclick="showIntegrale()"><span class="glyphicon glyphicon-ok-sign"></span> Dessiner l'integrale</button>
				</fieldset>
			</article>
		</section>
		<section  class="container">
			<article name="graphic" class="well form-inline pull-left col-lg-10">
				<canvas id="drawing" width="750" height="500"></canvas>
			</article>
                 </section>
	</body>
</html>

Envoyer le billet « Interprètation graphique d'une intégrale en JavaScript » dans le blog Viadeo Envoyer le billet « Interprètation graphique d'une intégrale en JavaScript » dans le blog Twitter Envoyer le billet « Interprètation graphique d'une intégrale en JavaScript » dans le blog Google Envoyer le billet « Interprètation graphique d'une intégrale en JavaScript » dans le blog Facebook Envoyer le billet « Interprètation graphique d'une intégrale en JavaScript » dans le blog Digg Envoyer le billet « Interprètation graphique d'une intégrale en JavaScript » dans le blog Delicious Envoyer le billet « Interprètation graphique d'une intégrale en JavaScript » dans le blog MySpace Envoyer le billet « Interprètation graphique d'une intégrale en JavaScript » dans le blog Yahoo

Mis à jour 24/04/2016 à 00h05 par autran

Catégories
HTML / CSS , Javascript , Développement Web

Commentaires