Open source et architecture logicielle

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

par

autran

, 23/04/2016 à 22h54 (1333 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(x₀)
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>