Интерактивная модель простейшей автоколебательной системы с пружиной — различия между версиями

Текущая версия на 16:23, 13 февраля 2016

Виртуальная лаборатория > Простейшая колебательная система с двумя степенями свободы

Рассматривается простейшая колебательная система тело-пружина-конвейер. Пружина крепится к стенке. Грузик на пружинке колеблется посредством постоянной силы F, с которой тянет конвейер. Запишем уравнения движения системы :

, где - масса грузика, - жесткость пружины, - скорость конвейера, - изменение скорости тела

Делаем замену переменных. [math]z = x - xo[/math], где [math]xo[/math] - начальная координата тела. Затем раскладываем силу в ряд Тейлора, получаем новое уравнение :

Переобозначим переменные. Пусть :

Получим новое уравнение : , где [math] ko = c/m [/math] - частота колебаний.

Скачать SeregaTrouble.rar.

Текст программы на языке JavaScript (разработчик Бондарев Сергей):

Файл "2_7.js"

  1 function MainParticle(canvas, canvas_gr, canvas_gr2) {
  2     // Предварительные установки
  3     var context    = canvas.getContext("2d");  // на context происходит рисование
  4 	var context_gr = canvas_gr.getContext("2d");  // на context происходит рисование
  5 	var context_gr2 = canvas_gr2.getContext("2d");
  6 	
  7    //  Задание констант	
  8     const Pi = 3.1415926;                   // число "пи"
  9     const m0 = 1;                           // масштаб массы
 10     const T0 = 1;                           // масштаб времени (период колебаний исходной системы)
 11     const a0 = 1;                            // масштаб расстояния (диаметр шара)
 12 	const mu = 0.4;                           // коэф. трения
 13                                            
 14 
 15     const g0 = a0 / T0 / T0;                // масштаб ускорения (ускорение, при котором за T0 будет пройдено расстояние a0)
 16     const k0 = 2 * Pi / T0;                 // масштаб частоты
 17     const C0 = m0 * k0 * k0;                // масштаб жесткости
 18 	var scale1 = 0.2;
 19 	/* var scale2 = 0.2; */
 20     // *** Задание физических параметров ***
 21 	var xShift= 0;
 22     const Ny = 15;                           // число шаров, помещающихся по вертикали в окно (задает размер шара относительно размера окна)
 23     const Nx = 15;							 // число шаров, помещающихся по вертикали в окно (задает размер шара относительно размера окна)
 24 	const l1 =  15*a0;						// длина первой пружины
 25 	const lmax = 2*l1;                      // максимальное растяжение  первой пружины
 26 	/* const l2 =  5*a0;	 */					// длина второй пружины
 27 	var m = 5 * m0;  						// масса шара
 28 	//var v.x = 0;                             // скорость шара
 29 	var k = 1;    	                // силовой коэффициент
 30 	var b1 = 0.1;
 31 	var b3 = 0.1;
 32 	var N = m*9.8;                          // сила трения
 33 	var Ftr = -mu * N ;
 34 	/* var m2 = 10 * m0; 						// масса второго шара */
 35     const Cwall = 10 * C0;                  // жесткость стен
 36     const r = 1 * a0;                     // радиус частицы в расчетных координатах
 37 	var c = 100;                    	    // "жесткость" пружинки 1
 38 	/* var c2 = 100;   */                   		// "жесткость" пружинки 1
 39 	var vx0 = 0 * a0/T0;					//начальная скорость
 40 	var delt = 0*a0;						//начальное смещение
 41 	var E = 0;								//энергия системы
 42 	var Vmax = 0; var Mmin = 0; var Vprov = 0;
 43 
 44      var A = Math.sqrt((-4*b1*m*m)/(3*b3*c*c));
 45 	var Mmax= Math.max(m,10);
 46 	//*** Передача значений слайдерам и текстовым окнам***
 47 	Text_delt.value  = delt;
 48 	Text_m.value  = m;
 49 	Text_c.value  = c;
 50 	Text_b1.value = b1;
 51 	Text_b3.value = b3;
 52 	
 53 	
 54 	Slider_b1.min = -1;          			
 55     Slider_b1.max = 1;
 56     Slider_b1.step = 0.1;
 57     Slider_b1.value = Text_b1.value;  
 58 	
 59 	Slider_b3.min = -1;          			
 60     Slider_b3.max = 1;
 61     Slider_b3.step = 0.1;
 62     Slider_b3.value = Text_b3.value;  
 63 	
 64 	Slider_delt.min = -5;          			
 65     Slider_delt.max = 5;
 66     Slider_delt.step = 0.1;
 67     Slider_delt.value = Text_delt.value;  
 68 	
 69 	Slider_m.min = 0.1;          
 70     Slider_m.max = 10;
 71     Slider_m.step = 0.1;
 72     Slider_m.value = Text_m.value; 
 73 	
 74     Slider_c.min = 1;   
 75     Slider_c.max = 200;
 76     Slider_c.step = 1;	
 77     Slider_c.value = Text_c.value; 	
 78 	Slider_delt.focus();
 79 	
 80     // *** Задание вычислительных параметров ***
 81 
 82     const fps = 550;                         // frames per second - число кадров в секунду (качеcтво отображения)
 83     const spf = 260;                        // steps per frame   - число шагов интегрирования между кадрами (скорость расчета)
 84     const dt  = 0.1 * T0 / fps;           // шаг интегрирования 
 85 	
 86 	// Задание констант для рисования
 87 	const scale    = canvas.height / Ny / a0;  // масштабный коэффициент для перехода от расчетных к экранным координатам
 88 	const scale_gr = canvas_gr.height / Ny / a0;  // масштабный коэффициент для перехода от расчетных к экранным координатам
 89 	const scale_gr2 = canvas_gr2.height / Ny / a0;
 90 	
 91 	
 92     var w = canvas.width / scale;		 // ширина окна в расчетных координатах
 93 	var h = canvas.height / scale;       // высота окна в расчетных координатах
 94 	var w1 = canvas_gr.width / scale;		 // ширина окна в расчетных координатах
 95 	var h1 = canvas_gr.height / scale;       // высота окна в расчетных координатах
 96              
 97 	
 98     // -------------------------------         Выполнение программы              ------------------------------------------
 99 	// Добавление шара 1
100     var b = [];
101 	var time = 1;
102 	b.x  = l1;            b.y   = h / 2;   // расчетные координаты шара
103 	b.x_ = b.x;              b.y_  = b.y; 
104 	b.fx = 0;                b.vx = 0;               // начальная скорость
105 	b.cx = 0;                b.ax = 0;               // начальное ускорение
106 	
107 	// центр рамки 
108 	var origin = [];
109 	origin.x = w/2;	origin.y = h/2;
110 	// стенка 
111 	var wall1 = [];
112 	wall1.x = w/2 - 9*a0;	wall1.y = h/2;
113 
114 	// Основной цикл программы
115 	setInterval(control, 1500 / fps);  // функция control вызывается с периодом, определяемым вторым параметром
116 	
117 // ---------------------------------------------------------------------------------------------------------------------
118 // ---------------------------------           Определение всех функций              -----------------------------------
119 // ---------------------------------------------------------------------------------------------------------------------
120 	
121 	// функция запускается при нажатии клавиши мыши
122     canvas.onmousedown = function(e) 
123 	{
124         var m = mouseCoords(e);                     // получаем координаты курсора мыши
125 		context.clearRect(0, 0, w * scale, h* scale);      
126 		context_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);      
127 		context_gr2.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);  
128         context_gr.closePath();
129 		context_gr2.closePath();
130 		context.closePath();
131         context.fill();
132         var x = b.x*scale - m.x;                     // расстояние от центра шара до курсора по оси x
133         var y = b.y*scale - m.y;  					 // расстояние от центра шара до курсора по оси y
134         var rLen2 = x * x + y * y;                   // квадрат расстояния между курсором и центром шара
135 		//console.log(rLen2);
136 		//console.log(100*r*r);
137         if (rLen2 <= 500 * r * r)					 // если курсор нажал на шар
138 		{                       
139             xShift = b.x*scale - m.x;                // сдвиг курсора относительно центра шара по x
140             canvas.onmousemove = mouseMove; 		 // пока клавиша нажата - работает функция перемещения
141 			
142         }
143     }
144 		
145  
146     // функция запускается при отпускании клавиши мыши
147     document.onmouseup = function() 
148 	{
149         canvas.onmousemove = null;        // когда клавиша отпущена - функции перемещения нету
150     }
151  
152     // функция запускается при перемещении мыши (много раз, в каждый момент перемещения)
153     // в нашем случае работает только с зажатой клавишей мыши
154     function mouseMove(e) {
155 		context.clearRect(0, 0, w * scale, h* scale);      
156 		context_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);      
157 		context_gr2.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);  
158         var m = mouseCoords(e); 		// получаем координаты курсора мыши
159         b.x = (m.x + xShift)/scale;
160 		delt = b.x - l1;
161 		b.vx = 0;
162 		b.ax = 0;
163 		//console.log(b.x);
164 		Text_delt.value  = delt;
165 		Slider_delt.value = Text_delt.value;  
166 		//var scale1 = 0.0000000002;
167 		//var scale2 = 0.2;
168 		
169     }
170  
171     // функция возвращает координаты курсора мыши
172     function mouseCoords(e) {
173         var m = [] ;
174         var rect = canvas.getBoundingClientRect();
175         m.x = e.clientX - rect.left;
176         m.y = e.clientY - rect.top;
177         return m;
178     }
179 	// основная функция, вызываемая в программе
180 	function control() 
181 	{
182         physics(); // делаем spf шагов интегрирование
183 		draw();
184 		draw_gr();
185 		draw_gr2();
186 		
187     }
188 
189 	// Реакция на изменение значения в чекбоксе
190 	this.set_delt = function(input) 
191 	{
192 		delt = Number(input);   		//записываем значение начального смещения
193 		time = 1;
194 		b.x = l1 + delt;   //изменение начальных координат шаров   
195 		b.x_ = b.x; 
196 		b.vx = 0;  			//задание начальных скоростей шаров
197 		b.ax = 0;
198 		Text_delt.value  = delt;
199 		Slider_delt.value = Text_delt.value;  
200         context.clearRect(0, 0, w * scale, h* scale);      
201 		context_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);      
202 		context_gr2.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);  
203 		
204 	}
205 	
206 	this.set_m = function(input) 
207 	{
208 		m = Number(input);   
209 		time = 1;
210         context.clearRect(0, 0, w * scale, h* scale);      
211 		context_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);      
212 		context_gr2.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);   
213 	}
214 	
215 	this.set_c = function(input) 
216 	{
217 		c = Number(input);   
218 		time = 1;
219       context.clearRect(0, 0, w * scale, h* scale);      
220 		context_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);      
221 		context_gr2.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);   
222 		
223 	}
224 	
225 	this.set_b1 = function(input) 
226 	{
227 		b1 = Number(input);   
228 		time = 1;
229         context.clearRect(0, 0, w * scale, h* scale);      
230 		context_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);      
231 		context_gr2.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);   
232 	}
233 	
234 	this.set_b3 = function(input) 
235 	{
236 		b3 = Number(input);   
237 		time = 1;
238         context.clearRect(0, 0, w * scale, h* scale);      
239 		context_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);      
240 		context_gr2.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);   
241 	}
242 
243 	/*this.set_scale1 = function(input) 
244 	{
245 		//scale1 = Number(input); 
246 		var Cmax = Math.max(c1, c2); var Mmax = Math.max(m1, m2); 
247 		scale1 =  h*Mmax/(Cmax*delt);
248 		console.log(scale1);
249 		time = 1;
250         context.clearRect(0, 0, w * scale, h * scale);  
251 		context_gr.clearRect(0, 0, w * scale, h * scale);
252 		context_gr2.clearRect(0, 0, w * scale, h * scale); 
253 	}
254 	
255 	this.set_scale2 = function(input) 
256 	{
257 		
258 		scale2 = Number(input);   
259 		time = 1;
260         context.clearRect(0, 0, w * scale, h * scale);  
261 		context_gr.clearRect(0, 0, w * scale, h * scale);
262 		context_gr2.clearRect(0, 0, w * scale, h * scale); 
263 	}*/   
264     // Функция, делающая spf шагов интегрирования
265     function physics()
266 	{     
267       	b.x_ = b.x;  b.vx_= b.vx; b.ax_ = b.ax;						//записываем старые координаты, скорости и ускорения
268 		//c.x_ = c.x;  c.vx_= c.vx;
269 		E_ = E;
270 			for (var s = 1; s <= spf; s++) 	
271 			{
272 			b.ax  =  1*(-c*(b.x - l1) + b1*b.vx - b3*b.vx*b.vx*b.vx  )/m*dt; //расчет ускорения первого шара
273 			//console.log(Ftr);
274 			//console.log(b.vx);
275 			/* c.vx  += -c2*(c.x - b.x - l2)/m2*dt;					//расчет скорости второго шара */
276 			b.vx += 100*b.ax*dt;											//расчет скорости первого шара
277 			b.x += b.vx*dt
278 			/* c.x += c.vx*dt; */											//расчет координаты второго шара
279 			//console.log(b.x - 2*a0)
280 			/* if (b.x - 2*a0 >  w/2 - 9*a0)                              // условие на пружину сжатую.
281 			{
282 			b.x += 10000*b.vx*dt ;
283 			console.log(b.x);
284 			}                                      // расчет координаты первого шара
285 		    else
286 			{	
287 			b.vx = 0 ;
288 			b.ax = 0;
289 			
290 			for (var s = 1; s <= spf; s++) 
291 			{
292 			b.ax  =  100*(-c1*(b.x - l1)+ k*b.vx  -  Ftr)/m1*dt; //расчет ускорения первого шара
293 			console.log(b.x)
294 			b.vx += b.ax*dt;
295 			b.x += b.vx*dt; */
296 			/* } */
297 			}
298 			  
299 			//console.log(b.x)
300 			E = 0.5*c*(b.x-l1)*(b.x - l1); //рачсет энергии системы
301 			//Vprov = Math.max(b.vx, c.vx);
302 			//if ((Vprov) > Vmax) Vmax = b.vx;		   
303 		  
304 		 
305 			
306 	  
307 	   time = time + 1;
308 	   
309     }
310 	
311     // определение функций, рисующих частицу, стенки и графики
312     
313     function draw() //функция, рисующая шары, стенку и пружины
314 	{
315 			context.clearRect(0, 0, w * scale, h * scale);      // очистить экран
316            
317 		    // линия, соединяющая первую частицу со стенкой
318 		   	context.beginPath();
319 			context.moveTo(b.x*scale, b.y*scale);
320         	context.lineTo(wall1.x*scale, wall1.y*scale);
321 			// стенка 
322 			context.moveTo(wall1.x*scale, (wall1.y + a0)*scale );
323         	context.lineTo(wall1.x*scale, (wall1.y - a0)*scale );	
324 			context.closePath();
325 			context.stroke();
326 			
327 			//частица первая
328 			context.fillStyle = 'blue';
329          	context.beginPath();
330             context.arc(b.x * scale, b.y * scale, 0.5*r * scale, 0,  2*Math.PI, false);
331 			context.fill();
332 			
333 			
334     }
335 
336 
337 	
338 	function draw_gr() // Определение функции, рисующей первый график
339 	{
340 		scale2 = h /5* delt;
341 		//console.log (Math.abs(b.vx_ - b.vx));
342 		if(Math.abs(b.vx_ - b.vx) > 0.00005)
343 		{
344 		Graph(b, 'blue'); //график для шара при положительном ускорении
345 		}
346 		else
347 		{
348 		Graph(b, 'red'); //график для шара при отрицательном ускорении
349 		}
350 		GraphAxex('black');	//оси
351 		
352 	
353 				
354     }
355 	
356 	
357 	
358 	
359 	function Graph(b, color)
360     {
361         context_gr2.lineWidth = 2; 
362         context_gr.strokeStyle = color;
363         context_gr.beginPath();
364 	    context_gr.moveTo(time*scale2/3, (b.x-l1)*scale*2*scale2 + h1*scale/2);
365 	    context_gr.lineTo( (time+1)*scale2/3, (b.x_- l1)*scale*2*scale2 + h1*scale/2);
366 		context_gr.stroke();
367         context_gr.closePath();
368 		
369     }  
370 	
371 	function GraphAxex(color)
372 	{
373 	context_gr2.lineWidth = 2;
374 		context_gr.strokeStyle = color;
375         context_gr.beginPath();
376 	  	// ось горизонтальная
377 		context_gr.moveTo(w1/2*scale, 0);
378 		context_gr.lineTo(w1/2*scale, h1*scale);
379 		// ось вертикальная
380 		context_gr.moveTo(0, (h1/2)*scale);
381 		context_gr.lineTo((w1)*scale, (h1/2)*scale);
382         context_gr.closePath();
383 		context_gr.stroke();
384 	
385 	}
386 	
387 	function Graph1(b, color)
388     {
389          context_gr2.lineWidth = 2;
390         context_gr.strokeStyle = color;
391         context_gr.beginPath();
392 		context_gr.moveTo(time*scale2/3, (b.x-l1)*scale*2*scale2 + scale*h1/2);
393 		context_gr.lineTo( (time+1)*scale2/3, (b.x_- l1)*scale*2*scale2 + scale*h1/2);
394 		context_gr.stroke();
395 		context_gr.closePath();
396 		
397     }  
398 	
399 	
400 	function draw_gr2() // Определение функции, рисующей второй график
401 	{
402 	  
403 		scale1 = 6* (h1*Mmax)/( c*delt*delt);	
404         scale2 = A;		
405 		GraphVel(b, 'blue'); //график для шара
406 		//GraphVel2(b, 'red'); //график для амплитудного коэффициента для шара
407 		GraphVel3(b, 'green');
408 		GraphAxex2('black'); //оси	
409 		//console.log(A);
410 		
411   			
412     }
413 	
414 	/* function draw_gr3() // Определение функции, рисующей амплитудный график сходимости
415 	{
416 	
417 		var A = Math.sqrt((-4*b1)m*m/(3*b3*c*c));
418 		scale1 = A;		 
419 		GraphVel(b, 'yellow'); //график для первого шара
420 		//GraphVel2(c, 'red'); //график для второго шара
421 		GraphAxex2('black'); //оси	
422 		
423   			
424     } */
425 	
426 	
427 	
428 	function GraphVel(b, color)
429     {
430         
431 		context_gr2.lineWidth = 2;
432         context_gr2.strokeStyle = color;
433       
434 		context_gr2.beginPath();
435 		
436 		context_gr2.moveTo((b.x-l1)*2*scale1 + scale*w1/2, b.vx*scale1 + scale*h1/2 );
437 		context_gr2.lineTo((b.x_- l1)*2*scale1 + scale*w1/2, b.vx_*scale1 + scale*h1/2);
438 		
439 		context_gr2.closePath();
440 		context_gr2.stroke();	
441 		
442         
443     }
444 	
445 	    function GraphVel2(b, color)
446     {
447          context_gr2.lineWidth = 2;
448         context_gr2.strokeStyle = color;
449       
450 		context_gr2.beginPath();
451 		
452 		context_gr2.moveTo((b.x-l1)*2*scale2 + scale*w1/2, b.vx*scale2 + scale*h1/2 );
453 		context_gr2.lineTo((b.x_- l1)*2*scale2 + scale*w1/2, b.vx_*scale2 + scale*h1/2);
454 		
455 		context_gr2.closePath();
456 		context_gr2.stroke();	
457 
458 	
459         
460     }
461 	function GraphVel3(b, color)
462 	
463 	{
464 			
465 		//Grafic A
466 		A = Math.sqrt((-4*b1*m*m)/(3*b3*c*c));
467 		context_gr2.lineWidth = 1;
468 		context_gr2.strokeStyle = color;
469         console.log(A);
470 		context_gr2.beginPath();
471 		
472 		context_gr2.moveTo(1*A*Math.sin(time)+ scale*w1/2, 1*A*Math.cos(time)+ scale*h1/2);
473 		context_gr2.lineTo(1*A*Math.sin(time)+ scale*w1/2, 1*A*Math.cos(time)+ scale*h1/2);
474 		//context_gr2.moveTo(A*Math.sin(b.x-l1)+ scale*w1/2, A*Math.cos(b.x-l1)+ (h1/2)*scale);
475 		//context_gr2.lineTo(A*Math.sin(b.x_-l1)+ scale*w1/2,A*Math.cos(b.x_-l1) + (h1/2)*scale);
476 		
477 		context_gr2.closePath();
478 		context_gr2.stroke();
479 	}
480 	
481 	function GraphAxex2(color)
482 	{
483 		context_gr2.lineWidth = 1;
484 		context_gr2.strokeStyle = color;
485         context_gr2.beginPath();
486 	  	// ось горизонтальная
487 		context_gr2.moveTo(w1/2*scale, 0);
488 		context_gr2.lineTo(w1/2*scale, h1*scale);
489 		// ось вертикальная
490 		context_gr2.moveTo(0, (h1/2)*scale);
491 		context_gr2.lineTo((w1)*scale, (h1/2)*scale);
492         context_gr2.closePath();
493 		context_gr2.stroke();
494 	
495 	}
496 	 
497  
498 }

