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

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
 
(не показано 8 промежуточных версий 3 участников)
Строка 1: Строка 1:
 
[[Виртуальная лаборатория]] > [[Простейшая колебательная система с двумя степенями свободы]] <HR>
 
[[Виртуальная лаборатория]] > [[Простейшая колебательная система с двумя степенями свободы]] <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%" >
 
<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">
 
<syntaxhighlight lang="javascript" line start="1" enclose="div">
  
Строка 27: Строка 41:
 
     const m0 = 1;                          // масштаб массы
 
     const m0 = 1;                          // масштаб массы
 
     const T0 = 1;                          // масштаб времени (период колебаний исходной системы)
 
     const T0 = 1;                          // масштаб времени (период колебаний исходной системы)
     const a0 = 1;                           // масштаб расстояния (диаметр шара)
+
     const a0 = 1;                           // масштаб расстояния (диаметр шара)
 +
const mu = 0.4;                          // коэф. трения
 +
                                         
  
 
     const g0 = a0 / T0 / T0;                // масштаб ускорения (ускорение, при котором за T0 будет пройдено расстояние a0)
 
     const g0 = a0 / T0 / T0;                // масштаб ускорения (ускорение, при котором за T0 будет пройдено расстояние a0)
Строка 33: Строка 49:
 
     const C0 = m0 * k0 * k0;                // масштаб жесткости
 
     const C0 = m0 * k0 * k0;                // масштаб жесткости
 
var scale1 = 0.2;
 
var scale1 = 0.2;
var scale2 = 0.2;
+
/* var scale2 = 0.2; */
 
 
 
 
 
     // *** Задание физических параметров ***
 
     // *** Задание физических параметров ***
 
var xShift= 0;
 
var xShift= 0;
Строка 41: Строка 55:
 
     const Nx = 15; // число шаров, помещающихся по вертикали в окно (задает размер шара относительно размера окна)
 
     const Nx = 15; // число шаров, помещающихся по вертикали в окно (задает размер шара относительно размера окна)
 
const l1 =  15*a0; // длина первой пружины
 
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 Cwall = 10 * C0;                  // жесткость стен
 
     const r = 1 * a0;                    // радиус частицы в расчетных координатах
 
     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 vx0 = 0 * a0/T0; //начальная скорость
 
var delt = 0*a0; //начальное смещение
 
var delt = 0*a0; //начальное смещение
Строка 53: Строка 74:
 
var Vmax = 0; var Mmin = 0; var Vprov = 0;
 
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_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.step = 0.1;
 
     Slider_delt.value = Text_delt.value;   
 
     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();
 
Slider_delt.focus();
 
 
Строка 90: Строка 114:
 
     const fps = 550;                        // frames per second - число кадров в секунду (качеcтво отображения)
 
     const fps = 550;                        // frames per second - число кадров в секунду (качеcтво отображения)
 
     const spf = 260;                        // steps per frame  - число шагов интегрирования между кадрами (скорость расчета)
 
     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.x_ = b.x;              b.y_  = b.y;  
 
b.fx = 0;                b.vx = 0;              // начальная скорость
 
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;
 
         b.x = (m.x + xShift)/scale;
 
delt = b.x - l1;
 
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;
 
Text_delt.value  = delt;
 
Slider_delt.value = Text_delt.value;   
 
Slider_delt.value = Text_delt.value;   
Строка 203: Строка 224:
 
delt = Number(input);    //записываем значение начального смещения
 
delt = Number(input);    //записываем значение начального смещения
 
time = 1;
 
time = 1;
b.x = l1 + delt; c.x = l1+l2;  //изменение начальных координат шаров   
+
b.x = l1 + delt;  //изменение начальных координат шаров   
 
b.x_ = b.x;  
 
b.x_ = b.x;  
b.vx = 0; c.vx = 0; //задание начальных скоростей шаров
+
b.vx = 0; //задание начальных скоростей шаров
 +
b.ax = 0;
 
Text_delt.value  = delt;
 
Text_delt.value  = delt;
 
Slider_delt.value = Text_delt.value;   
 
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;
 
time = 1;
 
         context.clearRect(0, 0, w * scale, h* scale);       
 
         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;
 
time = 1;
 
       context.clearRect(0, 0, w * scale, h* scale);       
 
       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;
 
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_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);       
context_gr2.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;
 
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_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);       
context_gr2.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)  
 
/*this.set_scale1 = function(input)  
 
{
 
{
Строка 271: Строка 293:
 
context_gr.clearRect(0, 0, w * scale, h * scale);
 
context_gr.clearRect(0, 0, w * scale, h * scale);
 
context_gr2.clearRect(0, 0, w * scale, h * scale);  
 
context_gr2.clearRect(0, 0, w * scale, h * scale);  
}*/
+
}*/  
 
 
     // Функция, делающая spf шагов интегрирования
 
     // Функция, делающая spf шагов интегрирования
 
     function physics()
 
     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;
 
E_ = E;
 
 
for (var s = 1; s <= spf; s++)
 
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);
 
//Vprov = Math.max(b.vx, c.vx);
 
//if ((Vprov) > Vmax) Vmax = b.vx;    
 
