Interactive model of simplest vibrating system
From Department of Theoretical and Applied Mechanics
Virtual laboratory > Interactive harmonic oscillator model
Left mouse button on the sinker- drag and drop.
Download Spring_v2-1_release.zip.
The program text in the language JavaScript (Developers D.V. Tsvetkov, A.M. Krivtsov)
File "Spring.js"
1 window.addEventListener("load", Main_Spring, true);
2 function Main_Spring() {
3
4 var canvas = spring_canvas;
5 canvas.onselectstart = function () {return false;}; // запрет выделения canvas
6 var ctx = canvas.getContext("2d"); // на ctx происходит рисование
7 var w = canvas.width; // ширина окна в расчетных координатах
8 var h = canvas.height; // высота окна в расчетных координатах
9
10 var Pi = 3.1415926; // число "пи"
11
12 var m0 = 1; // масштаб массы
13 var T0 = 1; // масштаб времени (период колебаний исходной системы)
14
15 var k0 = 2 * Pi / T0; // масштаб частоты
16 var C0 = m0 * k0 * k0; // масштаб жесткости
17 var B0 = 2 * m0 * k0; // масштаб вязкости
18
19 // *** Задание физических параметров ***
20
21 var m = 1 * m0; // масса
22 var C = 1 * C0; // жесткость
23 var B = .1 * B0; // вязкость
24 slider_m.value = (m / m0).toFixed(1); number_m.value = (m / m0).toFixed(1);
25 slider_C.value = (C / C0).toFixed(1); number_C.value = (C / C0).toFixed(1);
26 slider_B.value = (B / B0).toFixed(1); number_B.value = (B / B0).toFixed(1);
27
28 // *** Задание вычислительных параметров ***
29
30 var fps = 60; // frames per second - число кадров в секунду (качечтво отображения)
31 var spf = 10; // steps per frame - число шагов интегрирования между кадрами (edtkbxbdftn скорость расчета)
32 var dt = 0.05 * T0 / fps; // шаг интегрирования (качество расчета)
33 var steps = 0; // количество шагов интегрирования
34
35 function setM(new_m) {m = new_m * m0;}
36 function setC(new_C) {C = new_C * C0;}
37 function setB(new_B) {B = new_B * B0;}
38
39 slider_m.oninput = function() {number_m.value = slider_m.value; setM(slider_m.value);};
40 number_m.oninput = function() {slider_m.value = number_m.value; setM(number_m.value);};
41 slider_C.oninput = function() {number_C.value = slider_C.value; setC(slider_C.value);};
42 number_C.oninput = function() {slider_C.value = number_C.value; setC(number_C.value);};
43 slider_B.oninput = function() {number_B.value = slider_B.value; setB(slider_B.value);};
44 number_B.oninput = function() {slider_B.value = number_B.value; setB(number_B.value);};
45
46 var count = true; // проводить ли расчет системы
47 var v = 0; // скорость тела
48
49 var rw = canvas.width / 30; var rh = canvas.height / 1.5;
50 var x0 = 15 * rw - rw / 2; var y0 = rh / 1.33 - rh / 2;
51
52 // параметры пружины
53 var coil = 10; // количество витков
54 var startX = 0; // закрепление пружины
55
56 // создаем прямоугольник-грузик
57 var rect = {
58 x: x0, width: rw,
59 y: y0, height: rh,
60 fill: "rgba(0, 0, 255, 1)" // цвет
61 };
62
63 // захват прямоугольника мышью
64 var mx_; // буфер позиции мыши (для расчета скорости при отпускании шара)
65 document.onmousedown = function(e) { // функция при нажатии клавиши мыши
66 var m = mouseCoords(e); // получаем расчетные координаты курсора мыши
67
68 var x = rect.x;
69 var xw = rect.x + rect.width;
70 var y = rect.y;
71 var yh = rect.y + rect.height;
72 if (x <= m.x && xw >= m.x && y <= m.y && yh >= m.y) {
73 if (e.which == 1) { // нажата левая клавиша мыши
74 rect.xPlus = rect.x - m.x; // сдвиг курсора относительно грузика по x
75 rect.yPlus = rect.y - m.y; // сдвиг курсора относительно грузика по y
76 mx_ = m.x;
77 count = false;
78 document.onmousemove = mouseMove; // пока клавиша нажата - работает функция перемещения
79 }
80 }
81 };
82
83 document.onmouseup = function(e) { // функция при отпускании клавиши мыши
84 document.onmousemove = null; // когда клавиша отпущена - функции перемещения нету
85 count = true;
86 };
87
88 function mouseMove(e) { // функция при перемещении мыши, работает только с зажатой ЛКМ
89 var m = mouseCoords(e); // получаем расчетные координаты курсора мыши
90 rect.x = m.x + rect.xPlus;
91 // v = 6.0 * (m.x - mx_) / dt / fps; // сохранение инерции
92 v = 0;
93 mx_ = m.x;
94 }
95
96 function mouseCoords(e) { // функция возвращает расчетные координаты курсора мыши
97 var m = [];
98 var rect = canvas.getBoundingClientRect();
99 m.x = (e.clientX - rect.left);
100 m.y = (e.clientY - rect.top);
101 return m;
102 }
103
104 // график
105 var vGraph = new TM_graph( // определить график
106 "#vGraph", // на html-элементе #vGraph
107 250, // сколько шагов по оси "x" отображается
108 -1, 1, 0.2); // мин. значение оси Y, макс. значение оси Y, шаг по оси Y
109
110 function control() {
111 calculate();
112 draw();
113 requestAnimationFrame(control);
114 }
115 control();
116 // setInterval(control, 1000 / fps); // Запуск системы
117
118 function calculate() {
119 if (!count) return;
120 for (var s=1; s<=spf; s++) {
121 var f = - C * (rect.x - x0) - B * v;
122 v += f / m * dt;
123 rect.x += v * dt;
124
125 steps++;
126 if (steps % 80 == 0) vGraph.graphIter(steps, (rect.x-x0)/canvas.width*2); // подать данные на график
127 }
128
129 }
130
131 function draw() {
132 ctx.clearRect(0, 0, w, h);
133
134 ctx.strokeStyle = "#0aa";
135 ctx.beginPath();
136 ctx.moveTo(0, y0+rh/2);
137 for (var i = 1; i <= coil + 1; i++ ) {
138 var x;
139 var y;
140 if (i != coil + 1) {
141 x = startX + ((rect.x - startX))/coil*i - ((rect.x - startX))/coil/2;
142 y = y0+rh/2 + ((i%2==0)?1:-1)*30;
143 } else {
144 x = startX + ((rect.x - startX))/coil*i - ((rect.x - startX))/coil;
145 y = y0+rh/2;
146 }
147
148 ctx.lineTo(x, y);
149 }
150 ctx.stroke();
151
152 ctx.fillStyle = "#0000ff";
153 ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
154 }
155 }
Файл "Spring.html"
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Пружина</title>
6 <script src="Spring.js"></script>
7 <script src="jquery.min.js"></script>
8 <script src="jquery.flot.js"></script>
9 <script src="TM_v2-1.js"></script>
10 </head>
11 <body>
12 <canvas id="spring_canvas" width="600" height="100" style="border:1px solid #000000;"></canvas><br>
13 <input type="range" id="slider_m" min="0.01" max="10" step=0.01 style="width: 150px;" />
14 m = <input type="number" id="number_m" min="0.01" max="10" step=0.01 style="width: 50px;" /><br>
15 <input type="range" id="slider_C" min="0" max="10" step=0.01 style="width: 150px;" />
16 C = <input type="number" id="number_C" min="0" max="10" step=0.01 style="width: 50px;" /><br>
17 <input type="range" id="slider_B" min="0" max="10" step=0.01 style="width: 150px;" />
18 B = <input type="number" id="number_B" min="0" max="10" step=0.01 style="width: 50px;" /><br><br>
19
20 <table>
21 <tr><td>x</td>
22 <td><div id="vGraph" style="width:600px; height:300px; clear:both;"></div></td>
23 </tr>
24 <tr><td></td><td style="text-align: center">steps</td></tr>
25 </table>
26 </body>
27 </html>
