Редактирование: КП: Моделирование пружин
Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.
Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы изменения вступили в силу.
Текущая версия | Ваш текст | ||
Строка 1: | Строка 1: | ||
− | [[ТМ|Кафедра ТМ]] > [[Программирование]] > [[Программирование и моделирование в Интернет|Интернет]] > [[JavaScript-программирование|JavaScript]] > '''Моделирование | + | [[ТМ|Кафедра ТМ]] > [[Программирование]] > [[Программирование и моделирование в Интернет|Интернет]] > [[JavaScript-программирование|JavaScript]] > '''Моделирование пружин''' <HR> |
Если у вас отображается старая версия программы - нажмите "'''Ctrl + F5'''" | Если у вас отображается старая версия программы - нажмите "'''Ctrl + F5'''" | ||
Строка 7: | Строка 7: | ||
Левая клавиша мыши по полю - заморозить систему. | Левая клавиша мыши по полю - заморозить систему. | ||
− | |||
− | |||
{{#css:/htmlets/jquery-ui.css}} | {{#css:/htmlets/jquery-ui.css}} | ||
+ | <addscript src=ocanvas-251/><addscript src=BagdanovSpring1/><addscript src=BagdanovSpring2/><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">BagdanovSpring_TM</htmlet> | ||
− | + | Текст программы на языке JavaScript (разработчики [[Богданов Дмитрий]], [[Кривцов Антон]], использована библиотека [http://ocanvas.org/ oCanvas]): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> | |
− | |||
− | Текст программы на языке JavaScript (разработчики [[Богданов Дмитрий]], использована библиотека [http://ocanvas.org/ oCanvas]): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> | ||
Файл '''"script.js"''' | Файл '''"script.js"''' | ||
− | < | + | <source lang="javascript" first-line="1"> |
− | function MainMech(canvas, slider_m, text_m, slider_Cx, text_Cx, slider_Cy, text_Cy, slider_B, text_B | + | function MainMech(canvas, slider_m, text_m, slider_Cx, text_Cx, slider_Cy, text_Cy, slider_B, text_B) { |
// *** Задание физических параметров *** | // *** Задание физических параметров *** | ||
Строка 72: | Строка 70: | ||
var rw = canvas.width / 30; var rh = canvas.height / 30; | var rw = canvas.width / 30; var rh = canvas.height / 30; | ||
var x0 = 15 * rw ; var y0 = 15 * rh ; | var x0 = 15 * rw ; var y0 = 15 * rh ; | ||
− | |||
− | |||
// создаем пружину | // создаем пружину | ||
Строка 117: | Строка 113: | ||
} | } | ||
− | // создаем | + | // создаем эллипс |
var ellipse = ocanvas.display.ellipse({x: x0, y: y0, radius: 5 * m, fill: "rgba(255, 0, 0, 1)"}).add(); | var ellipse = ocanvas.display.ellipse({x: x0, y: y0, radius: 5 * m, fill: "rgba(255, 0, 0, 1)"}).add(); | ||
− | // захват | + | // захват эллипса мышью |
ellipse.dragAndDrop({ | ellipse.dragAndDrop({ | ||
changeZindex: true, // если много объектов - захваченный будет нарисован спереди | changeZindex: true, // если много объектов - захваченный будет нарисован спереди | ||
start: function () { count = false; trajectory = []; this.fill = "rgba(255, 0, 0, 0.5)"; }, // отключаем расчет и делаем объект полупрозрачным | start: function () { count = false; trajectory = []; this.fill = "rgba(255, 0, 0, 0.5)"; }, // отключаем расчет и делаем объект полупрозрачным | ||
− | move: function () { vx = 0; | + | move: function () { vx = 0; vy = 0; drawSpring();}, // перемещение |
end: function () { count = true; this.fill = "rgba(255, 0, 0, 1)"; } // включаем расчет и убираем полупрозрачность | end: function () { count = true; this.fill = "rgba(255, 0, 0, 1)"; } // включаем расчет и убираем полупрозрачность | ||
}); | }); | ||
Строка 136: | Строка 132: | ||
trajectory = []; | trajectory = []; | ||
}; | }; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
function dynamics(){ // интегрирование по времени | function dynamics(){ // интегрирование по времени | ||
if (!count) return; | if (!count) return; | ||
− | + | for (var s=1; s<=spf; s++) { | |
− | + | var fx = - 2 * Cx * (ellipse.x - x0) - B * vx; | |
− | + | var fy = - 2 * Cy * (ellipse.y - y0) - B * vy; | |
− | + | vx += fx / m * dt; | |
− | + | vy += fy / m * dt; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | ellipse.x += vx * dt; | |
− | + | ellipse.y += vy * dt; | |
− | + | ellipse.radius = 5 * m; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | steps++; | |
// подать данные на график | // подать данные на график | ||
− | + | if (steps % 10 == 0) | |
− | + | { | |
− | + | trajectory.push([ellipse.x-x0, y0-ellipse.y]); | |
− | + | $.plot($('#vGraph'), [trajectory], {}); | |
− | + | } | |
− | + | drawSpring(); | |
− | |||
} | } | ||
− | + | } | |
// Рисуем пружины | // Рисуем пружины | ||
Строка 245: | Строка 197: | ||
ocanvas.setLoop(dynamics).start(); // функция, выполняющаяся на каждом шаге | ocanvas.setLoop(dynamics).start(); // функция, выполняющаяся на каждом шаге | ||
} | } | ||
− | </ | + | </source> |
Файл '''"osc.html"''' | Файл '''"osc.html"''' | ||
− | < | + | <source lang="html" first-line="1"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Строка 255: | Строка 207: | ||
<script src="ocanvas.min.js"></script> | <script src="ocanvas.min.js"></script> | ||
<script src="script.js?<?= time() ?>"></script> | <script src="script.js?<?= time() ?>"></script> | ||
+ | <script src="script1.js?<?= time() ?>"></script> | ||
<script src="jquery-1.6.1.min.js"></script> | <script src="jquery-1.6.1.min.js"></script> | ||
<script src="TM.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="flot/jquery.flot.js"></script> | ||
<script language="javascript" type="text/javascript" src="jquery.flot.axislabels.js"></script> | <script language="javascript" type="text/javascript" src="jquery.flot.axislabels.js"></script> | ||
+ | </div> | ||
</head> | </head> | ||
Строка 271: | Строка 225: | ||
<!--слайдеры--> | <!--слайдеры--> | ||
− | <div style="margin-left:20px; margin-top:20px; margin-bottom:20px;"> | + | <div style="margin-left:20px; margin-top:20px; margin-bottom:20px; float:left;"> |
<div> <input type="range" id="slider_m" style="width: 150px;" oninput="app.setSlider_m(this.value); document.getElementById('text_m').value = this.value;"> | <div> <input type="range" id="slider_m" style="width: 150px;" oninput="app.setSlider_m(this.value); document.getElementById('text_m').value = this.value;"> | ||
m = | m = | ||
Строка 288: | Строка 242: | ||
app.setSlider_Cx(this.value); | app.setSlider_Cx(this.value); | ||
document.getElementById('slider_Cx').value = this.value;"> | document.getElementById('slider_Cx').value = this.value;"> | ||
− | |||
</div> | </div> | ||
<br> | <br> | ||
Строка 298: | Строка 251: | ||
app.setSlider_Cy(this.value); | app.setSlider_Cy(this.value); | ||
document.getElementById('slider_Cy').value = this.value;"> | document.getElementById('slider_Cy').value = this.value;"> | ||
− | |||
</div> | </div> | ||
<br> | <br> | ||
Строка 309: | Строка 261: | ||
document.getElementById('slider_B').value = this.value;"> | document.getElementById('slider_B').value = this.value;"> | ||
</div> | </div> | ||
+ | <script type="text/javascript"> | ||
+ | var r = confirm("Простое движение (\"Ok\")\nСложное движение (\"Отмена\")"); | ||
+ | if (r) {var app = new MainMech( | ||
+ | document.getElementById('canvasMech'), | ||
+ | document.getElementById('slider_m'), | ||
+ | document.getElementById('text_m'), | ||
+ | document.getElementById('slider_Cx'), | ||
+ | document.getElementById('text_Cx'), | ||
+ | document.getElementById('slider_Cy'), | ||
+ | document.getElementById('text_Cy'), | ||
+ | document.getElementById('slider_B'), | ||
+ | document.getElementById('text_B')); | ||
+ | } | ||
+ | else {var app = new MainMech1( | ||
+ | document.getElementById('canvasMech'), | ||
+ | document.getElementById('slider_m'), | ||
+ | document.getElementById('text_m'), | ||
+ | document.getElementById('slider_Cx'), | ||
+ | document.getElementById('text_Cx'), | ||
+ | document.getElementById('slider_Cy'), | ||
+ | document.getElementById('text_Cy'), | ||
+ | document.getElementById('slider_B'), | ||
+ | document.getElementById('text_B')); | ||
+ | }; | ||
+ | </script> | ||
</div> | </div> | ||
− | + | <div style="margin-right:280px; margin-top:20px; margin-bottom:20px; float:right"> | |
− | + | <input type="button" style="width: 100px" name="" onclick="app.clearTrajectory();" value="Очистить"/> | |
− | + | </div> | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | </ | ||
</body> | </body> | ||
</html> | </html> | ||
− | </ | + | </source> |
</toggledisplay> | </toggledisplay> | ||
− | [[Media:Spring.rar|Spring.rar]] - | + | [[Media:Spring.rar|Spring.rar]] - библиотеки для построения графиков и слайдеров |
== См. также == | == См. также == |