JavaScript-пружина

Кафедра ТМ > Программирование > Интернет > JavaScript > Пружина

---

Если у вас отображается старая версия программы - нажмите "Ctrl + F5"

Левая клавиша мыши по грузу - перетаскивание.

Левая клавиша мыши по полю - заморозить систему.

<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/>

Текст программы на языке JavaScript (разработчики Цветков Денис, Кривцов Антон, использована библиотека oCanvas): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> Файл "osc_01.js"

function MainMech(canvas) {

    // Предварительные установки    

    var context = canvas.getContext("2d");

    const Pi = 3.1415926;    	      	// число "пи"	 

    const m0 = 1;    		      	// масштаб массы
    const T0 = 1;    		      	// масштаб времени (период колебаний исходной системы)

    const k0 = 2 * Pi / T0;           	// масштаб частоты
    const C0 = m0 * k0 * k0;          	// масштаб жесткости
    const B0 = 2 * m0 * k0;  	      	// масштаб вязкости

    // *** Задание физических параметров ***

    var m = 1 * m0;                 	// масса
    var C = 1 * C0;                 	// жесткость
    var B = .1 * B0;                 	// вязкость

    // *** Задание вычислительных параметров ***

    const fps = 4 * 29;		      	// frames per second - число кадров в секунду (качечтво отображения)
    const spf = 20;		      	// steps per frame   - число шагов интегрирования между кадрами (edtkbxbdftn скорость расчета)
    const dt  = 0.05 * T0 / fps;    	// шаг интегрирования (качество расчета)
    var steps = 0;                      // количество шагов интегрирования

    // Установка слайдеров значений

    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");


    var count = true;       // проводить ли расчет системы
    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 / 6;
    var x0 = 15 * rw - rw / 2;     	var y0 = 3*rh - rh / 2;

    // создаем пружину
    const coil = 10;        // количество витков
    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 = ocanvas.display.rectangle({
        x: x0,  width: rw,      
	    y: y0,	height: rh,
	    fill: "rgba(0, 0, 255, 1)"    	// цвет
    }).add();

    // захват прямоугольника мышью
    rect.dragAndDrop({
	    changeZindex: true,           	// если много объектов - захваченный будет нарисован спереди
	    start: function ()  { count = false; 	this.fill = "rgba(0, 0, 255, 0.5)"; },  // отключаем расчет и делаем объект полупрозрачным
        move:  function ()  { this.y = y0;     	v = 0;      drawSpring();},				// запрещаем перемещение по вертикали
        end: function ()    { count = true;     this.fill = "rgba(0, 0, 255, 1)"; }     // включаем расчет и убираем полупрозрачность
    });

    ocanvas.bind("mousedown", function () {count = false;});  	// заморозить фигуру при клике на поле

    var vGraph = new TM_graph(                  // определить график
        "#vGraph",                              // на html-элементе #vGraph
        "steps", "v",                           // подписи на осях
        250);                                   // сколько шагов по оси "x" отображается


    function dynamics(){                             		// интегрирование по времени
       	if (!count) return;
       	for (var s=1; s<=spf; s++) {
            var f =  - C * (rect.x - x0) - B * v;
            v += f / m * dt;
                rect.x += v * dt;

            steps++;
            if (steps % 150 == 0) vGraph.graphIter(steps, v);   // подать данные на график
            drawSpring();
	    }
    }

    function drawSpring() {
        for (var i = 0; i < coil; i++ ) {
            lines[i].start.x =  startX + ((rect.x-startX) + rw/2)/coil*i;
            lines[i].end.x =    startX + ((rect.x-startX) + rw/2)/coil*(i+1);
            lines[i].start.y =  y0+rh/2 + ((i%2==0)?1:-1)*30;
            lines[i].end.y =    y0+rh/2 + ((i%2==0)?-1:1)*30;
            if (i==0) lines[i].start.y =  y0+rh/2;
            if (i==(coil-1)) lines[i].end.y =  y0+rh/2;
        }
    }

    ocanvas.setLoop(dynamics).start();             // функция, выполняющаяся на каждом шаге
}

</toggledisplay>

См. также

• JavaScript-mechanics
• JavaScript-mechanics-box2D
• JavaScript-приложения