Редактирование: JavaScript-пружина
Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.
Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы изменения вступили в силу.
Текущая версия | Ваш текст | ||
Строка 1: | Строка 1: | ||
− | # | + | [[ТМ|Кафедра ТМ]] > [[Программирование]] > [[Программирование и моделирование в Интернет|Интернет]] > [[JavaScript-программирование|JavaScript]] > '''Пружина''' <HR> |
+ | |||
+ | Если у вас отображается старая версия программы - нажмите "'''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/> | ||
+ | |||
+ | <htmlet nocache="yes">osc_TM</htmlet> | ||
+ | |||
+ | Текст программы на языке 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) { | ||
+ | |||
+ | // Предварительные установки | ||
+ | |||
+ | 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(); // функция, выполняющаяся на каждом шаге | ||
+ | } | ||
+ | </source> | ||
+ | </toggledisplay> | ||
+ | |||
+ | == См. также == | ||
+ | *[[JavaScript-mechanics]] | ||
+ | *[[JavaScript-mechanics-box2D]] | ||
+ | *[[JavaScript-приложения]] | ||
+ | |||
+ | [[Category: Программирование]] | ||
+ | [[Category: JavaScript]] |