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

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
Строка 20: Строка 20:
  
 
<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">
Файл '''"Spring.js"'''
+
Файл '''"Balls_v1_release.js"'''
 
<syntaxhighlight lang="javascript" line start="1" enclose="div">
 
<syntaxhighlight lang="javascript" line start="1" enclose="div">
window.addEventListener("load", Main_Spring, true);
+
function MainBalls(canvasBalls, canvasBalls1, canvasBalls2) {
function Main_Spring() {
+
 
+
    // Предварительные установки
     var canvas = spring_canvas;
+
    canvas.onselectstart = function () {return false;};     // запрет выделения canvas
+
     var context = canvasBalls.getContext("2d"); // на context происходит рисование
    var ctx = canvas.getContext("2d");                     // на ctx происходит рисование
+
var context1 = canvasBalls1.getContext("2d"); // на context1 происходит рисование
    var w = canvas.width;                                   // ширина окна в расчетных координатах
+
var context2 = canvasBalls2.getContext("2d"); // на context2 происходит рисование
    var h = canvas.height;                                 // высота окна в расчетных координатах
+
var c1 = 5;
 
+
var Pi = 3.1415926;                   // число "пи"
    var Pi = Math.PI;             // число "пи"
+
     var a0 = 1;                           // масштаб расстояния (диаметр шара)
var g = 9.81;
+
var T0 = 1;                           // масштаб времени (период колебаний исходной системы)
     var m0 = 1;                 // масштаб массы
+
var m0 = 1;                           // масштаб массы
    var T0 = 1;                 // масштаб времени (период колебаний исходной системы)
+
var g0 = a0 / T0 / T0;               // масштаб ускорения (ускорение, при котором за T0 будет пройдено расстояние a0)
 
+
var k0 = 2 * Pi / T0;                 // масштаб частоты
    var k0 = 2 * Pi / T0;           // масштаб частоты
+
var C0 = m0 * k0 * k0;               // масштаб жесткости
    var C0 = 1;         // масштаб жесткости
+
    var D0 = 0.001;           // диаметра
+
var p0 = 1; // давление
 
var E0 = 1e-6;
 
var L = 300;
 
 
     // *** Задание физических параметров ***
 
     // *** Задание физических параметров ***
var E = 2.05e11 * E0; // модуль упругости
+
     var m = 3 * m0;                 // масса
+
var Ny = 5;                           // число шаров, помещающихся по вертикали в окно (задает размер шара относительно размера окна)
    var C = 15 * C0;                 // жесткость
+
     var r = 0.5 * a0;                     // радиус частицы в расчетных координатах
    var Dp = 43.1 * D0;                 // диаметр поршня
+
var m = 1 * m0;                       // масса
var Dsh = 17.3 * D0; // диаметр штока
+
var g = 0.25 * g0;               // ускорение свободного падения
var p = 4 * p0; // давление
+
var c = c1 * C0;                 // жесткость пружины
    slider_m.value = (m / m0).toFixed(1); number_m.value = (m / m0).toFixed(1);
+
var l0 = 6 * a0;                   // длина пружины
    slider_C.value = (C / C0).toFixed(1); number_C.value = (C / C0).toFixed(1);
+
var L = l0 + m * g / c;             // длина пружины под воздействием силы тяжести
    slider_Dp.value = (Dp / D0).toFixed(1); number_Dp.value = (Dp / D0).toFixed(1);
+
var time = 0;
slider_Dsh.value = (Dsh / D0).toFixed(1); number_Dsh.value = (Dsh / D0).toFixed(1);
 
    slider_p.value = (p / p0).toFixed(1); number_p.value = (p / p0).toFixed(1);
 
    slider_L.value = (L).toFixed(1); number_L.value = (L).toFixed(1);
 
  
    // *** Задание вычислительных параметров ***
 
  
     var fps = 100;               // frames per second - число кадров в секунду (качечтво отображения)
+
Text_c.value  = c1;
     var spf = 50;               // steps per frame  - число шагов интегрирования между кадрами (edtkbxbdftn скорость расчета)
+
Text_m.value  = m;
     var dt  = 0.05 * T0 / fps;       // шаг интегрирования (качество расчета)
+
     
    var steps = 0;                      // количество шагов интегрирования
+
    Slider_c.min = 1;                         
 +
    Slider_c.max = 10;
 +
    Slider_c.step = 0.5;
 +
    Slider_c.value = Text_c.value; 
 +
 +
Slider_m.min = 1;                         
 +
    Slider_m.max = 3;
 +
    Slider_m.step = 0.1;
 +
    Slider_m.value = Text_m.value;
 +
 +
// *** Задание вычислительных параметров ***
 +
 +
     var fps = 100;                         // frames per second - число кадров в секунду (качечтво отображения)
 +
     var spf = 100;                       // steps per frame  - число шагов интегрирования между кадрами (скорость расчета)
 +
     var dt  = 0.045 * T0 / fps;           // шаг интегрирования (качество расчета)
  
     function setM(new_m) {m = new_m * m0;}
+
     // Выполнение программы
     function setC(new_C) {C = new_C * C0;}
+
     function setDp(new_Dp) {Dp = new_Dp * D0;}
+
    var scale = canvasBalls.height / Ny / a0; // масштабный коэффициент для перехода от расчетных к экранным координатам
function setP(new_p) {p = new_p * p0;}
+
     var w = canvasBalls.width / scale;           // ширина окна в расчетных координатах
     function setDsh(new_Dsh) {Dsh = new_Dsh * D0;}
+
     var h = canvasBalls.height / scale;         // высота окна в расчетных координатах
function setL(new_L) {L = new_L;}
+
 +
    // Добавление шара
 +
 +
    var b = [];
 +
     b.x = w / 2;            b.y = h * 0.7;   // расчетные координаты шара
 +
b.vx = 0.5;           b.vy = 0.5;    // начальная скорость
 +
  
    slider_m.oninput = function() {number_m.value = slider_m.value;      setM(slider_m.value);};
+
setInterval(control1, 1000 / fps);
    number_m.oninput = function() {slider_m.value = number_m.value;      setM(number_m.value);};
+
    slider_C.oninput = function() {number_C.value = slider_C.value;      setC(slider_C.value);};
+
function control1() {
    number_C.oninput = function() {slider_C.value = number_C.value;      setC(number_C.value);};
+
physics1();
    slider_p.oninput = function() {number_p.value = slider_p.value;      setP(slider_p.value);};
 
    number_p.oninput = function() {slider_p.value = number_p.value;      setP(number_p.value);};
 
slider_Dp.oninput = function() {number_Dp.value = slider_Dp.value;      setDp(slider_Dp.value);};
 
    number_Dp.oninput = function() {slider_Dp.value = number_Dp.value;      setDp(number_Dp.value);};
 
    slider_Dsh.oninput = function() {number_Dsh.value = slider_Dsh.value;      setDsh(slider_Dsh.value);};
 
    number_Dsh.oninput = function() {slider_Dsh.value = number_Dsh.value;      setDsh(number_Dsh.value);};
 
slider_L.oninput = function() {number_L.value = slider_L.value;      setL(slider_L.value);};
 
    number_L.oninput = function() {slider_L.value = number_L.value;      setL(number_L.value);};
 
 
 
    var count = true;      // проводить ли расчет системы
 
    var v = 0; // скорость тела
 
 
 
    var rw = canvas.width / 10;    var rh = canvas.height;
 
    var x0 = canvas.width / 2 - 25;    var y0 = rh/2-25;
 
 
 
    // параметры пружины
 
    var coil = 11;        // количество витков
 
    var startY = h;      // закрепление пружины
 
 
 
    // создаем прямоугольник-грузик
 
    var rect = {
 
        x: x0,  width: 50,
 
        y: y0, height: 50,
 
        fill: "rgba(112, 155, 255, 1)"    // цвет
 
    };
 
 
 
    // захват прямоугольника мышью
 
    var my_;                                    // буфер позиции мыши (для расчета скорости при отпускании шара)
 
    document.onmousedown = function(e) {        // функция при нажатии клавиши мыши
 
        if (Dp <= Dsh)
 
{
 
alert("Диаметр поршня должен быть больше диаметра штока");
 
slider_Dsh.value = (Dp / D0 - 1).toFixed(1);
 
number_Dsh.value = (Dp / D0 - 1).toFixed(1);
 
setDsh(slider_Dsh.value);
 
setDsh(number_Dsh.value);
 
}
 
else {
 
var m = mouseCoords(e);                // получаем расчетные координаты курсора мыши
 
        var x = rect.x;
 
        var xw = rect.x + rect.width;
 
        var y = rect.y;
 
        var yh = rect.y + rect.height;
 
        if (x <= m.x && xw >= m.x  && y <= m.y && yh >= m.y) {
 
            if (e.which == 1) {                        // нажата левая клавиша мыши
 
                rect.xPlus = rect.x - m.x;              // сдвиг курсора относительно грузика по x
 
                rect.yPlus = rect.y - m.y;              // сдвиг курсора относительно грузика по y
 
                my_ = m.y;
 
                count = false;
 
                document.onmousemove = mouseMove;      // пока клавиша нажата - работает функция перемещения
 
            }
 
        }
 
}
 
    };
 
 
 
    document.onmouseup = function(e) {          // функция при отпускании клавиши мыши
 
        document.onmousemove = null;              // когда клавиша отпущена - функции перемещения нету
 
        count = true;
 
    };
 
 
 
    function mouseMove(e) {                    // функция при перемещении мыши, работает только с зажатой ЛКМ
 
        var m = mouseCoords(e);                // получаем расчетные координаты курсора мыши
 
        rect.y = m.y + rect.yPlus;
 
//        v = 6.0 * (m.x - mx_) / dt / fps;    // сохранение инерции
 
        v = 0;
 
        my_ = m.y;
 
    }
 
 
 
    function mouseCoords(e) {                  // функция возвращает расчетные координаты курсора мыши
 
        var m = [];
 
        var rect = canvas.getBoundingClientRect();
 
        m.x = (e.clientX - rect.left);
 
        m.y = (e.clientY - rect.top);
 
        return m;
 
    }
 
 
 
    // график
 
    var vGraph = new New_graph(                  // определить график
 
        "#vGraph",                              // на html-элементе #vGraph
 
        250,                                    // сколько шагов по оси "x" отображается
 
        -1, 1, 0.2);                            // мин. значение оси Y, макс. значение оси Y, шаг по оси Y
 
 
 
    function control() {
 
        calculate();
 
 
         draw();
 
         draw();
        requestAnimationFrame(control);
 
 
     }
 
     }
    control();
 
//    setInterval(control, 1000 / fps);                      // Запуск системы
 
 
 
 +
function physics1() {                    // то, что происходит каждый шаг времени
 +
        for (var s = 1; s <= spf; s++) {
 +
            b.vx += -g / L * (b.x - w/2) * dt;          b.vy += -c / m * (b.y - h * 0.7) * dt;
 +
            b.x += b.vx * dt;                          b.y += b.vy * dt;
 +
        }
 +
    }
 
 
    function calculate() {
+
/* function physics2() {                   // то, что происходит каждый шаг времени
        if (!count) return;
+
         for (var s = 1; s <= spf; s++) {
         for (var s=1; s<=spf; s++) {
+
var Fo = Math.pow(Dp/D0, 2) * Pi * p / 4;
+
            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;        
var Fs = Math.pow(Pi, 3) * E * Math.pow(Dsh/D0, 4) / (64 * L * L * 100);  
+
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;  
document.getElementById('Fo').innerHTML = '<b>F отб. =</b>'+Fo.toFixed(2)+' H';
+
             b.x += b.vx * dt;                           b.y += b.vy * dt;
            document.getElementById('Fs').innerHTML = '<b>F сж. =</b>'+Fs.toFixed(2)+' H';
 
var f;
 
if (v >= 0){
 
f = -C * (rect.y - y0) - Fs * D0 * v;
 
};
 
if (v < 0){
 
f = -C * (rect.y - y0) - Fo * D0 * v;
 
};
 
            v += f / m * dt;
 
             rect.y += v * dt;
 
            steps++;
 
            if (steps % 80 == 0) vGraph.graphIter(steps, -(rect.y-y0)/canvas.height*2);   // подать данные на график
 
 
         }
 
         }
 
 
     }
 
     }
     function draw() {
+
*/
      ctx.clearRect(0, 0, w, h);
+
     this.set_m = function(input)
  ctx.fillStyle = "#4B4747";
+
        {
ctx.fillRect(rect.x-22 , 480, 100, 20 );
+
m = Number(input);  
ctx.fillRect(rect.x + 18, rect.y + 40, 14, 900 )
+
                time = 0;
        ctx.strokeStyle = "#000";
+
b.x = w / 2;           b.y = h * 0.7;  
        ctx.beginPath();
+
            b.vx = 0.5;            b.vy = 0.5;
        for (var i = 0; i <= coil; i++ ) {
+
                 context.clearRect(0, 0, w * scale, h * scale);    
             var x;
+
                 context1.clearRect(0, 0, w * scale, h * scale);    
            var y;
+
                context2.clearRect(0, 0, w * scale, h * scale);
            if (i != coil + 1) {
 
                y = startY + ((rect.y - startY))/coil*i;
 
                 x = canvas.width/2 + ((i%2==0)?-1:1)*15 + (rect.x - x0)/coil*i;
 
            } else {
 
                y = startY + ((rect.y - startY))/coil*(i+1);
 
                 x = canvas.width/2 + ((i%2==0)?1:-1)*15 +  (rect.x - x0)/coil*(i+1);
 
            }
 
if (i==0) x = x0+25;
 
            ctx.lineTo(x, y+5);
 
 
         }
 
         }
        ctx.stroke();
+
        ctx.fillStyle = "#FFFC06";
+
     
         ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+
         this.set_c = function(input)
    }
+
         {
}
 
function New_graph(htmlElement, yArrayLen, minY, maxY, stepY){
 
    this.htmlElement = htmlElement;
 
    this.yArrayLen = yArrayLen;
 
    this.minY = minY;
 
    this.maxY = maxY;
 
    this.stepY = stepY;
 
    this.vArray = [];
 
}
 
New_graph.prototype.graphIter = function(x, y){
 
    this.vArray.push([x, y]);                    // добавляем значение в конец массива
 
    if (this.vArray.length > this.yArrayLen) this.vArray.shift(); // если в массиве больше yArrayLen значений - удаляем первое
 
    var htmlElement1 = this.htmlElement;
 
    var vArray1 = this.vArray;
 
    var minY1 = this.minY;
 
    var maxY1 = this.maxY;
 
    var stepY1 = this.stepY;
 
    $(function() {
 
         var options = {
 
            yaxis: {
 
                min: minY1,
 
                max: maxY1,
 
                tickSize: stepY1
 
            }
 
        };
 
        $.plot(htmlElement1, [vArray1], options);  // рисуем график на элементе "vGraph"
 
    });
 
};
 
  
New_graph.prototype.graph = function(data){
+
                c1 = Number(input)
    this.vArray = data;
+
                time = 0;
    var htmlElement1 = this.htmlElement;
+
                b.x = w / 2;            b.y = h * 0.7;  
    var vArray1 = this.vArray;
+
            b.vx = 0.5;             b.vy = 0.5;  
    var minY1 = this.minY;
+
context.clearRect(0, 0, w * scale, h* scale);     
    var maxY1 = this.maxY;
+
                 context1.clearRect(0, 0, w * scale, h * scale);     
    var stepY1 = this.stepY;
+
                 context2.clearRect(0, 0, w * scale, h * scale);  
    $(function() {
+
        }
        var options = {
 
            yaxis: {
 
                 min: minY1,
 
                max: maxY1,
 
                 tickSize: stepY1
 
            }
 
        };
 
        $.plot(htmlElement1, [vArray1], options);  // рисуем график на элементе "vGraph"
 
    });
 
};
 
  
 
+
function draw() {
 
+
context.fillStyle = "#ff0000";
function New(){}
+
        context.clearRect(0, 0, w * scale, h * scale);      // очистить экран
New.prototype.addSlider = function(htmlSliderElement, htmlValueElement, minVal, maxVal, stepVal, startVal, setFunc){
+
        context.beginPath();
    $(function() {
+
         conte xt.arc(b.x * scale, b.y * scale, r * scale / 3, 0, 2 * Math.PI, false);                  //рисуем шар
         $( htmlSliderElement ).slider({                              // слайдер на div - элемент "slider_m"
+
        context.fill();
            value:startVal, min: minVal, max: maxVal, step: stepVal,
+
        context.closePath();
            slide: function( event, ui ) {                      // работает во время движения слайдера
+
context.lineWidth="6";
                $( htmlValueElement ).text( ui.value.toFixed(2) );   // присваивает значение текстовому полю "value_m"
+
context.strokeStyle="#990099";
                setFunc(ui.value);
+
context.beginPath();                                                                         //рисуем пружину
            }
+
context.moveTo(w/ 2 * scale, 0);
        });
+
context.lineTo(b.x * scale, b.y * scale);
    });
+
context.stroke();
};
+
New.prototype.addInputSlider = function(htmlSliderElement, htmlValueElement, minVal, maxVal, stepVal, startVal, setFunc, pressFunc){
+
context1.strokeStyle = "red";                                                             //рисуем график 1
    window[pressFunc] = function(event){
+
        context1.beginPath();
        var regExpPattern = /[0-9]+[.]?[0-9]+/;
+
        context1.moveTo(time * Math.sqrt(c / m) / 20 * scale, (b.x -   h / 6) * scale);
         var inputVal = document.getElementById(htmlValueElement.substr(1)).value;
+
         context1.lineTo((time + dt) * Math.sqrt(c / m) / 20 * scale, (b.x - h / 6) * scale);
         if (regExpPattern.test(inputVal.toString()) && inputVal != 0){setFunc(inputVal);}
+
         context1.stroke();
    };
+
 
+
context1.strokeStyle="#000000";                                                            //рисуем систему координат на 1 графике
    $(function() {
+
context1.beginPath();
         $( htmlSliderElement ).slider({
+
        context1.moveTo(0, h / 2 * scale);
            value:startVal, min: minVal, max: maxVal, step: stepVal,
+
        context1.lineTo(w * scale, h / 2 * scale);
            slide: function( event, ui ) {
+
        context1.stroke();
                $( htmlValueElement ).val( ui.value.toFixed(2) );
+
context1.strokeStyle="#000000";
                setFunc(ui.value);
+
context1.beginPath();
            }
+
        context1.moveTo(w / 2 * scale , 0);
         });
+
         context1.lineTo(w / 2 * scale, h * scale);
         $( htmlValueElement ).val($( htmlSliderElement ).slider( "value" ).toFixed(2) );
+
        context1.stroke();
    });
+
};
+
context2.strokeStyle = "#3070d0";                                                            //рисуем график 2
 +
context2.beginPath();
 +
        context2.moveTo(time * Math.sqrt(c / m) * scale, (b.y - h / 5) * scale);
 +
        context2.lineTo((time + dt) * Math.sqrt(c / m) * scale, (b.y - h / 5) * scale);
 +
        context2.stroke();
 +
 +
context2.strokeStyle="#000000";                                                            //рисуем систему координат на графике 2
 +
context2.beginPath();
 +
         context2.moveTo(0, h / 2 * scale);
 +
         context2.lineTo(w * scale, h / 2 * scale);
 +
        context2.stroke();
 +
context2.strokeStyle="#000000";
 +
context2.beginPath();
 +
        context2.moveTo(w / 2 * scale , 0);
 +
        context2.lineTo(w / 2 * scale, h * scale);
 +
        context2.stroke();
 +
 +
time += dt; 
 +
}
 +
   
 +
}
 
