Численное интегрирование
Данное интерактивное приложение позволяет вычислить интеграл заданной с клавиатуры функции с помощью метода прямоугольников.
Можно использовать любые функции и свойства объекта Math языка JavaScript (описание на русском, английском), например:
- функции: sin(x), exp(x), round(x), abs(x), min(x);
- свойства: PI, E, SQRT2, LN10.
Важно! Чтобы возвести число в степень, вместо x^3 нужно писать pow(x, 3)
(оператор ^ в JavaScript означает логическую операцию "Исключающее ИЛИ").
Скачать Integrate_v3-6_release.zip.
Файл "Integrate.js"
1 window.addEventListener("load", Main_Integrate, true);
2 function Main_Integrate() {
3
4 Integrate_canvas.onselectstart = function () {return false;}; // запрет выделения canvas
5 var context = Integrate_canvas.getContext("2d"); // на context происходит рисование
6
7 var w = Integrate_canvas.width;
8 var h = Integrate_canvas.height;
9
10 // функции и переменные, объявленные через this, можно будет вызывать по сокращенному названию (например, sin(x), PI)
11 var math_methods = Object.getOwnPropertyNames(Math);
12 for (var i in math_methods)
13 this[math_methods[i]] = Math[math_methods[i]];
14
15 calculate_button.onclick = get_and_calc;
16 function get_and_calc() {
17 var script = document.createElement('script');
18 script.innerHTML = "function f(x) {return " + function_text.value + "};" +
19 "x1 = " + x1_text.value + ";" +
20 "x2 = " + x2_text.value + ";";
21 document.getElementsByTagName('head')[0].appendChild(script);
22 integral(f, x1, x2, accuracy_number.value);
23 }
24
25 function on_enter_up(e) {
26 e = e || window.event;
27 if (e.keyCode === 13) {
28 get_and_calc();
29 }
30 return false; // отменяем действие по умолчанию
31 }
32
33 function_text.onkeyup = on_enter_up;
34 x1_text.onkeyup = on_enter_up;
35 x2_text.onkeyup = on_enter_up;
36 accuracy_number.onkeyup = on_enter_up;
37
38 function calculate(f, x1, x2, n) {
39 var integral = {};
40 integral.D = {};
41 integral.D.x = [];
42 integral.D.fx = [];
43 var summ = 0;
44 var k1 = Math.floor(n / w); // каждый k1-ый элемент будет отправлен на рисование
45 if (k1 < 1) k1 = 1;
46
47 var interval = (x2 - x1) / n;
48 for (var i = 0; i < n; i++) {
49 var x = x1 + interval * i;
50 var fx = f(x);
51 if (fx == Number.POSITIVE_INFINITY || fx == Number.NEGATIVE_INFINITY || isNaN(fx)) continue;
52 summ += interval * fx;
53
54 if (i % k1 == 0) {
55 integral.D.x.push(x);
56 integral.D.fx.push(fx);
57 }
58 }
59 integral.summ = summ;
60 return integral;
61 }
62
63 function integral(f, x1, x2, n) {
64 var I = calculate(f, x1, x2, n);
65 result_span.innerHTML = I.summ.toPrecision(accuracy_number.value.length);
66 draw(I.D, x1, x2);
67 }
68
69 function draw(D, x1, x2) {
70 context.clearRect(0, 0, w, h);
71 context.beginPath();
72
73 // найдем минимум и максимум функции (точнее не всей функции, а только точек, отправленных на рисование)
74 var len = x2 - x1;
75 var f_max = Number.NEGATIVE_INFINITY, f_min = Number.POSITIVE_INFINITY;
76 for (var i = 0; i < D.fx.length; i++) {
77 f_max = (f_max > D.fx[i]) ? f_max : D.fx[i];
78 f_min = (f_min < D.fx[i]) ? f_min : D.fx[i];
79 }
80
81 // график
82 var h_center = f_max / (f_max - f_min) * h;
83 context.moveTo(0, h_center);
84 for (var i = 0; i < D.fx.length; i++) {
85 var x = D.x[i];
86 context.lineTo((x - x1) / len * w, h_center - D.fx[i] / (f_max - f_min) * h);
87 }
88 context.lineTo(w, h_center);
89 context.fill();
90
91 // интерфейс
92 context.beginPath();
93 context.moveTo(0, h_center);
94 context.lineTo(w, h_center);
95 context.moveTo(-x1 / (x2 - x1) * w, 0);
96 context.lineTo(-x1 / (x2 - x1) * w, h);
97 context.stroke();
98 }
99
100 context.fillStyle = "#888888";
101 get_and_calc();
102 }
Файл "Integrate.html"
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Integrate</title>
6 <script src="Integrate.js"></script>
7 </head>
8 <body>
9 <canvas id="Integrate_canvas" width="600" height="600" style="border:1px solid #000000;"></canvas><br>
10 f(x) = <input type="text" id="function_text" style="width: 80ex;" value="sin(sqrt(x)) * sin(x * x)"/><br>
11 x1 = <input type="text" id="x1_text" style="width: 25ex;" value="0"/><br>
12 x2 = <input type="text" id="x2_text" style="width: 25ex;" value="PI * 3"/><br><br>
13 Точность: <input type="number" id="accuracy_number" min=2 style="width: 12ex;" value="100000"/><br>
14 <input type="button" id="calculate_button" value="Посчитать"/><br><br>
15 Результат: <span id="result_span"></span>
16 </body>
17 </html>
Предлагаемые направления развития стенда[править]
- Применить другие методы численного интегрирования (например, метод трапеций или метод Монте-Карло)
- Научиться определять сходимость функции, и в случае, если функция не сходится - выдавать предупреждение.
- Математически определять и выводить погрешность результата.
Заметка разработчику[править]
В данной программе использована возможность языка JavaScript создавать и запускать программный код "на лету", без перезапуска программы. Это очень важная возможность (которую достаточно трудно, а, порой, невозможно применить в других языках), которая позволяет разработчику без особых усилий создавать максимально гибкий интерфейс. Например, можно дать пользователю возможность быстро задать специфические граничные условия, или позволить исследовать полученную систему, просматривать данные и выводить нужные графики прямо в окне браузера.