Редактирование: Интерактивная модель простейшей колебательной системы

Перейти к: навигация, поиск

Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.

Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы изменения вступили в силу.
Текущая версия Ваш текст
Строка 1: Строка 1:
−
[[en:Interactive harmonic oscillator model]]
 
 
[[Виртуальная лаборатория]] > [[Интерактивная модель простейшей колебательной системы]] <HR>
 
[[Виртуальная лаборатория]] > [[Интерактивная модель простейшей колебательной системы]] <HR>
  
 
Левая клавиша мыши по грузу - перетаскивание.
 
Левая клавиша мыши по грузу - перетаскивание.
  
−
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Tcvetkov/Spring/Spring_v2-1_release/Spring.html |width=645 |height=565 |border=0 }}
+
Левая клавиша мыши по полю - заморозить систему.
 +
{{#css:/htmlets/jquery-ui.css}}
 +
<addscript src=ocanvas-251/><addscript src=osc_01/><addscript src=jquery_min_new/><addscript src=jquery-ui_min/>
 +
<addscript src=TM/><addscript src=jquery_flot/><addscript src=jquery_flot_axislabels/><htmlet nocache="yes">osc_TM</htmlet>
  
−
Скачать [[Медиа:Spring_v2-1_release.zip|Spring_v2-1_release.zip]].
+
Текст программы на языке JavaScript (разработчики [[Цветков Денис]], [[Кривцов Антон]], использована библиотека [http://ocanvas.org/ oCanvas]): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default">
 +
Файл '''"osc_01.js"'''
 +
<source lang="javascript" first-line="1">
 +
function MainMech(canvas) {
  
−
<div class="mw-collapsible mw-collapsed" style="width:100%" >
+
    // Предварительные установки   
−
'''Текст программы на языке JavaScript (разработчики [[Цветков Денис]], [[Кривцов Антон]], использована библиотека для построения графиков [http://www.flotcharts.org/ Flot]):''' <div class="mw-collapsible-content">
 
−
Файл '''"Spring.js"'''
 
−
<syntaxhighlight lang="javascript" line start="1" enclose="div">
 
−
window.addEventListener("load", Main_Spring, true);
 
−
function Main_Spring() {
 
  
−
     var canvas = spring_canvas;
+
     var context = canvas.getContext("2d");
−
    canvas.onselectstart = function () {return false;};    // запрет выделения canvas
 
−
    var ctx = canvas.getContext("2d");                     // на ctx происходит рисование
 
−
    var w = canvas.width;                                  // ширина окна в расчетных координатах
 
−
    var h = canvas.height;                                  // высота окна в расчетных координатах
 
  
−
     var Pi = 3.1415926;             // число "пи"
+
     const Pi = 3.1415926;         // число "пи"
  
−
     var m0 = 1;                 // масштаб массы
+
     const m0 = 1;         // масштаб массы
−
     var T0 = 1;                 // масштаб времени (период колебаний исходной системы)
+
     const T0 = 1;         // масштаб времени (период колебаний исходной системы)
  
−
     var k0 = 2 * Pi / T0;          // масштаб частоты
+
     const k0 = 2 * Pi / T0;          // масштаб частоты
−
     var C0 = m0 * k0 * k0;          // масштаб жесткости
+
     const C0 = m0 * k0 * k0;          // масштаб жесткости
−
     var B0 = 2 * m0 * k0;           // масштаб вязкости
+
     const B0 = 2 * m0 * k0;       // масштаб вязкости
  
 
     // *** Задание физических параметров ***
 
     // *** Задание физических параметров ***
Строка 35: Строка 31:
 
     var C = 1 * C0;                // жесткость
 
     var C = 1 * C0;                // жесткость
 
     var B = .1 * B0;                // вязкость
 
     var B = .1 * B0;                // вязкость
−
    slider_m.value = (m / m0).toFixed(1); number_m.value = (m / m0).toFixed(1);
 
−
    slider_C.value = (C / C0).toFixed(1); number_C.value = (C / C0).toFixed(1);
 
−
    slider_B.value = (B / B0).toFixed(1); number_B.value = (B / B0).toFixed(1);
 
  
 
     // *** Задание вычислительных параметров ***
 
     // *** Задание вычислительных параметров ***
  
−
     var fps = 60;               // frames per second - число кадров в секунду (качечтво отображения)
+
     const fps = 50;       // frames per second - число кадров в секунду (качечтво отображения)
−
     var spf = 10;               // steps per frame  - число шагов интегрирования между кадрами (edtkbxbdftn скорость расчета)
+
//    const fps = 4 * 29;       // frames per second - число кадров в секунду (качечтво отображения)
−
     var dt  = 0.05 * T0 / fps;       // шаг интегрирования (качество расчета)
+
     const spf = 20;       // steps per frame  - число шагов интегрирования между кадрами (edtkbxbdftn скорость расчета)
 +
     const dt  = 0.05 * T0 / fps;   // шаг интегрирования (качество расчета)
 
     var steps = 0;                      // количество шагов интегрирования
 
     var steps = 0;                      // количество шагов интегрирования
  
−
     function setM(new_m) {m = new_m * m0;}
+
     // Установка слайдеров значений
−
     function setC(new_C) {C = new_C * C0;}
+
 
−
     function setB(new_B) {B = new_B * B0;}
+
    var TM_obj = new TM();              // экземпляр библиотеки для добавления слайдеров
 +
 
 +
    // функции, запускающиеся при перемещении слайдера
 +
    this.setM = function(new_m){m = new_m * m0;};          // new_m - значение на слайдере
 +
     this.setC = function(new_C){C = new_C * C0;};
 +
     this.setB = function(new_B){B = new_B * B0;};
 +
 
 +
    TM_obj.addInputSlider(
 +
        "#input_slider_m", "#input_m",      // html-элементы слайдера и поля ввода
 +
        0.01, 10, 0.01, 1,                  // мин. значение; макс. значение; шаг; начальное значение
 +
        this.setM,                          // ссылка на функцию для слайдера (см. выше)
 +
        "onMPress");                        // название функции в html-элементе <input onKeyUp="...">
 +
    TM_obj.addInputSlider("#input_slider_C", "#input_C", 0, 10, 0.01, 1, this.setC, "onCPress");
 +
    TM_obj.addInputSlider("#input_slider_B", "#input_B", 0, 10, 0.01, 0.1, this.setB, "onBPress");
  
−
    slider_m.oninput = function() {number_m.value = slider_m.value;      setM(slider_m.value);};
 
−
    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);};
 
−
    number_C.oninput = function() {slider_C.value = number_C.value;      setC(number_C.value);};
 
−
    slider_B.oninput = function() {number_B.value = slider_B.value;      setB(slider_B.value);};
 
−
    number_B.oninput = function() {slider_B.value = number_B.value;      setB(number_B.value);};
 
  
 
     var count = true;      // проводить ли расчет системы
 
     var count = true;      // проводить ли расчет системы
 
     var v = 0; // скорость тела
 
     var v = 0; // скорость тела
 +
 +
    // создаем объект, связанный с элементом canvas на html странице
 +
    var ocanvas = oCanvas.create({
 +
        canvas: "#canvasMech",        // canvasMech - id объекта canvas на html странице
 +
        fps: fps                      // сколько кадров в секунду
 +
    });
  
 
     var rw = canvas.width / 30;    var rh = canvas.height / 1.5;
 
     var rw = canvas.width / 30;    var rh = canvas.height / 1.5;
−
     var x0 = 15 * rw - rw / 2;    var y0 = rh / 1.33 - rh / 2;
+
     var x0 = 15 * rw - rw / 2;    var y0 = rh/1.33 - rh / 2;
  
−
     // параметры пружины
+
     // создаем пружину
−
     var coil = 10;        // количество витков
+
     const coil = 10;        // количество витков
−
     var startX = 0;      // закрепление пружины
+
     const startX = 0;      // закрепление пружины
 +
    var lines = [];        // этот массив будет содержать ссылки на линии
 +
    for (var i = 0; i < coil; i++ ) {
 +
        lines[i] = ocanvas.display.line({
 +
            start: { x: startX, y: y0+rh/2 },
 +
            end: { x: startX, y: y0+rh/2 },
 +
            stroke: "1px #0aa"
 +
        }).add();
 +
    }
  
−
     // создаем прямоугольник-грузик
+
     // создаем прямоугольник
−
     var rect = {
+
     var rect = ocanvas.display.rectangle({
−
         x: x0,  width: rw,
+
         x: x0,  width: rw,    
−
        y: y0, height: rh,
+
    y: y0, height: rh,
−
        fill: "rgba(0, 0, 255, 1)"    // цвет
+
    fill: "rgba(0, 0, 255, 1)"    // цвет
−
     };
+
     }).add();
  
 
     // захват прямоугольника мышью
 
     // захват прямоугольника мышью
−
     var mx_;                                    // буфер позиции мыши (для расчета скорости при отпускании шара)
+
     rect.dragAndDrop({
−
    document.onmousedown = function(e) {       // функция при нажатии клавиши мыши
+
    changeZindex: true,          // если много объектов - захваченный будет нарисован спереди
−
        var m = mouseCoords(e);                // получаем расчетные координаты курсора мыши
+
    start: function () { count = false; this.fill = "rgba(0, 0, 255, 0.5)"; },  // отключаем расчет и делаем объект полупрозрачным
−
 
+
         move:  function () { this.y = y0;     v = 0;     drawSpring();}, // запрещаем перемещение по вертикали
−
        var x = rect.x;
+
         end: function ()   { count = true;    this.fill = "rgba(0, 0, 255, 1)"; }     // включаем расчет и убираем полупрозрачность
−
        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
 
−
                mx_ = m.x;
 
−
                count = false;
 
−
                document.onmousemove = mouseMove;       // пока клавиша нажата - работает функция перемещения
 
−
            }
 
−
         }
 
−
    };
 
−
 
 
−
    document.onmouseup = function(e) {         // функция при отпускании клавиши мыши
 
−
        document.onmousemove = null;              // когда клавиша отпущена - функции перемещения нету
 
−
        count = true;
 
−
     };
 
−
 
 
−
    function mouseMove(e) {                    // функция при перемещении мыши, работает только с зажатой ЛКМ
 
−
        var m = mouseCoords(e);                // получаем расчетные координаты курсора мыши
 
−
        rect.x = m.x + rect.xPlus;
 
−
//        v = 6.0 * (m.x - mx_) / dt / fps;    // сохранение инерции
 
−
        v = 0;
 
−
        mx_ = m.x;
 
−
     }
 
  
−
     function mouseCoords(e) {                   // функция возвращает расчетные координаты курсора мыши
+
     ocanvas.bind("mousedown", function () {count = false;}); // заморозить фигуру при клике на поле
−
        var m = [];
 
−
        var rect = canvas.getBoundingClientRect();
 
−
        m.x = (e.clientX - rect.left);
 
−
        m.y = (e.clientY - rect.top);
 
−
        return m;
 
−
    }
 
  
−
    // график
 
 
     var vGraph = new TM_graph(                  // определить график
 
     var vGraph = new TM_graph(                  // определить график
 
         "#vGraph",                              // на html-элементе #vGraph
 
         "#vGraph",                              // на html-элементе #vGraph
 +
        "steps", "x",                          // подписи на осях
 
         250,                                    // сколько шагов по оси "x" отображается
 
         250,                                    // сколько шагов по оси "x" отображается
 
         -1, 1, 0.2);                            // мин. значение оси Y, макс. значение оси Y, шаг по оси Y
 
         -1, 1, 0.2);                            // мин. значение оси Y, макс. значение оси Y, шаг по оси Y
  
−
    function control() {
 
−
        calculate();
 
−
        draw();
 
−
        requestAnimationFrame(control);
 
−
    }
 
−
    control();
 
−
//    setInterval(control, 1000 / fps);                      // Запуск системы
 
  
−
     function calculate() {
+
     function dynamics(){                             // интегрирование по времени
−
        if (!count) return;
+
      if (!count) return;
−
        for (var s=1; s<=spf; s++) {
+
      for (var s=1; s<=spf; s++) {
 
             var f =  - C * (rect.x - x0) - B * v;
 
             var f =  - C * (rect.x - x0) - B * v;
 
             v += f / m * dt;
 
             v += f / m * dt;
−
            rect.x += v * dt;
+
                rect.x += v * dt;
  
 
             steps++;
 
             steps++;
 
             if (steps % 80 == 0) vGraph.graphIter(steps, (rect.x-x0)/canvas.width*2);  // подать данные на график
 
             if (steps % 80 == 0) vGraph.graphIter(steps, (rect.x-x0)/canvas.width*2);  // подать данные на график
−
        }
+
            drawSpring();
−
 
+
    }
 
     }
 
     }
  
−
     function draw() {
+
     function drawSpring() {
−
        ctx.clearRect(0, 0, w, h);
+
         for (var i = 0; i < coil; i++ ) {
−
 
+
             lines[i].start.x = startX + ((rect.x-startX) + rw/2)/coil*i;
−
        ctx.strokeStyle = "#0aa";
+
            lines[i].end.x =    startX + ((rect.x-startX) + rw/2)/coil*(i+1);
−
        ctx.beginPath();
+
            lines[i].start.y = y0+rh/2 + ((i%2==0)?1:-1)*30;
−
        ctx.moveTo(0, y0+rh/2);
+
             lines[i].end.y =   y0+rh/2 + ((i%2==0)?-1:1)*30;
−
         for (var i = 1; i <= coil + 1; i++ ) {
+
            if (i==0) lines[i].start.y = y0+rh/2;
−
             var x;
+
             if (i==(coil-1)) lines[i].end.y =  y0+rh/2;
−
            var y;
 
−
            if (i != coil + 1) {
 
−
                x = startX + ((rect.x - startX))/coil*i - ((rect.x - startX))/coil/2;
 
−
                y = y0+rh/2 + ((i%2==0)?1:-1)*30;
 
−
             } else {
 
−
                x = startX + ((rect.x - startX))/coil*i - ((rect.x - startX))/coil;
 
−
                y = y0+rh/2;
 
−
             }
 
−
 
 
−
            ctx.lineTo(x, y);
 
 
         }
 
         }
−
        ctx.stroke();
+
    }
  
−
        ctx.fillStyle = "#0000ff";
+
    ocanvas.setLoop(dynamics).start();             // функция, выполняющаяся на каждом шаге
−
        ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
 
−
    }
 
 
}
 
}
−
</syntaxhighlight>
+
</source>
−
Файл '''"Spring.html"'''
+
Файл '''"osc.html"'''
−
<syntaxhighlight lang="html5" line start="1" enclose="div">
+
<source lang="html" first-line="1">
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html>
 
<html>
 
<head>
 
<head>
−
     <meta charset="UTF-8" />
+
     <title>Simple Mechanics</title>
−
     <title>Пружина</title>
+
     <script src="ocanvas.min.js"></script>
−
     <script src="Spring.js"></script>
+
     <script src="osc_01.js"></script>
 
     <script src="jquery.min.js"></script>
 
     <script src="jquery.min.js"></script>
−
     <script src="jquery.flot.js"></script>
+
    <link rel="stylesheet" href="jquery-ui.css" />
−
     <script src="TM_v2-1.js"></script>
+
     <script src="jquery-ui.min.js"></script>
 +
    <script src="TM.js"></script>
 +
 
 +
    <script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script>
 +
     <script language="javascript" type="text/javascript" src="jquery.flot.axislabels.js"></script>
 
</head>
 
</head>
 
<body>
 
<body>
−
     <canvas id="spring_canvas" width="600" height="100" style="border:1px solid #000000;"></canvas><br>
+
     <div style="float:left;">
−
     <input type="range" id="slider_m" min="0.01" max="10" step=0.01 style="width: 150px;" />
+
        <canvas id="canvasMech" width="600" height="100" style="border:1px solid #000000; float: left;"></canvas>
−
    m = <input type="number" id="number_m" min="0.01" max="10" step=0.01 style="width: 50px;" /><br>
+
        <script type="text/javascript">MainMech(document.getElementById('canvasMech'));</script>
−
    <input type="range" id="slider_C" min="0" max="10" step=0.01 style="width: 150px;" />
+
    </div>
−
    C = <input type="number" id="number_C" min="0" max="10" step=0.01 style="width: 50px;" /><br>
+
 
−
    <input type="range" id="slider_B" min="0" max="10" step=0.01 style="width: 150px;" />
+
    <!--слайдеры-->
−
    B = <input type="number" id="number_B" min="0" max="10" step=0.01 style="width: 50px;" /><br><br>
+
     <div  style="margin-left:20px; margin-top:20px; margin-bottom:20px; float:left;">
 +
        <div id="input_slider_m" style="width:300px; float:left"></div>
 +
        <label for="input_m" style="margin-left:20px; float:left">m = </label>
 +
        <input onKeyUp="onMPress(event);" type="text" id="input_m" style="margin-left:20px; float:left; border:1; color:#f6931f; font-weight:bold;">
 +
    <br><br>
 +
        <div id="input_slider_C" style="width:300px; float:left"></div>
 +
        <label for="input_C" style="margin-left:20px; float:left">C = </label>
 +
        <input onKeyUp="onCPress(event);" type="text" id="input_C" style="margin-left:20px; float:left; border:1; color:#f6931f; font-weight:bold;">
 +
    <br><br>
 +
        <div id="input_slider_B" style="width:300px; float:left"></div>
 +
        <label for="input_B" style="margin-left:20px; float:left">B = </label>
 +
        <input onKeyUp="onBPress(event);" type="text" id="input_B" style="margin-left:20px; float:left; border:1; color:#f6931f; font-weight:bold;">
 +
    <br><br>
 +
 
 +
    </div>
 +
 
 +
    <!--график-->
 +
    <div id="vGraph" style="width:600px; height:300px; clear:both;"></div>
  
−
    <table>
 
−
        <tr><td>x</td>
 
−
            <td><div id="vGraph" style="width:600px; height:300px; clear:both;"></div></td>
 
−
        </tr>
 
−
        <tr><td></td><td style="text-align: center">steps</td></tr>
 
−
    </table>
 
 
</body>
 
</body>
 
</html>
 
</html>
−
</syntaxhighlight>
+
</source>
−
</div>
+
</toggledisplay>
−
</div>
+
 
 +
[[Media:LIB.zip|LIB.zip]] - библиотеки для построения графиков и слайдеров
  
 
== Предлагаемые направления развития стенда ==
 
== Предлагаемые направления развития стенда ==
Вам запрещено изменять защиту статьи.
Связанное содержимое ↓
Edit Создать редактором
Шаблоны быстрого доступа

Обратите внимание, что все добавления и изменения текста статьи рассматриваются как выпущенные на условиях лицензии Public Domain (см. Department of Theoretical and Applied Mechanics:Авторские права). Если вы не хотите, чтобы ваши тексты свободно распространялись и редактировались любым желающим, не помещайте их сюда.
Вы также подтверждаете, что являетесь автором вносимых дополнений или скопировали их из источника, допускающего свободное распространение и изменение своего содержимого.
НЕ РАЗМЕЩАЙТЕ БЕЗ РАЗРЕШЕНИЯ МАТЕРИАЛЫ, ОХРАНЯЕМЫЕ АВТОРСКИМ ПРАВОМ!

To protect the wiki against automated edit spam, we kindly ask you to solve the following CAPTCHA:

Отменить | Справка по редактированию  (в новом окне)
Источник — «http://tm.spbstu.ru/Интерактивная_модель_простейшей_колебательной_системы»