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

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
 
(не показаны 3 промежуточные версии 2 участников)
Строка 2: Строка 2:
 
Маятник с двумя степенями свободы
 
Маятник с двумя степенями свободы
  
Тяжелая материальная точка массы <math>m</math> подвешена на невесомой пружине жесткости <math>с</math> и длины <math>l_0</math> в ненапряженном состоянии.
+
Тяжелая материальная точка массы <math>m</math> подвешена на невесомой пружине жесткости <math>c</math> . Длина пружины в ненапряженном состоянии равна <math>l_0</math> .
  
  
Уравнения движения системы будут выглядеть так:
+
Линеаризованные уравнения движения системы будут выглядеть так:
 
::<math>
 
::<math>
 
  \ddot{x}  + \frac{g}{L}  x = 0  \\
 
  \ddot{x}  + \frac{g}{L}  x = 0  \\
Строка 13: Строка 13:
  
  
Колебания выглядят так:
+
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Pogodina/Koleb2mayatnik/new1.html |width=1000 |height=2000 |border=0 }}
 
 
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Pogodina/Koleb2mayatnik/new1.html |width=1000 |height=750 |border=0 }}
 
  
 
Скачать [[Медиа:New1.rar|New1.rar]].
 
Скачать [[Медиа:New1.rar|New1.rar]].
Строка 30: Строка 28:
 
var context1 = canvasBalls1.getContext("2d");  // на context1 происходит рисование
 
var context1 = canvasBalls1.getContext("2d");  // на context1 происходит рисование
 
var context2 = canvasBalls2.getContext("2d");  // на context2 происходит рисование
 
var context2 = canvasBalls2.getContext("2d");  // на context2 происходит рисование
var c1 = 5;
 
 
var Pi = 3.1415926;                  // число "пи"
 
var Pi = 3.1415926;                  // число "пи"
 
     var a0 = 1;                          // масштаб расстояния (диаметр шара)
 
     var a0 = 1;                          // масштаб расстояния (диаметр шара)
Строка 46: Строка 43:
 
var m = 1 * m0;                      // масса
 
var m = 1 * m0;                      // масса
 
var g = 0.25 * g0;              // ускорение свободного падения
 
var g = 0.25 * g0;              // ускорение свободного падения
var c = c1 * C0;                  // жесткость пружины
+
var c = 1 * C0;                  // жесткость пружины
var l0 = 6 * a0;                  // длина пружины
+
var l = 3 * a0;                  // длина пружины
var L = l0 + m * g / c;            // длина пружины под воздействием силы тяжести
 
 
var time = 0;
 
var time = 0;
  
  
Text_c.value  = c1;
+
Text_c.value  = c;
 
Text_m.value  = m;
 
Text_m.value  = m;
     
+
Text_l.value = l;
 +
 
     Slider_c.min = 1;                           
 
     Slider_c.min = 1;                           
     Slider_c.max = 10;
+
     Slider_c.max = 100;
 
     Slider_c.step = 0.5;
 
     Slider_c.step = 0.5;
 
     Slider_c.value = Text_c.value;   
 
     Slider_c.value = Text_c.value;   
 
 
 
Slider_m.min = 1;                           
 
Slider_m.min = 1;                           
     Slider_m.max = 3;
+
     Slider_m.max = 100;
     Slider_m.step = 0.1;
+
     Slider_m.step = 0.5;
 
     Slider_m.value = Text_m.value;  
 
     Slider_m.value = Text_m.value;  
 +
 
 +
Slider_l.min = 1;                         
 +
    Slider_l.max = 5;
 +
    Slider_l.step = 0.5;
 +
    Slider_l.value = Text_l.value;
 
 
 +
var L ;            // длина пружины под воздействием силы тяжести
 
// *** Задание вычислительных параметров ***
 
// *** Задание вычислительных параметров ***
 
   
 
   
Строка 80: Строка 83:
 
   
 
   
 
     var b = [];
 
     var b = [];
     b.x = w / 2;            b.y = h * 0.7;    // расчетные координаты шара
+
     b.x = w / 2;            b.y = l;    // расчетные координаты шара
 
b.vx = 0.5;            b.vy = 0.5;    // начальная скорость
 
b.vx = 0.5;            b.vy = 0.5;    // начальная скорость
 
 
Строка 92: Строка 95:
 
 
 
