Колебания с двумя степенями свободы — различия между версиями

  1 function MainBalls(canvasBalls, canvasBalls1, canvasBalls2) {
  2  
  3     // Предварительные установки
  4  
  5     var context = canvasBalls.getContext("2d");  // на context происходит рисование
  6 	var context1 = canvasBalls1.getContext("2d");  // на context1 происходит рисование
  7 	var context2 = canvasBalls2.getContext("2d");  // на context2 происходит рисование
  8 	var Pi = 3.1415926;                   // число "пи"
  9     var a0 = 1;                           // масштаб расстояния (диаметр шара)
 10 	var T0 = 1;                           // масштаб времени (период колебаний исходной системы)
 11 	var m0 = 1;                           // масштаб массы
 12 	var g0 = a0 / T0 / T0;                // масштаб ускорения (ускорение, при котором за T0 будет пройдено расстояние a0)
 13 	var k0 = 2 * Pi / T0;                 // масштаб частоты
 14 	var C0 = m0 * k0 * k0;                // масштаб жесткости
 15 	
 16  
 17     // *** Задание физических параметров ***
 18  
 19 	var Ny = 5;                           // число шаров, помещающихся по вертикали в окно (задает размер шара относительно размера окна)
 20     var r = 0.5 * a0;                     // радиус частицы в расчетных координатах
 21 	var m = 1 * m0;                       // масса
 22 	var g = 0.25 * g0;               // ускорение свободного падения
 23 	var c = 1 * C0;                  // жесткость пружины
 24 	var l = 3 * a0;                   // длина пружины
 25 	var time = 0;
 26 
 27 
 28 	Text_c.value  = c;
 29 	Text_m.value  = m;
 30 	Text_l.value = l;
 31 	
 32     Slider_c.min = 1;                          
 33     Slider_c.max = 100;
 34     Slider_c.step = 0.5;
 35     Slider_c.value = Text_c.value;  
 36 	
 37 	Slider_m.min = 1;                          
 38     Slider_m.max = 100;
 39     Slider_m.step = 0.5;
 40     Slider_m.value = Text_m.value; 
 41 	  
 42 	Slider_l.min = 1;                          
 43     Slider_l.max = 5;
 44     Slider_l.step = 0.5;
 45     Slider_l.value = Text_l.value;
 46 	
 47 	var L ;             // длина пружины под воздействием силы тяжести
 48 	// *** Задание вычислительных параметров ***
 49  
 50     var fps = 100;                         // frames per second - число кадров в секунду (качечтво отображения)
 51     var spf = 100;                        // steps per frame   - число шагов интегрирования между кадрами (скорость расчета)
 52     var dt  = 0.045 * T0 / fps;           // шаг интегрирования (качество расчета)
 53 
 54     // Выполнение программы
 55  
 56     var scale = canvasBalls.height / Ny / a0;  // масштабный коэффициент для перехода от расчетных к экранным координатам
 57     var w = canvasBalls.width / scale;           // ширина окна в расчетных координатах
 58     var h = canvasBalls.height / scale;          // высота окна в расчетных координатах
 59  
 60     // Добавление шара
 61  
 62     var b = [];
 63     b.x = w / 2;            b.y = l;    // расчетные координаты шара
 64 	b.vx = 0.5;            b.vy = 0.5;    // начальная скорость
 65 	
 66 
 67 	setInterval(control1, 1000 / fps);
 68 	
 69 	function control1() {
 70 		physics1();
 71         draw();
 72     }
 73 	
 74 	function physics1() {                    // то, что происходит каждый шаг времени
 75         L  = l + m * g / c;
 76 		//document.getElementById('text').innerHTML = '<b>'+l/scale+'</b>';
 77 		for (var s = 1; s <= spf; s++) {
 78             b.vx += -g / L * (b.x - w/2) * dt;          b.vy += -c / m * (b.y - l) * dt; 
 79             b.x += b.vx * dt;                           b.y += b.vy * dt;
 80         }
 81     }
 82 		
 83     this.set_m = function(input)
 84         {
 85 			m = Number(input);   
 86                 time = 0;
 87 				b.x = w / 2;            b.y = l;    
 88 	            b.vx = 0.5;             b.vy = 0.5;
 89                 context.clearRect(0, 0, w * scale, h * scale);      
 90                 context1.clearRect(0, 0, w * scale, h * scale);      
 91                 context2.clearRect(0, 0, w * scale, h * scale);
 92         }
 93  
 94         this.set_c = function(input)
 95         {
 96 
 97                 c = Number(input);   
 98                 time = 0;
 99                 b.x = w / 2;            b.y = l;    
100 	            b.vx = 0.5;             b.vy = 0.5; 
101 				context.clearRect(0, 0, w * scale, h* scale);      
102                 context1.clearRect(0, 0, w * scale, h * scale);      
103                 context2.clearRect(0, 0, w * scale, h * scale);   
104         }
105 		
106 		     this.set_l = function(input)
107         {
108 			l = Number(input);   
109                 time = 0;
110 				b.x = w / 2;            b.y = l;    
111 	            b.vx = 0.5;             b.vy = 0.5;
112                 context.clearRect(0, 0, w * scale, h * scale);      
113                 context1.clearRect(0, 0, w * scale, h * scale);      
114                 context2.clearRect(0, 0, w * scale, h * scale);
115         }
116 
117 		function draw() {
118 		context.fillStyle = "#ff0000"; 	
119         context.clearRect(0, 0, w * scale, h * scale);      // очистить экран
120 		draw_spring(w / 2, b.x, 0, b.y,0.25, 12);
121 		 context.beginPath();
122         context.arc(b.x * scale, b.y * scale, r * scale / 3, 0, 2 * Math.PI, false);                  //рисуем шар
123         context.fill();
124         context.closePath();
125 		
126 		
127 		context1.strokeStyle = "red";                                                             //рисуем график 1
128         context1.beginPath();
129         context1.moveTo(time * Math.sqrt(g / L) * 5 * scale, (b.x -   h / 6) * scale);
130         context1.lineTo((time + dt) * Math.sqrt(g / L) * 5 * scale, (b.x - h / 6) * scale);
131         context1.stroke();
132 		
133 		context1.strokeStyle="#000000";                                                             //рисуем систему координат на 1 графике
134 		context1.beginPath();
135         context1.moveTo(0, h / 2 * scale);
136         context1.lineTo(w * scale, h / 2 * scale);
137         context1.stroke();
138 		context1.strokeStyle="#000000";
139 		context1.beginPath();
140         context1.moveTo(w / 2 * scale , 0);
141         context1.lineTo(w / 2 * scale, h * scale);
142         context1.stroke();
143 		
144 		context2.strokeStyle = "#3070d0";                                                            //рисуем график 2
145 		context2.beginPath();
146         context2.moveTo(time * Math.sqrt(c / m) * 5 * scale, (l - b.y + h / 2) * scale);
147         context2.lineTo((time + dt) * Math.sqrt(c / m) * 5 *scale, (l - b.y + h / 2) * scale);
148         context2.stroke();
149 		
150 		context2.strokeStyle="#000000";                                                            //рисуем систему координат на графике 2
151 		context2.beginPath();
152         context2.moveTo(0, h / 2 * scale);
153         context2.lineTo(w * scale, h / 2 * scale);
154         context2.stroke();
155 		context2.strokeStyle="#000000";
156 		context2.beginPath();
157         context2.moveTo(w / 2 * scale , 0);
158         context2.lineTo(w / 2 * scale, h * scale);
159         context2.stroke();
160 		
161 		time += dt;  
162 	}
163 		function draw_spring(x_start, x_end, y_start, y_end, h, n) {
164 		var L_x = x_end-x_start;
165 		var L_y = y_end-y_start;
166 		for (var i = 0; i < n; i++) {
167 			var x_st = x_start + L_x / n * i;
168 			var x_end = x_start + L_x / n * (i + 1);
169 			var y_st = y_start + L_y / n * i;
170 			var y_end = y_start + L_y / n * (i + 1);
171 			var l_x = x_end - x_st;
172 			var l_y = y_end - y_st;
173 			context.beginPath();
174 			context.bezierCurveTo(x_st * scale, y_st * scale, (x_st + l_x / 4 + h) * scale, (y_st + l_y / 4) * scale, (x_st + l_x / 2) * scale, (y_st + l_y /2) * scale);
175 			context.bezierCurveTo((x_st + l_x / 2) * scale, (y_st + l_y / 2) * scale, (x_st + 3 * l_x / 4 - h) * scale, (y_st + 3 * l_y / 4) * scale, (x_st + l_x) * scale, (y_st + l_y)* scale) ;
176 			context.stroke();
177 		}
178 	}
179 	    
180 }

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8"/>
 5     <title> Balls </title>
 6     <script src="Balls_v1_release.js"></script>
 7 </head>
 8 <body>
 9     <canvas id="canvasBalls" width="800" height="600" style="border:1px solid #000000;"></canvas>