</syntaxhighlight>
 
</syntaxhighlight>
Файл '''"index.html"'''
+
Файл '''"new1.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>
     <meta charset="UTF-8" />
+
     <meta charset="UTF-8"/>
     <title>Амортизатор</title>
+
     <title> Balls </title>
     <script src="Spring.js"></script>
+
     <script src="Balls_v1_release.js"></script>
    <script src="jquery.min.js"></script>
 
    <script src="jquery.flot.js"></script>
 
 
</head>
 
</head>
 
<body>
 
<body>
<table>
+
     <canvas id="canvasBalls" width="800" height="600" style="border:1px solid #000000;"></canvas>
<tr>
+
        <div>
     <td><canvas id="spring_canvas" width="300" height="500" style="border:1px solid #000000;"></canvas></td>
+
        <!-- Масса-->
    <td><div id="vGraph" style="width:600px; height:300px; clear:both;"></div></td>
+
        <div>
</tr>
+
            m =
<tr>   
+
        <input id="Text_m" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
<td><input type="range" id="slider_m" min="0.1" max="10" step=0.1 style="width: 120px;" />
+
          if (!this.checkValidity()) return;
    M = <input type="number" id="number_m" min="0.1" max="10" step=0.1 style="width: 40px;" /><br>
+
          app.set_m(this.value);
    <input type="range" id="slider_C" min="0" max="50" step=0.1 style="width: 120px;" />  
+
          document.getElementById('Slider_m').value = this.value;
     C = <input type="number" id="number_C" min="0" max="50" step=0.1 style="width: 40px;" /> *10^5 H/м<br>
+
      ">
    <input type="range" id="slider_Dp" min="0" max="100" step=0.1 style="width: 120px;" />
+
                <input type = "range" id="Slider_m" style="width: 100px;" oninput="app.set_m(this.value); document.getElementById('Text_m').value = this.value;">
    dпор. = <input type="number" id="number_Dp" min="0" max="100" step=0.1 style="width: 40px;" /> мм<br>
+
        </I></font>
<input type="range" id="slider_Dsh" min="0" max="100" step=0.1 style="width: 120px;" />
+
     </div>
    dшт. = <input type="number" id="number_Dsh" min="0" max="98" step=0.1 style="width: 40px;" /> мм<br>
+
      <!-- Жесткость-->
<input type="range" id="slider_L" min="50" max="500" step=1 style="width: 120px;" />
+
        <div>
     L = <input type="number" id="number_L" min="50" max="500" step=1 style="width: 40px;" /> мм<br>
+
            c =
<input type="range" id="slider_p" min="0" max="10" step=0.1 style="width: 120px;" />
+
        <input id="Text_c" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
     p = <input type="number" id="number_p" min="0" max="10" step=0.1 style="width: 40px;" /> МПа<br><br></td>
+
          if (!this.checkValidity()) return;
<td>
+
          app.set_c(this.value);
<div id = "Fo"> </div>
+
          document.getElementById('Slider_c').value = this.value;
<div id = "Fs"> </div>
+
      ">
<div id = "info"> где:M - масса, C - коэффициент упругости <br>dпор - диаметр поршня, dшт - диаметр штока<br>L - длина штока, p - давление в амортизаторе<br>F отб - сила на ходе отбоя<br>F сж - сила на ходе сжатия
+
                <input type = "range" id="Slider_c" style="width: 100px;" oninput="app.set_c(this.value); document.getElementById('Text_c').value = this.value;">
</td>
+
        </I></font>
</tr>
+
    </div>
 +
        <b>Зависимость координаты х от k1*t:</b>
 +
     </div>   
 +
        <canvas id="canvasBalls1" width="800" height="600" style="border:1px solid #000000;"></canvas>
 +
        <div>
 +
        <b>Зависимость координаты y от k1*t:</b>
 +
     </div>   
 +
        <canvas id="canvasBalls2" width="800" height="600" style="border:1px solid #000000;"></canvas>  
 +
        <script type="text/javascript"> app = new MainBalls(document.getElementById('canvasBalls'),document.getElementById('canvasBalls1'),document.getElementById('canvasBalls2'));</script>    
 
</body>
 
</body>
 
</html>
 
</html>

Версия 12:21, 27 мая 2015

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

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

Тяжелая материальная точка массы [math]m[/math] подвешена на невесомой пружине жесткости [math]с[/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]


Колебания выглядят так:

Скачать Shock_absorbers.zip.

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

Файл "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             c =
25         <input id="Text_c" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
26            if (!this.checkValidity()) return;
27            app.set_c(this.value);
28            document.getElementById('Slider_c').value = this.value;
29        ">
30                 <input type = "range"  id="Slider_c" style="width: 100px;" oninput="app.set_c(this.value); document.getElementById('Text_c').value = this.value;">
31         </I></font>
32     </div>
33         <b>Зависимость координаты х от k1*t:</b>
34     </div>    
35         <canvas id="canvasBalls1" width="800" height="600" style="border:1px solid #000000;"></canvas>  
36         <div>
37          <b>Зависимость координаты y от k1*t:</b>
38     </div>    
39         <canvas id="canvasBalls2" width="800" height="600" style="border:1px solid #000000;"></canvas> 
40         <script type="text/javascript"> app = new MainBalls(document.getElementById('canvasBalls'),document.getElementById('canvasBalls1'),document.getElementById('canvasBalls2'));</script>     
41 </body>
42 </html>