Difference between revisions of "Interactive harmonic oscillator model"
From Department of Theoretical and Applied Mechanics
| (One intermediate revision by one other user not shown) | |||
| Line 1: | Line 1: | ||
| + | [[ru:Интерактивная модель простейшей колебательной системы]] | ||
[[Virtual laboratory]] > [[Interactive harmonic oscillator model ]] <HR> | [[Virtual laboratory]] > [[Interactive harmonic oscillator model ]] <HR> | ||
| − | + | You can drag right or left a mass on a spring to start the oscillations: | |
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Tcvetkov/Spring/Spring_v2-1_release/Spring.html |width=645 |height=565 |border=0 }} | {{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Tcvetkov/Spring/Spring_v2-1_release/Spring.html |width=645 |height=565 |border=0 }} | ||
| − | Download [[ | + | Download [[Media:Spring_v2-1_release.zip|Spring_v2-1_release.zip]]. |
<div class="mw-collapsible mw-collapsed" style="width:100%" > | <div class="mw-collapsible mw-collapsed" style="width:100%" > | ||
| Line 15: | Line 16: | ||
var canvas = spring_canvas; | var canvas = spring_canvas; | ||
| − | canvas.onselectstart = function () {return false;}; // | + | canvas.onselectstart = function () {return false;}; // cancel canvas selection |
var ctx = canvas.getContext("2d"); // Drawing takes place in the ctx | var ctx = canvas.getContext("2d"); // Drawing takes place in the ctx | ||
var w = canvas.width; // the width of the window in the estimated coordinates | var w = canvas.width; // the width of the window in the estimated coordinates | ||
Latest revision as of 18:28, 18 January 2017
Virtual laboratory > Interactive harmonic oscillator modelYou can drag right or left a mass on a spring to start the oscillations:
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;}; // cancel canvas selection
6 var ctx = canvas.getContext("2d"); // Drawing takes place in the ctx
7 var w = canvas.width; // the width of the window in the estimated coordinates
8 var h = canvas.height; // the height of the window in the estimated coordinates
9
10 var Pi = 3.1415926; // the number "PI"
11
12 var m0 = 1; // weight scale
13 var T0 = 1; // the time scale
14
15 var k0 = 2 * Pi / T0; // frequency scale
16 var C0 = m0 * k0 * k0; // hardness scale
17 var B0 = 2 * m0 * k0; // viscosity scale
18
19 // *** Assignment of physical parameters ***
20
21 var m = 1 * m0; // weight
22 var C = 1 * C0; // stiffness
23 var B = .1 * B0; // viscosity
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 // *** Assignment the parameters of computing ***
29
30 var fps = 60; // frames per second - the number of frames per second
31 var spf = 10; // steps per frame - the number of integration steps between frames
32 var dt = 0.05 * T0 / fps; // the step of integration
33 var steps = 0; // the number of integration steps
34 function setM(new_m) {m = new_m * m0;}
35 function setC(new_C) {C = new_C * C0;}
36 function setB(new_B) {B = new_B * B0;}
37
38 slider_m.oninput = function() {number_m.value = slider_m.value; setM(slider_m.value);};
39 number_m.oninput = function() {slider_m.value = number_m.value; setM(number_m.value);};
40 slider_C.oninput = function() {number_C.value = slider_C.value; setC(slider_C.value);};
41 number_C.oninput = function() {slider_C.value = number_C.value; setC(number_C.value);};
42 slider_B.oninput = function() {number_B.value = slider_B.value; setB(slider_B.value);};
43 number_B.oninput = function() {slider_B.value = number_B.value; setB(number_B.value);};
44
45 var count = true; // whether or not the calculation of a system
46 var v = 0; // the speed of the body
47
48 var rw = canvas.width / 30; var rh = canvas.height / 1.5;
49 var x0 = 15 * rw - rw / 2; var y0 = rh / 1.33 - rh / 2;
50
51 // the parameters of the spring
52 var coil = 10; // the number of turns
53 var startX = 0; // fixing springs
54
55 // create a rectangle
56 var rect = {
57 x: x0, width: rw,
58 y: y0, height: rh,
59 fill: "rgba(0, 0, 255, 1)" // color
60
61 };
62
63 // capture the rectangle with the mouse
64 var mx_; // the buffer position of the mouse
65 document.onmousedown = function(e) { // function by pressing the mouse button
66 var m = mouseCoords(e); // received the estimated coordinates of the mouse cursor
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) { // Left mouse button is pressed
74 rect.xPlus = rect.x - m.x; // cursor shift relative to the sinker on the x
75 rect.yPlus = rect.y - m.y; // cursor shift relative to the sinker on the y
76 mx_ = m.x;
77 count = false;
78 document.onmousemove = mouseMove; // until a key is pressed - is working on the movement
79 }
80 }
81 };
82
83 document.onmouseup = function(e) { // function when you release the mouse button
84 document.onmousemove = null; // when the key is released - no movement function
85 count = true;
86 };
87
88 function mouseMove(e) { // function when you move the mouse , it works only with the left mouse button
89 var m = mouseCoords(e); // received the estimated coordinates of the mouse cursor
90 rect.x = m.x + rect.xPlus;
91 // v = 6.0 * (m.x - mx_) / dt / fps; // the preservation of inertia
92 v = 0;
93 mx_ = m.x;
94 }
95
96 function mouseCoords(e) { // the function returns the calculated coordinates of the mouse cursor
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( // determine the timetable
106 "#vGraph", // on html- element #vGraph
107 250, // how many steps on the "x" axis shows
108 -1, 1, 0.2); // min. value of Y -axis , max . value of Y -axis , Y -axis step
109
110 function control() {
111 calculate();
112 draw();
113 requestAnimationFrame(control);
114 }
115 control();
116 // setInterval(control, 1000 / fps); // Starting system
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); // submit the data on a graph
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>