//if ((Vprov) > Vmax) Vmax = b.vx;    
 
   
 
   
 
 
 
 
}
+
 
   
 
   
 
  time = time + 1;
 
  time = time + 1;
Строка 308: Строка 351:
 
context.moveTo(b.x*scale, b.y*scale);
 
context.moveTo(b.x*scale, b.y*scale);
 
         context.lineTo(wall1.x*scale, wall1.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 );
 
context.moveTo(wall1.x*scale, (wall1.y + a0)*scale );
Строка 317: Строка 357:
 
context.stroke();
 
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';
 
context.fillStyle = 'blue';
Строка 336: Строка 371:
 
{
 
{
 
scale2 = h /5* delt;
 
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'); //оси
 
GraphAxex('black'); //оси
 +
 +
 
 
 
     }
 
     }
Строка 347: Строка 391:
 
function Graph(b, color)
 
function Graph(b, color)
 
     {
 
     {
       
+
        context_gr2.lineWidth = 2;
 
         context_gr.strokeStyle = color;
 
         context_gr.strokeStyle = color;
 
         context_gr.beginPath();
 
         context_gr.beginPath();
Строка 359: Строка 403:
 
function GraphAxex(color)
 
function GraphAxex(color)
 
{
 
{
 +
context_gr2.lineWidth = 2;
 
context_gr.strokeStyle = color;
 
context_gr.strokeStyle = color;
 
         context_gr.beginPath();
 
         context_gr.beginPath();
Строка 374: Строка 419:
 
function Graph1(b, color)
 
function Graph1(b, color)
 
     {
 
     {
          
+
         context_gr2.lineWidth = 2;
 
         context_gr.strokeStyle = color;
 
         context_gr.strokeStyle = color;
 
         context_gr.beginPath();
 
         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.stroke();
 
context_gr.closePath();
 
context_gr.closePath();
Строка 387: Строка 432:
 
function draw_gr2() // Определение функции, рисующей второй график
 
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'); //график для второго шара
 
//GraphVel2(c, 'red'); //график для второго шара
 
GraphAxex2('black'); //оси
 
GraphAxex2('black'); //оси
 
 
 
  
 
  
     }
+
     } */
 +
 +
 
 
 
function GraphVel(b, color)
 
function GraphVel(b, color)
 
     {
 
     {
 
          
 
          
+
context_gr2.lineWidth = 2;
 
         context_gr2.strokeStyle = color;
 
         context_gr2.strokeStyle = color;
 
        
 
        
Строка 416: Строка 477:
 
    function GraphVel2(b, color)
 
    function GraphVel2(b, color)
 
     {
 
     {
          
+
         context_gr2.lineWidth = 2;
 
         context_gr2.strokeStyle = color;
 
         context_gr2.strokeStyle = color;
 
        
 
        
 
context_gr2.beginPath();
 
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.closePath();
 
context_gr2.stroke();
 
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)
 
function GraphAxex2(color)
 
{
 
{
 +
context_gr2.lineWidth = 1;
 
context_gr2.strokeStyle = color;
 
context_gr2.strokeStyle = color;
 
         context_gr2.beginPath();
 
         context_gr2.beginPath();
Строка 450: Строка 530:
 
}
 
}
 
</syntaxhighlight>
 
</syntaxhighlight>
Файл '''"1_1.html"'''
+
Файл '''"1_7.html"'''
 
<syntaxhighlight lang="html5" line start="1" enclose="div">
 
<syntaxhighlight lang="html5" line start="1" enclose="div">
<!DOCTYPE html>
+
<!DOCTYPE html>
 
<html>
 
<html>
 
<head>
 
<head>
 
     <title> 2 </title>
 
     <title> 2 </title>
     <script src="2_1.js"></script>
+
     <script src="2_7.js"></script>
 
</head>
 
</head>
 
<body>
 
<body>
Строка 464: Строка 544:
 
<div>
 
<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>     
 
     </div>     
Строка 473: Строка 551:
 
<div>
 
<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>   
 
     </div>   
Строка 486: Строка 562:
 
             app.set_delt(this.value);
 
             app.set_delt(this.value);
 
document.getElementById('Slider_delt').value = 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;">
 
<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 -->
 
<!-- Масса 1 -->
 
<div>
 
<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;
 
             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>
 
         </I></font>
 
     </div>
 
     </div>
Строка 506: Строка 582:
 
<!-- Жесткость 1-->
 
<!-- Жесткость 1-->
 
<div>
 
<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;
 
             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>
 
         </I></font>
 
     </div>
 
     </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>
 
     <script type="text/javascript"> app = new MainParticle(document.getElementById('canvasBalls'),document.getElementById('canvasGraph'),document.getElementById('canvasGraph1'));</script>
 
</body>
 
</body>
</html>
+
</html>
 
</syntaxhighlight>
 
</syntaxhighlight>
 
</div>
 
</div>

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

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

Рассматривается простейшая колебательная система тело-пружина-конвейер. Пружина крепится к стенке. Грузик на пружинке колеблется посредством постоянной силы 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] - частота колебаний.



Скачать 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>