function physics1() {                    // то, что происходит каждый шаг времени
 
function physics1() {                    // то, что происходит каждый шаг времени
         for (var s = 1; s <= spf; s++) {
+
         L  = l + m * g / c;
             b.vx += -g / L * (b.x - w/2) * dt;          b.vy += -c / m * (b.y - h * 0.7) * dt;
+
//document.getElementById('text').innerHTML = '<b>'+l/scale+'</b>';
 +
for (var s = 1; s <= spf; s++) {
 +
             b.vx += -g / L * (b.x - w/2) * dt;          b.vy += -c / m * (b.y - l) * dt;  
 
             b.x += b.vx * dt;                          b.y += b.vy * dt;
 
             b.x += b.vx * dt;                          b.y += b.vy * dt;
 
         }
 
         }
 
     }
 
     }
+
/* function physics2() {                    // то, что происходит каждый шаг времени
 
        for (var s = 1; s <= spf; s++) {
 
 
            b.vx += -c * (Math.sqrt(Math.pow((L + b.y - h * 0.7),2) + Math.pow((b.x - w/2), 2)  - l0)) * (b.x - w/2) / (Math.sqrt(Math.pow((L + b.y - h * 0.7),2) + Math.pow((b.x - w/2),2))) / m * dt;       
 
b.vy += -c * (Math.sqrt(Math.pow((L + b.y - h * 0.7),2) + Math.pow((b.x - w/2), 2)  - l0)) * (L + b.y - h * 0.7) / (Math.sqrt(Math.pow((L + b.y - h * 0.7),2) + Math.pow((b.x - w/2),2))) / m * dt; 
 
            b.x += b.vx * dt;                          b.y += b.vy * dt;
 
        }
 
    }
 
*/
 
 
     this.set_m = function(input)
 
     this.set_m = function(input)
 
         {
 
         {
 
m = Number(input);   
 
m = Number(input);   
 
                 time = 0;
 
                 time = 0;
b.x = w / 2;            b.y = h * 0.7;     
+
b.x = w / 2;            b.y = l;     
 
            b.vx = 0.5;            b.vy = 0.5;
 
            b.vx = 0.5;            b.vy = 0.5;
 
                 context.clearRect(0, 0, w * scale, h * scale);       
 
                 context.clearRect(0, 0, w * scale, h * scale);       
Строка 118: Строка 114:
 
         }
 
         }
 
   
 
   
     
 
 
         this.set_c = function(input)
 
         this.set_c = function(input)
 
         {
 
         {
  
                 c1 = Number(input);   
+
                 c = Number(input);   
                time = 0;
+
                time = 0;
                 b.x = w / 2;            b.y = h * 0.7;     
+
                 b.x = w / 2;            b.y = l;     
 
            b.vx = 0.5;            b.vy = 0.5;  
 
            b.vx = 0.5;            b.vy = 0.5;  
 
context.clearRect(0, 0, w * scale, h* scale);       
 
context.clearRect(0, 0, w * scale, h* scale);       
 
                 context1.clearRect(0, 0, w * scale, h * scale);       
 
                 context1.clearRect(0, 0, w * scale, h * scale);       
 
                 context2.clearRect(0, 0, w * scale, h * scale);   
 
                 context2.clearRect(0, 0, w * scale, h * scale);   
 +
        }
 +
 +
    this.set_l = function(input)
 +
        {
 +
l = Number(input); 
 +
                time = 0;
 +
b.x = w / 2;            b.y = l;   
 +
            b.vx = 0.5;            b.vy = 0.5;
 +
                context.clearRect(0, 0, w * scale, h * scale);     
 +
                context1.clearRect(0, 0, w * scale, h * scale);     
 +
                context2.clearRect(0, 0, w * scale, h * scale);
 
         }
 
         }
  
Строка 134: Строка 140:
 
context.fillStyle = "#ff0000";
 
context.fillStyle = "#ff0000";
 
         context.clearRect(0, 0, w * scale, h * scale);      // очистить экран
 
         context.clearRect(0, 0, w * scale, h * scale);      // очистить экран
        context.beginPath();
+
draw_spring(w / 2, b.x, 0, b.y,0.25, 12);
         conte xt.arc(b.x * scale, b.y * scale, r * scale / 3, 0, 2 * Math.PI, false);                  //рисуем шар
+
context.beginPath();
 +
         context.arc(b.x * scale, b.y * scale, r * scale / 3, 0, 2 * Math.PI, false);                  //рисуем шар
 
         context.fill();
 
         context.fill();
 
         context.closePath();
 
         context.closePath();
context.lineWidth="6";
+
context.strokeStyle="#990099";
 
context.beginPath();                                                                          //рисуем пружину
 
context.moveTo(w/ 2 * scale, 0);
 
context.lineTo(b.x * scale, b.y * scale);
 
