|
|
| (не показано 5 промежуточных версий этого же участника) |
| Строка 1: |
Строка 1: |
| − | [[ТМ|Кафедра ТМ]] > [[Программирование]] > [[Программирование и моделирование в Интернет|Интернет]] > [[JavaScript-программирование|JavaScript]] > '''Пружина''' <HR> | + | #REDIRECT [[Интерактивная модель простейшей колебательной системы]] |
| − | | |
| − | Если у вас отображается старая версия программы - нажмите "'''Ctrl + F5'''"
| |
| − | | |
| − | | |
| − | Левая клавиша мыши по грузу - перетаскивание.
| |
| − | | |
| − | Левая клавиша мыши по полю - заморозить систему.
| |
| − | | |
| − | <addscript src=ocanvas-251/><addscript src=osc_01/><addscript src=jquery_min_new/><addscript src=jquery-ui_min/>
| |
| − | <addscript src=TM/><addscript src=jquery_flot/><addscript src=jquery_flot_axislabels/><htmlet nocache="yes">osc_TM</htmlet>
| |
| − | | |
| − | Текст программы на языке JavaScript (разработчики [[Цветков Денис]], [[Кривцов Антон]], использована библиотека [http://ocanvas.org/ oCanvas]): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default">
| |
| − | Файл '''"osc_01.js"'''
| |
| − | <source lang="javascript" first-line="1">
| |
| − | function MainMech(canvas) {
| |
| − | | |
| − | // Предварительные установки
| |
| − | | |
| − | var context = canvas.getContext("2d");
| |
| − | | |
| − | const Pi = 3.1415926; // число "пи"
| |
| − | | |
| − | const m0 = 1; // масштаб массы
| |
| − | const T0 = 1; // масштаб времени (период колебаний исходной системы)
| |
| − | | |
| − | const k0 = 2 * Pi / T0; // масштаб частоты
| |
| − | const C0 = m0 * k0 * k0; // масштаб жесткости
| |
| − | const B0 = 2 * m0 * k0; // масштаб вязкости
| |
| − | | |
| − | // *** Задание физических параметров ***
| |
| − | | |
| − | var m = 1 * m0; // масса
| |
| − | var C = 1 * C0; // жесткость
| |
| − | var B = .1 * B0; // вязкость
| |
| − | | |
| − | // *** Задание вычислительных параметров ***
| |
| − | | |
| − | const fps = 4 * 29; // frames per second - число кадров в секунду (качечтво отображения)
| |
| − | const spf = 20; // steps per frame - число шагов интегрирования между кадрами (edtkbxbdftn скорость расчета)
| |
| − | const dt = 0.05 * T0 / fps; // шаг интегрирования (качество расчета)
| |
| − | var steps = 0; // количество шагов интегрирования
| |
| − | | |
| − | // Установка слайдеров значений
| |
| − | | |
| − | var TM_obj = new TM(); // экземпляр библиотеки для добавления слайдеров
| |
| − | | |
| − | // функции, запускающиеся при перемещении слайдера
| |
| − | this.setM = function(new_m){m = new_m * m0;}; // new_m - значение на слайдере
| |
| − | this.setC = function(new_C){C = new_C * C0;};
| |
| − | this.setB = function(new_B){B = new_B * B0;};
| |
| − | | |
| − | TM_obj.addInputSlider(
| |
| − | "#input_slider_m", "#input_m", // html-элементы слайдера и поля ввода
| |
| − | 0.01, 10, 0.01, 1, // мин. значение; макс. значение; шаг; начальное значение
| |
| − | this.setM, // ссылка на функцию для слайдера (см. выше)
| |
| − | "onMPress"); // название функции в html-элементе <input onKeyUp="...">
| |
| − | TM_obj.addInputSlider("#input_slider_C", "#input_C", 0, 10, 0.01, 1, this.setC, "onCPress");
| |
| − | TM_obj.addInputSlider("#input_slider_B", "#input_B", 0, 10, 0.01, 0.1, this.setB, "onBPress");
| |
| − | | |
| − | | |
| − | var count = true; // проводить ли расчет системы
| |
| − | var v = 0; // скорость тела
| |
| − | | |
| − | // создаем объект, связанный с элементом canvas на html странице
| |
| − | var ocanvas = oCanvas.create({
| |
| − | canvas: "#canvasMech", // canvasMech - id объекта canvas на html странице
| |
| − | fps: fps // сколько кадров в секунду
| |
| − | });
| |
| − | | |
| − | var rw = canvas.width / 30; var rh = canvas.height / 6;
| |
| − | var x0 = 15 * rw - rw / 2; var y0 = 3*rh - rh / 2;
| |
| − | | |
| − | // создаем пружину
| |
| − | const coil = 10; // количество витков
| |
| − | const startX = 0; // закрепление пружины
| |
| − | var lines = []; // этот массив будет содержать ссылки на линии
| |
| − | for (var i = 0; i < coil; i++ ) {
| |
| − | lines[i] = ocanvas.display.line({
| |
| − | start: { x: startX, y: y0+rh/2 },
| |
| − | end: { x: startX, y: y0+rh/2 },
| |
| − | stroke: "1px #0aa"
| |
| − | }).add();
| |
| − | }
| |
| − | | |
| − | // создаем прямоугольник
| |
| − | var rect = ocanvas.display.rectangle({
| |
| − | x: x0, width: rw,
| |
| − | y: y0, height: rh,
| |
| − | fill: "rgba(0, 0, 255, 1)" // цвет
| |
| − | }).add();
| |
| − | | |
| − | // захват прямоугольника мышью
| |
| − | rect.dragAndDrop({
| |
| − | changeZindex: true, // если много объектов - захваченный будет нарисован спереди
| |
| − | start: function () { count = false; this.fill = "rgba(0, 0, 255, 0.5)"; }, // отключаем расчет и делаем объект полупрозрачным
| |
| − | move: function () { this.y = y0; v = 0; drawSpring();}, // запрещаем перемещение по вертикали
| |
| − | end: function () { count = true; this.fill = "rgba(0, 0, 255, 1)"; } // включаем расчет и убираем полупрозрачность
| |
| − | });
| |
| − | | |
| − | ocanvas.bind("mousedown", function () {count = false;}); // заморозить фигуру при клике на поле
| |
| − | | |
| − | var vGraph = new TM_graph( // определить график
| |
| − | "#vGraph", // на html-элементе #vGraph
| |
| − | "steps", "v", // подписи на осях
| |
| − | 250); // сколько шагов по оси "x" отображается
| |
| − | | |
| − | | |
| − | function dynamics(){ // интегрирование по времени
| |
| − | if (!count) return;
| |
| − | for (var s=1; s<=spf; s++) {
| |
| − | var f = - C * (rect.x - x0) - B * v;
| |
| − | v += f / m * dt;
| |
| − | rect.x += v * dt;
| |
| − | | |
| − | steps++;
| |
| − | if (steps % 150 == 0) vGraph.graphIter(steps, v); // подать данные на график
| |
| − | drawSpring();
| |
| − | }
| |
| − | }
| |
| − | | |
| − | function drawSpring() {
| |
| − | for (var i = 0; i < coil; i++ ) {
| |
| − | lines[i].start.x = startX + ((rect.x-startX) + rw/2)/coil*i;
| |
| − | lines[i].end.x = startX + ((rect.x-startX) + rw/2)/coil*(i+1);
| |
| − | lines[i].start.y = y0+rh/2 + ((i%2==0)?1:-1)*30;
| |
| − | lines[i].end.y = y0+rh/2 + ((i%2==0)?-1:1)*30;
| |
| − | if (i==0) lines[i].start.y = y0+rh/2;
| |
| − | if (i==(coil-1)) lines[i].end.y = y0+rh/2;
| |
| − | }
| |
| − | }
| |
| − | | |
| − | ocanvas.setLoop(dynamics).start(); // функция, выполняющаяся на каждом шаге
| |
| − | }
| |
| − | </source>
| |
| − | Файл '''"osc.html"'''
| |
| − | <source lang="html" first-line="1">
| |
| − | <!DOCTYPE html>
| |
| − | <html>
| |
| − | <head>
| |
| − | <title>Simple Mechanics</title>
| |
| − | <script src="ocanvas.min.js"></script>
| |
| − | <script src="osc_01.js"></script>
| |
| − | <script src="jquery.min.js"></script>
| |
| − | <link rel="stylesheet" href="jquery-ui.css" />
| |
| − | <script src="jquery-ui.min.js"></script>
| |
| − | <script src="TM.js"></script>
| |
| − | | |
| − | <script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script>
| |
| − | <script language="javascript" type="text/javascript" src="jquery.flot.axislabels.js"></script>
| |
| − | </head>
| |
| − | <body>
| |
| − | <div style="float:left;">
| |
| − | <canvas id="canvasMech" width="600" height="100" style="border:1px solid #000000; float: left;"></canvas>
| |
| − | <script type="text/javascript">MainMech(document.getElementById('canvasMech'));</script>
| |
| − | </div>
| |
| − | | |
| − | <!--слайдеры-->
| |
| − | <div style="margin-left:20px; margin-top:20px; margin-bottom:20px; float:left;">
| |
| − | <div id="input_slider_m" style="width:300px; float:left"></div>
| |
| − | <label for="input_m" style="margin-left:20px; float:left">m = </label>
| |
| − | <input onKeyUp="onMPress(event);" type="text" id="input_m" style="margin-left:20px; float:left; border:1; color:#f6931f; font-weight:bold;">
| |
| − | <br><br>
| |
| − | <div id="input_slider_C" style="width:300px; float:left"></div>
| |
| − | <label for="input_C" style="margin-left:20px; float:left">C = </label>
| |
| − | <input onKeyUp="onCPress(event);" type="text" id="input_C" style="margin-left:20px; float:left; border:1; color:#f6931f; font-weight:bold;">
| |
| − | <br><br>
| |
| − | <div id="input_slider_B" style="width:300px; float:left"></div>
| |
| − | <label for="input_B" style="margin-left:20px; float:left">B = </label>
| |
| − | <input onKeyUp="onBPress(event);" type="text" id="input_B" style="margin-left:20px; float:left; border:1; color:#f6931f; font-weight:bold;">
| |
| − | <br><br>
| |
| − | | |
| − | </div>
| |
| − | | |
| − | <!--график-->
| |
| − | <div id="vGraph" style="width:600px; height:300px; clear:both;"></div>
| |
| − | | |
| − | </body>
| |
| − | </html>
| |
| − | </source>
| |
| − | </toggledisplay>
| |
| − | | |
| − | [[Media:LIB.zip|LIB.zip]] - библиотеки для построения графиков и слайдеров
| |
| − | | |
| − | == См. также ==
| |
| − | *[[JavaScript-mechanics]]
| |
| − | *[[JavaScript-mechanics-box2D]]
| |
| − | *[[JavaScript-приложения]]
| |
| − | | |
| − | [[Category: Программирование]]
| |
| − | [[Category: JavaScript]]
| |