Файл "1_7.html"

 1 	<!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title> 2 </title>
 5     <script src="2_7.js"></script>
 6 </head>
 7 <body>
 8 	<!-- Добавление области для рисования частицы -->
 9     <canvas id="canvasBalls" width="800" height="300" style="border:1px solid #000000;"></canvas>
10 	<!-- Добавление области для рисования графика -->
11 	 <div>
12         Координаты от времени:
13         <font color="#0000FF" size="5"><B>—</B></font> Тело
14         
15     </div>    
16 	<canvas id="canvasGraph" width="800" height="600" style="border:1px solid #000000;"></canvas>	
17 	<!-- Добавление чекбокса для ввода скорости частицы -->
18 	<div>
19          Фазовая плоскость:
20         <font color="#0000FF" size="5"><B>—</B></font> Тело
21         
22     </div>     	
23 	<canvas id="canvasGraph1" width="800" height="600" style="border:1px solid #000000;"></canvas>	
24 	
25     <div>
26 	    delt =
27         <input id="Text_delt" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
28             if (!this.checkValidity()) return;
29             app.set_delt(this.value);
30 			document.getElementById('Slider_delt').value = this.value;
31          
32         ">
33 		<input type = "range"  id="Slider_delt" style="width: 100px;" oninput="app.set_delt(this.value); document.getElementById('Text_delt').value = this.value;">
34         </I></font>
35     </div>
36 	
37 	<!-- Масса 1 -->
38 	<div>
39 	    m =
40         <input id="Text_m" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
41             if (!this.checkValidity()) return;
42             app.set_m(this.value);
43             document.getElementById('Slider_m').value = this.value;
44         ">
45 		<input type = "range"  id="Slider_m" style="width: 100px;" oninput="app.set_m(this.value); document.getElementById('Text_m').value = this.value;">
46         </I></font>
47     </div>
48 	
49 	<!-- Жесткость 1-->
50 	<div>
51 	    c =
52         <input id="Text_c" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
53             if (!this.checkValidity()) return;
54             app.set_c(this.value);
55             document.getElementById('Slider_c').value = this.value;
56         ">
57 		<input type = "range"  id="Slider_c" style="width: 100px;" oninput="app.set_c(this.value); document.getElementById('Text_c').value = this.value;">
58         </I></font>
59     </div>
60 	<!-- Первый коэффициент -->
61 	<div>
62 	    b1 =
63         <input id="Text_b1" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
64             if (!this.checkValidity()) return;
65             app.set_b1(this.value);
66 			document.getElementById('Slider_b1').value = this.value;
67          
68         ">
69 		<input type = "range"  id="Slider_b1" style="width: 100px;" oninput="app.set_b1(this.value); document.getElementById('Text_b1').value = this.value;">
70         </I></font>
71     </div>
72 	
73 	<!-- Второй коэффициент -->
74 	<div>
75 	    b3 =
76         <input id="Text_b3" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
77             if (!this.checkValidity()) return;
78             app.set_b3(this.value);
79 			document.getElementById('Slider_b3').value = this.value;
80          
81         ">
82 		<input type = "range"  id="Slider_b3" style="width: 100px;" oninput="app.set_b3(this.value); document.getElementById('Text_b3').value = this.value;">
83         </I></font>
84     </div>
85     <script type="text/javascript"> app = new MainParticle(document.getElementById('canvasBalls'),document.getElementById('canvasGraph'),document.getElementById('canvasGraph1'));</script>
86 </body>
87 </html>