context.stroke();
 
 
 
 
context1.strokeStyle = "red";                                                            //рисуем график 1
 
context1.strokeStyle = "red";                                                            //рисуем график 1
 
         context1.beginPath();
 
         context1.beginPath();
         context1.moveTo(time * Math.sqrt(c / m) / 20 * scale, (b.x -  h / 6) * scale);
+
         context1.moveTo(time * Math.sqrt(g / L) * 5 * scale, (b.x -  h / 6) * scale);
         context1.lineTo((time + dt) * Math.sqrt(c / m) / 20 * scale, (b.x - h / 6) * scale);
+
         context1.lineTo((time + dt) * Math.sqrt(g / L) * 5 * scale, (b.x - h / 6) * scale);
 
         context1.stroke();
 
         context1.stroke();
 
 
Строка 164: Строка 166:
 
context2.strokeStyle = "#3070d0";                                                            //рисуем график 2
 
context2.strokeStyle = "#3070d0";                                                            //рисуем график 2
 
context2.beginPath();
 
context2.beginPath();
         context2.moveTo(time * Math.sqrt(c / m) * scale, (b.y - h / 5) * scale);
+
         context2.moveTo(time * Math.sqrt(c / m) * 5 * scale, (l - b.y + h / 2) * scale);
         context2.lineTo((time + dt) * Math.sqrt(c / m) * scale, (b.y - h / 5) * scale);
+
         context2.lineTo((time + dt) * Math.sqrt(c / m) * 5 *scale, (l - b.y + h / 2) * scale);
 
         context2.stroke();
 
         context2.stroke();
 
 
Строка 180: Строка 182:
 
 
 
time += dt;   
 
time += dt;   
 +
}
 +
function draw_spring(x_start, x_end, y_start, y_end, h, n) {
 +
var L_x = x_end-x_start;
 +
var L_y = y_end-y_start;
 +
for (var i = 0; i < n; i++) {
 +
var x_st = x_start + L_x / n * i;
 +
var x_end = x_start + L_x / n * (i + 1);
 +
var y_st = y_start + L_y / n * i;
 +
var y_end = y_start + L_y / n * (i + 1);
 +
var l_x = x_end - x_st;
 +
var l_y = y_end - y_st;
 +
context.beginPath();
 +
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);
 +
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) ;
 +
context.stroke();
 +
}
 
}
 
}
 
     
 
     
Строка 207: Строка 225:
 
         </I></font>
 
         </I></font>
 
     </div>
 
     </div>
 +
        <!-- Длина пружины-->
 +
        <div>
 +
            l0=
 +
        <input id="Text_l" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
 +
          if (!this.checkValidity()) return;
 +
          app.set_l(this.value);
 +
          document.getElementById('Slider_l').value = this.value;
 +
      ">
 +
                <input type = "range"  id="Slider_l" style="width: 100px;" oninput="app.set_l(this.value); document.getElementById('Text_l').value = this.value;">
 +
        </I></font>
 +
    </div>
 +
<div id="text"></div>
 
      <!-- Жесткость-->
 
      <!-- Жесткость-->
 
         <div>
 
         <div>
Строка 222: Строка 252:
 
         <canvas id="canvasBalls1" width="800" height="600" style="border:1px solid #000000;"></canvas>   
 
         <canvas id="canvasBalls1" width="800" height="600" style="border:1px solid #000000;"></canvas>   
 
         <div>
 
         <div>
         <b>Зависимость координаты y от k1*t:</b>
+
         <b>Зависимость координаты y от k2*t:</b>
 
     </div>     
 
     </div>     
 
         <canvas id="canvasBalls2" width="800" height="600" style="border:1px solid #000000;"></canvas>  
 
         <canvas id="canvasBalls2" width="800" height="600" style="border:1px solid #000000;"></canvas>  

Текущая версия на 23:09, 1 июня 2015

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

Маятник с двумя степенями свободы

Тяжелая материальная точка массы [math]m[/math] подвешена на невесомой пружине жесткости [math]c[/math] . Длина пружины в ненапряженном состоянии равна [math]l_0[/math] .


Линеаризованные уравнения движения системы будут выглядеть так:

[math] \ddot{x} + \frac{g}{L} x = 0 \\ \ddot{y} + \frac{c}{m} y = 0 \\ [/math]

, где [math]L = l_0 + \frac{m g}{c}[/math]


Скачать New1.rar.

Текст программы на языке JavaScript (разработчик Погодина Валерия, код основан на программе Цветков Денис):

Файл "Balls_v1_release.js"

  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 }

Файл "new1.html"

 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>