10          <div>
11 		         <!-- Масса-->
12         <div>
13             m =
14         <input id="Text_m" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
15            if (!this.checkValidity()) return;
16            app.set_m(this.value);
17            document.getElementById('Slider_m').value = this.value;
18        ">
19                 <input type = "range"  id="Slider_m" style="width: 100px;" oninput="app.set_m(this.value); document.getElementById('Text_m').value = this.value;">
20         </I></font>
21     </div>
22 			         <!-- Длина пружины-->
23         <div>
24             l0=
25         <input id="Text_l" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
26            if (!this.checkValidity()) return;
27            app.set_l(this.value);
28            document.getElementById('Slider_l').value = this.value;
29        ">
30                 <input type = "range"  id="Slider_l" style="width: 100px;" oninput="app.set_l(this.value); document.getElementById('Text_l').value = this.value;">
31         </I></font>
32     </div>
33 	<div id="text"></div>
34 	       <!-- Жесткость-->
35         <div>
36             c =
37         <input id="Text_c" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
38            if (!this.checkValidity()) return;
39            app.set_c(this.value);
40            document.getElementById('Slider_c').value = this.value;
41        ">
42                 <input type = "range"  id="Slider_c" style="width: 100px;" oninput="app.set_c(this.value); document.getElementById('Text_c').value = this.value;">
43         </I></font>
44     </div>
45         <b>Зависимость координаты х от k1*t:</b>
46     </div>    
47         <canvas id="canvasBalls1" width="800" height="600" style="border:1px solid #000000;"></canvas>  
48         <div>
49          <b>Зависимость координаты y от k2*t:</b>
50     </div>    
51         <canvas id="canvasBalls2" width="800" height="600" style="border:1px solid #000000;"></canvas> 
52         <script type="text/javascript"> app = new MainBalls(document.getElementById('canvasBalls'),document.getElementById('canvasBalls1'),document.getElementById('canvasBalls2'));</script>     
53 </body>
54 </html>