Интерактивная модель простейшей автоколебательной системы с пружиной — различия между версиями

Текущая версия на 16:23, 13 февраля 2016

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Навигация

Инструменты

Поделиться

@@ Строка 1: / Строка 1: @@
 [[Виртуальная лаборатория]] > [[Простейшая колебательная система с двумя степенями свободы]] <HR>
-Рассматривается простейшая колебательная система тело-пружина. Пружина крепится на неподвижном стержне, заделанном в центре движущейся круглой пластины.
+Рассматривается простейшая колебательная система тело-пружина-конвейер. Пружина крепится к стенке. Грузик на пружинке колеблется посредством постоянной силы F, с которой тянет конвейер.
+Запишем уравнения движения системы :
+::<math>
+m \ddot{x} = - c x + F(V - \dot{x} )  </math>  ,  где <math>m</math>  - масса грузика, <math>c</math> - жесткость пружины,<math>V</math>  - скорость конвейера, <math>\dot{x}</math> - изменение скорости тела
+Делаем замену переменных. <math>z = x - xo</math>, где <math>xo</math> - начальная координата тела. Затем раскладываем силу в ряд Тейлора, получаем новое уравнение :
+<math>
+m \ddot{z} + F'(V) \dot{z} - 0.5*F''(V - \dot{z}) + 1/6*F'''(V - \dot{z}) + c z = 0 </math>
+Переобозначим переменные. Пусть :
+<math> b1 = F'(V)/m \\
+b2 = F''(V)/2m \\
+b3 = F'''(V)/6m </math>
+Получим новое уравнение :
+<math>
+\ddot{z} + ko^2 z = b1 \dot{z} - b3 \dot{z}^3 </math> , где <math> ko = c/m </math> - частота колебаний.
-Уравнения движения системы будут выглядеть так:
+{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/BondarevS/SeregaTrouble/1_7.html |width=860 |height=1800 |border=0 }}
-::<math>
-m \ddot{z} + F'(V) \dot{z} + c z = 0
-</math>
-{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/BondarevS/1_1.html |width=860 |height=1800 |border=0 }}
-Скачать [[Медиа:IMoS-OSWaS.rar|IMoS-OSWaS.rar]].
+Скачать [[Медиа:SeregaTrouble.rar|SeregaTrouble.rar]].
 <div class="mw-collapsible mw-collapsed" style="width:100%" >
-'''Текст программы на языке JavaScript (разработчик [[Сергей Бондарев]]):''' <div class="mw-collapsible-content">
+'''Текст программы на языке JavaScript (разработчик [[Бондарев Сергей]]):''' <div class="mw-collapsible-content">
-Файл '''"2_1.js"'''
+Файл '''"2_7.js"'''
 <syntaxhighlight lang="javascript" line start="1" enclose="div">
@@ Строка 27: / Строка 41: @@
      const m0 = 1;                           // масштаб массы
      const T0 = 1;                           // масштаб времени (период колебаний исходной системы)
-     const a0 = 1;                           // масштаб расстояния (диаметр шара)
+     const a0 = 1;                            // масштаб расстояния (диаметр шара)
+	const mu = 0.4;                           // коэф. трения
      const g0 = a0 / T0 / T0;                // масштаб ускорения (ускорение, при котором за T0 будет пройдено расстояние a0)
@@ Строка 33: / Строка 49: @@
      const C0 = m0 * k0 * k0;                // масштаб жесткости
 	var scale1 = 0.2;
-	var scale2 = 0.2;
+	/* var scale2 = 0.2; */
      // *** Задание физических параметров ***
 	var xShift= 0;
@@ Строка 41: / Строка 55: @@
      const Nx = 15;							 // число шаров, помещающихся по вертикали в окно (задает размер шара относительно размера окна)
 	const l1 =  15*a0;						// длина первой пружины
-	const l2 =  5*a0;						// длина второй пружины
+	const lmax = 2*l1;                      // максимальное растяжение  первой пружины
-	var m1 = 5 * m0;  						// масса первого шара
+	/* const l2 =  5*a0;	 */					// длина второй пружины
-	var m2 = 10 * m0; 						// масса второго шара
+	var m = 5 * m0;  						// масса шара
+	//var v.x = 0;                             // скорость шара
+	var k = 1;    	                // силовой коэффициент
+	var b1 = 0.1;
+	var b3 = 0.1;
+	var N = m*9.8;                          // сила трения
+	var Ftr = -mu * N ;
+	/* var m2 = 10 * m0; 						// масса второго шара */
      const Cwall = 10 * C0;                  // жесткость стен
      const r = 1 * a0;                     // радиус частицы в расчетных координатах
-	var c1 = 100;                    	    // "жесткость" пружинки 1
+	var c = 100;                    	    // "жесткость" пружинки 1
-	var c2 = 100;                     		// "жесткость" пружинки 1
+	/* var c2 = 100;   */                   		// "жесткость" пружинки 1
 	var vx0 = 0 * a0/T0;					//начальная скорость
 	var delt = 0*a0;						//начальное смещение
@@ Строка 53: / Строка 74: @@
 	var Vmax = 0; var Mmin = 0; var Vprov = 0;
+     var A = Math.sqrt((-4*b1*m*m)/(3*b3*c*c));
+	var Mmax= Math.max(m,10);
 	//*** Передача значений слайдерам и текстовым окнам***
 	Text_delt.value  = delt;
-	Text_m1.value  = m1;
+	Text_m.value  = m;
-	//Text_m2.value  = m2;
+	Text_c.value  = c;
-	Text_c1.value  = c1;
+	Text_b1.value = b1;
-	//Text_c2.value  = c2;
+	Text_b3.value = b3;
+	Slider_b1.min = -1;
+    Slider_b1.max = 1;
+    Slider_b1.step = 0.1;
+    Slider_b1.value = Text_b1.value;
-	Slider_delt.min = -1;
+	Slider_b3.min = -1;
-     Slider_delt.max = 1;
+    Slider_b3.max = 1;
+    Slider_b3.step = 0.1;
+    Slider_b3.value = Text_b3.value;
+	Slider_delt.min = -5;
+     Slider_delt.max = 5;
      Slider_delt.step = 0.1;
      Slider_delt.value = Text_delt.value;
-	Slider_m1.min = 0.1;
+	Slider_m.min = 0.1;
-     Slider_m1.max = 10;
+     Slider_m.max = 10;
-     Slider_m1.step = 0.1;
+     Slider_m.step = 0.1;
-     Slider_m1.value = Text_m1.value;
+     Slider_m.value = Text_m.value;
-	//Slider_m2.min = 0.1;
+     Slider_c.min = 1;
-    //Slider_m2.max = 10;
+     Slider_c.max = 200;
-    //Slider_m2.step = 0.1;
+     Slider_c.step = 1;
-   // Slider_m2.value = Text_m2.value;
+     Slider_c.value = Text_c.value;
-	//Slider_c2.min = 1;
-   // Slider_c2.max = 200;
-   // Slider_c2.step = 1;
-   //Slider_c2.value = Text_c2.value;
-     Slider_c1.min = 1;
-     Slider_c1.max = 200;
-     Slider_c1.step = 1;
-     Slider_c1.value = Text_c1.value;
 	Slider_delt.focus();
@@ Строка 90: / Строка 114: @@
      const fps = 550;                         // frames per second - число кадров в секунду (качеcтво отображения)
      const spf = 260;                        // steps per frame   - число шагов интегрирования между кадрами (скорость расчета)
-     const dt  = 0.01 * T0 / fps;           // шаг интегрирования
+     const dt  = 0.1 * T0 / fps;           // шаг интегрирования
 	// Задание констант для рисования
@@ Строка 111: / Строка 135: @@
 	b.x_ = b.x;              b.y_  = b.y;
 	b.fx = 0;                b.vx = 0;               // начальная скорость
-	// Добавление шара 2
+	b.cx = 0;                b.ax = 0;               // начальное ускорение
-	var c = [];
-	c.x  = l2 + l1;    		 c.y   = h / 2;   // расчетные координаты шара
-	c.x_ = c.x;              c.y_  = c.y;
-	c.fx = 0;              	c.vx = 0;                // начальная скорость
 	// центр рамки
@@ Строка 155: / Строка 174: @@
          }
      }
      // функция запускается при отпускании клавиши мыши
@@ Строка 171: / Строка 191: @@
          b.x = (m.x + xShift)/scale;
 		delt = b.x - l1;
-		b.vx = 0; c.vx = 0;
+		b.vx = 0;
-		console.log(b.x);
+		b.ax = 0;
+		//console.log(b.x);
 		Text_delt.value  = delt;
 		Slider_delt.value = Text_delt.value;
@@ Строка 203: / Строка 224: @@
 		delt = Number(input);   		//записываем значение начального смещения
 		time = 1;
-		b.x = l1 + delt; c.x = l1+l2;   //изменение начальных координат шаров
+		b.x = l1 + delt;   //изменение начальных координат шаров
 		b.x_ = b.x;
-		b.vx = 0; c.vx = 0; 			//задание начальных скоростей шаров
+		b.vx = 0;  			//задание начальных скоростей шаров
+		b.ax = 0;
 		Text_delt.value  = delt;
 		Slider_delt.value = Text_delt.value;
@@ Строка 214: / Строка 236: @@
 	}
-	this.set_m1 = function(input)
+	this.set_m = function(input)
 	{
-		m1 = Number(input);
+		m = Number(input);
 		time = 1;
          context.clearRect(0, 0, w * scale, h* scale);
@@ Строка 223: / Строка 245: @@
 	}
-	this.set_c1 = function(input)
+	this.set_c = function(input)
 	{
-		c1 = Number(input);
+		c = Number(input);
 		time = 1;
        context.clearRect(0, 0, w * scale, h* scale);
@@ Строка 233: / Строка 255: @@
 	}
-	this.set_m2 = function(input)
+	this.set_b1 = function(input)
 	{
-		m2 = Number(input);
+		b1 = Number(input);
 		time = 1;
-     context.clearRect(0, 0, w * scale, h* scale);
+         context.clearRect(0, 0, w * scale, h* scale);
 		context_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);
 		context_gr2.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);
 	}
-	this.set_c2 = function(input)
+	this.set_b3 = function(input)
-	{;
+	{
-		c2 = Number(input);
+		b3 = Number(input);
 		time = 1;
          context.clearRect(0, 0, w * scale, h* scale);
 		context_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);
 		context_gr2.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);
 	}
 	/*this.set_scale1 = function(input)
 	{
@@ Строка 271: / Строка 293: @@
 		context_gr.clearRect(0, 0, w * scale, h * scale);
 		context_gr2.clearRect(0, 0, w * scale, h * scale);
 	}*/
      // Функция, делающая spf шагов интегрирования
      function physics()
 	{
-        b.x_ = b.x;  b.vx_= b.vx;									//записываем старые координаты и скорости
+      	b.x_ = b.x;  b.vx_= b.vx; b.ax_ = b.ax;						//записываем старые координаты, скорости и ускорения
-		c.x_ = c.x;  c.vx_= c.vx;
+		//c.x_ = c.x;  c.vx_= c.vx;
 		E_ = E;
 			for (var s = 1; s <= spf; s++)
 			{
+			b.ax  =  1*(-c*(b.x - l1) + b1*b.vx - b3*b.vx*b.vx*b.vx  )/m*dt; //расчет ускорения первого шара
+			//console.log(Ftr);
+			//console.log(b.vx);
+			/* c.vx  += -c2*(c.x - b.x - l2)/m2*dt;					//расчет скорости второго шара */
+			b.vx += 100*b.ax*dt;											//расчет скорости первого шара
+			b.x += b.vx*dt
+			/* c.x += c.vx*dt; */											//расчет координаты второго шара
+			//console.log(b.x - 2*a0)
+			/* if (b.x - 2*a0 >  w/2 - 9*a0)                              // условие на пружину сжатую.
+			{
+			b.x += 10000*b.vx*dt ;
+			console.log(b.x);
+			}                                      // расчет координаты первого шара
+		    else
+			{
+			b.vx = 0 ;
+			b.ax = 0;
-			b.vx  +=  (c2*(-b.x + c.x - l2) - c1*(b.x - l1))/m1*dt; //расчет скорости первого шара
+			for (var s = 1; s <= spf; s++)
-			c.vx  += -c2*(c.x - b.x - l2)/m2*dt;					//расчет скорости второго шара
+			{
-			b.x += b.vx*dt;											//расчет координаты первого шара
+			b.ax  =  100*(-c1*(b.x - l1)+ k*b.vx  -  Ftr)/m1*dt; //расчет ускорения первого шара
-			c.x += c.vx*dt;											//расчет координаты второго шара
+			console.log(b.x)
-			E = 0.5*(m1*b.vx*b.vx + m2*c.vx*c.vx)+0.5*c2*(c.x - b.x -l2)*(c.x - b.x -l2)+0.5*c1*(b.x-l1)*(b.x - l1); //рачсет энергии системы
+			b.vx += b.ax*dt;
+			b.x += b.vx*dt; */
+			/* } */
+			}
+			//console.log(b.x)
+			E = 0.5*c*(b.x-l1)*(b.x - l1); //рачсет энергии системы
 			//Vprov = Math.max(b.vx, c.vx);
 			//if ((Vprov) > Vmax) Vmax = b.vx;
-			}
 	   time = time + 1;
@@ Строка 308: / Строка 351: @@
 			context.moveTo(b.x*scale, b.y*scale);
         	context.lineTo(wall1.x*scale, wall1.y*scale);
-			// линия, соединяющая первую частицу со второй
-			/* context.moveTo(b.x*scale, b.y*scale);
-        	context.lineTo(c.x*scale, c.y*scale);	 */
 			// стенка
 			context.moveTo(wall1.x*scale, (wall1.y + a0)*scale );
@@ Строка 317: / Строка 357: @@
 			context.stroke();
-			// частица вторая
-			/* context.fillStyle = "red";
-			context.beginPath();
-            context.arc(c.x * scale, c.y * scale, 0.5*r * scale, 0,  2*Math.PI, false);
-			context.fill(); */
 			//частица первая
 			context.fillStyle = 'blue';
@@ Строка 336: / Строка 371: @@
 	{
 		scale2 = h /5* delt;
-		//Graph1(c, 'red'); //график для второго шара
+		//console.log (Math.abs(b.vx_ - b.vx));
-		Graph(b, 'blue'); //график для первого шара
+		if(Math.abs(b.vx_ - b.vx) > 0.00005)
+		{
+		Graph(b, 'blue'); //график для шара при положительном ускорении
+		}
+		else
+		{
+		Graph(b, 'red'); //график для шара при отрицательном ускорении
+		}
 		GraphAxex('black');	//оси
      }
@@ Строка 347: / Строка 391: @@
 	function Graph(b, color)
      {
+        context_gr2.lineWidth = 2;
          context_gr.strokeStyle = color;
          context_gr.beginPath();
@@ Строка 359: / Строка 403: @@
 	function GraphAxex(color)
 	{
+	context_gr2.lineWidth = 2;
 		context_gr.strokeStyle = color;
          context_gr.beginPath();
@@ Строка 374: / Строка 419: @@
 	function Graph1(b, color)
      {
+          context_gr2.lineWidth = 2;
          context_gr.strokeStyle = color;
          context_gr.beginPath();
-		context_gr.moveTo(time*scale2/3, (b.x-l1-l2)*scale*2*scale2 + scale*h1/2);
+		context_gr.moveTo(time*scale2/3, (b.x-l1)*scale*2*scale2 + scale*h1/2);
-		context_gr.lineTo( (time+1)*scale2/3, (b.x_- l1-l2)*scale*2*scale2 + scale*h1/2);
+		context_gr.lineTo( (time+1)*scale2/3, (b.x_- l1)*scale*2*scale2 + scale*h1/2);
 		context_gr.stroke();
 		context_gr.closePath();
@@ Строка 387: / Строка 432: @@
 	function draw_gr2() // Определение функции, рисующей второй график
 	{
+		scale1 = 6* (h1*Mmax)/( c*delt*delt);
+        scale2 = A;
+		GraphVel(b, 'blue'); //график для шара
+		//GraphVel2(b, 'red'); //график для амплитудного коэффициента для шара
+		GraphVel3(b, 'green');
+		GraphAxex2('black'); //оси
+		//console.log(A);
+    }
-		var Mmax= Math.max(m1, m2);
+	/* function draw_gr3() // Определение функции, рисующей амплитудный график сходимости
-		scale1 = 6* (h1*Mmax)/( (c1+c2)*delt*delt);
+	{
-		GraphVel(b, 'blue'); //график для первого шара
+		var A = Math.sqrt((-4*b1)m*m/(3*b3*c*c));
+		scale1 = A;
+		GraphVel(b, 'yellow'); //график для первого шара
 		//GraphVel2(c, 'red'); //график для второго шара
 		GraphAxex2('black'); //оси
-     }
+     } */
 	function GraphVel(b, color)
      {
+		context_gr2.lineWidth = 2;
          context_gr2.strokeStyle = color;
@@ Строка 416: / Строка 477: @@
 	    function GraphVel2(b, color)
      {
+          context_gr2.lineWidth = 2;
          context_gr2.strokeStyle = color;
 		context_gr2.beginPath();
-		context_gr2.moveTo((b.x-l1-l2)*2*scale1 + scale*w1/2, b.vx*scale1 + scale*h1/2 );
+		context_gr2.moveTo((b.x-l1)*2*scale2 + scale*w1/2, b.vx*scale2 + scale*h1/2 );
-		context_gr2.lineTo((b.x_- l1-l2)*2*scale1 + scale*w1/2, b.vx_*scale1 + scale*h1/2);
+		context_gr2.lineTo((b.x_- l1)*2*scale2 + scale*w1/2, b.vx_*scale2 + scale*h1/2);
 		context_gr2.closePath();
 		context_gr2.stroke();
+    }
+	function GraphVel3(b, color)
+	{
+		//Grafic A
+		A = Math.sqrt((-4*b1*m*m)/(3*b3*c*c));
+		context_gr2.lineWidth = 1;
+		context_gr2.strokeStyle = color;
+        console.log(A);
+		context_gr2.beginPath();
+		context_gr2.moveTo(1*A*Math.sin(time)+ scale*w1/2, 1*A*Math.cos(time)+ scale*h1/2);
+		context_gr2.lineTo(1*A*Math.sin(time)+ scale*w1/2, 1*A*Math.cos(time)+ scale*h1/2);
+		//context_gr2.moveTo(A*Math.sin(b.x-l1)+ scale*w1/2, A*Math.cos(b.x-l1)+ (h1/2)*scale);
+		//context_gr2.lineTo(A*Math.sin(b.x_-l1)+ scale*w1/2,A*Math.cos(b.x_-l1) + (h1/2)*scale);
+		context_gr2.closePath();
-    }
+		context_gr2.stroke();
+	}
 	function GraphAxex2(color)
 	{
+		context_gr2.lineWidth = 1;
 		context_gr2.strokeStyle = color;
          context_gr2.beginPath();
@@ Строка 450: / Строка 530: @@
 }
 </syntaxhighlight>
-Файл '''"1_1.html"'''
+Файл '''"1_7.html"'''
 <syntaxhighlight lang="html5" line start="1" enclose="div">
-<!DOCTYPE html>
+	<!DOCTYPE html>
 <html>
 <head>
      <title> 2 </title>
-     <script src="2_1.js"></script>
+     <script src="2_7.js"></script>
 </head>
 <body>
@@ Строка 464: / Строка 544: @@
 	 <div>
          Координаты от времени:
-         <font color="#0000FF" size="5"><B>—</B></font> Первое тело
+         <font color="#0000FF" size="5"><B>—</B></font> Тело
-       <!-- <font color="#FF0000" size="5"><B>—</B></font> Второе тело -->
      </div>
@@ Строка 473: / Строка 551: @@
 	<div>
           Фазовая плоскость:
-         <font color="#0000FF" size="5"><B>—</B></font> Первое тело
+         <font color="#0000FF" size="5"><B>—</B></font> Тело
-       <!-- <font color="#FF0000" size="5"><B>—</B></font> Второе тело -->
      </div>
@@ Строка 486: / Строка 562: @@
              app.set_delt(this.value);
 			document.getElementById('Slider_delt').value = this.value;
          ">
 		<input type = "range"  id="Slider_delt" style="width: 100px;" oninput="app.set_delt(this.value); document.getElementById('Text_delt').value = this.value;">
@@ Строка 494: / Строка 570: @@
 	<!-- Масса 1 -->
 	<div>
-	    m1 =
+	    m =
-         <input id="Text_m1" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
+         <input id="Text_m" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
              if (!this.checkValidity()) return;
-             app.set_m1(this.value);
+             app.set_m(this.value);
-             document.getElementById('Slider_m1').value = this.value;
+             document.getElementById('Slider_m').value = this.value;
          ">
-		<input type = "range"  id="Slider_m1" style="width: 100px;" oninput="app.set_m1(this.value); document.getElementById('Text_m1').value = this.value;">
+		<input type = "range"  id="Slider_m" style="width: 100px;" oninput="app.set_m(this.value); document.getElementById('Text_m').value = this.value;">
          </I></font>
      </div>
@@ Строка 506: / Строка 582: @@
 	<!-- Жесткость 1-->
 	<div>
-	    c1 =
+	    c =
-         <input id="Text_c1" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
+         <input id="Text_c" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
              if (!this.checkValidity()) return;
-             app.set_c1(this.value);
+             app.set_c(this.value);
-             document.getElementById('Slider_c1').value = this.value;
+             document.getElementById('Slider_c').value = this.value;
          ">
-		<input type = "range"  id="Slider_c1" style="width: 100px;" oninput="app.set_c1(this.value); document.getElementById('Text_c1').value = this.value;">
+		<input type = "range"  id="Slider_c" style="width: 100px;" oninput="app.set_c(this.value); document.getElementById('Text_c').value = this.value;">
+        </I></font>
+    </div>
+	<!-- Первый коэффициент -->
+	<div>
+	    b1 =
+        <input id="Text_b1" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
+            if (!this.checkValidity()) return;
+            app.set_b1(this.value);
+			document.getElementById('Slider_b1').value = this.value;
+        ">
+		<input type = "range"  id="Slider_b1" style="width: 100px;" oninput="app.set_b1(this.value); document.getElementById('Text_b1').value = this.value;">
          </I></font>
      </div>
+	<!-- Второй коэффициент -->
+	<div>
+	    b3 =
+        <input id="Text_b3" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
+            if (!this.checkValidity()) return;
+            app.set_b3(this.value);
+			document.getElementById('Slider_b3').value = this.value;
+        ">
+		<input type = "range"  id="Slider_b3" style="width: 100px;" oninput="app.set_b3(this.value); document.getElementById('Text_b3').value = this.value;">
+        </I></font>
+    </div>
      <script type="text/javascript"> app = new MainParticle(document.getElementById('canvasBalls'),document.getElementById('canvasGraph'),document.getElementById('canvasGraph1'));</script>
 </body>
 </html>
 </syntaxhighlight>
 </div>