Интерактивная модель простейшей автоколебательной системы с пружиной — различия между версиями
Материал из Department of Theoretical and Applied Mechanics
(не показано 8 промежуточных версий 3 участников) | |||
Строка 1: | Строка 1: | ||
[[Виртуальная лаборатория]] > [[Простейшая колебательная система с двумя степенями свободы]] <HR> | [[Виртуальная лаборатория]] > [[Простейшая колебательная система с двумя степенями свободы]] <HR> | ||
− | Рассматривается простейшая колебательная система тело-пружина. Пружина крепится на | + | Рассматривается простейшая колебательная система тело-пружина-конвейер. Пружина крепится к стенке. Грузик на пружинке колеблется посредством постоянной силы F, с которой тянет конвейер. |
+ | Запишем уравнения движения системы : | ||
+ | ::<math> | ||
+ | m \ddot{x} = - c x + F(V - \dot{x} ) </math> , где <math>m</math> - масса грузика, <math>c</math> - жесткость пружины,<math>V</math> - скорость конвейера, <math>\dot{x}</math> - изменение скорости тела | ||
+ | |||
+ | Делаем замену переменных. <math>z = x - xo</math>, где <math>xo</math> - начальная координата тела. Затем раскладываем силу в ряд Тейлора, получаем новое уравнение : | ||
+ | <math> | ||
+ | m \ddot{z} + F'(V) \dot{z} - 0.5*F''(V - \dot{z}) + 1/6*F'''(V - \dot{z}) + c z = 0 </math> | ||
+ | |||
+ | Переобозначим переменные. Пусть : | ||
+ | <math> b1 = F'(V)/m \\ | ||
+ | b2 = F''(V)/2m \\ | ||
+ | b3 = F'''(V)/6m </math> | ||
+ | |||
+ | Получим новое уравнение : | ||
+ | <math> | ||
+ | \ddot{z} + ko^2 z = b1 \dot{z} - b3 \dot{z}^3 </math> , где <math> ko = c/m </math> - частота колебаний. | ||
+ | |||
+ | |||
− | + | {{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/BondarevS/SeregaTrouble/1_7.html |width=860 |height=1800 |border=0 }} | |
− | |||
− | |||
− | |||
− | {{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/BondarevS/ | ||
− | Скачать [[Медиа: | + | Скачать [[Медиа:SeregaTrouble.rar|SeregaTrouble.rar]]. |
<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"> | ||
− | Файл '''" | + | Файл '''"2_7.js"''' |
<syntaxhighlight lang="javascript" line start="1" enclose="div"> | <syntaxhighlight lang="javascript" line start="1" enclose="div"> | ||
Строка 27: | Строка 41: | ||
const m0 = 1; // масштаб массы | const m0 = 1; // масштаб массы | ||
const T0 = 1; // масштаб времени (период колебаний исходной системы) | const T0 = 1; // масштаб времени (период колебаний исходной системы) | ||
− | const a0 = 1; | + | const a0 = 1; // масштаб расстояния (диаметр шара) |
+ | const mu = 0.4; // коэф. трения | ||
+ | |||
const g0 = a0 / T0 / T0; // масштаб ускорения (ускорение, при котором за T0 будет пройдено расстояние a0) | const g0 = a0 / T0 / T0; // масштаб ускорения (ускорение, при котором за T0 будет пройдено расстояние a0) | ||
Строка 33: | Строка 49: | ||
const C0 = m0 * k0 * k0; // масштаб жесткости | const C0 = m0 * k0 * k0; // масштаб жесткости | ||
var scale1 = 0.2; | var scale1 = 0.2; | ||
− | var scale2 = 0.2; | + | /* var scale2 = 0.2; */ |
− | |||
− | |||
// *** Задание физических параметров *** | // *** Задание физических параметров *** | ||
var xShift= 0; | var xShift= 0; | ||
Строка 41: | Строка 55: | ||
const Nx = 15; // число шаров, помещающихся по вертикали в окно (задает размер шара относительно размера окна) | const Nx = 15; // число шаров, помещающихся по вертикали в окно (задает размер шара относительно размера окна) | ||
const l1 = 15*a0; // длина первой пружины | const l1 = 15*a0; // длина первой пружины | ||
− | const l2 = 5*a0; | + | const lmax = 2*l1; // максимальное растяжение первой пружины |
− | var | + | /* const l2 = 5*a0; */ // длина второй пружины |
− | var m2 = 10 * m0; // масса второго шара | + | var m = 5 * m0; // масса шара |
+ | //var v.x = 0; // скорость шара | ||
+ | var k = 1; // силовой коэффициент | ||
+ | var b1 = 0.1; | ||
+ | var b3 = 0.1; | ||
+ | var N = m*9.8; // сила трения | ||
+ | var Ftr = -mu * N ; | ||
+ | /* var m2 = 10 * m0; // масса второго шара */ | ||
const Cwall = 10 * C0; // жесткость стен | const Cwall = 10 * C0; // жесткость стен | ||
const r = 1 * a0; // радиус частицы в расчетных координатах | const r = 1 * a0; // радиус частицы в расчетных координатах | ||
− | var | + | var c = 100; // "жесткость" пружинки 1 |
− | var c2 = 100; | + | /* var c2 = 100; */ // "жесткость" пружинки 1 |
var vx0 = 0 * a0/T0; //начальная скорость | var vx0 = 0 * a0/T0; //начальная скорость | ||
var delt = 0*a0; //начальное смещение | var delt = 0*a0; //начальное смещение | ||
Строка 53: | Строка 74: | ||
var Vmax = 0; var Mmin = 0; var Vprov = 0; | var Vmax = 0; var Mmin = 0; var Vprov = 0; | ||
− | + | var A = Math.sqrt((-4*b1*m*m)/(3*b3*c*c)); | |
+ | var Mmax= Math.max(m,10); | ||
//*** Передача значений слайдерам и текстовым окнам*** | //*** Передача значений слайдерам и текстовым окнам*** | ||
Text_delt.value = delt; | Text_delt.value = delt; | ||
− | + | Text_m.value = m; | |
− | + | Text_c.value = c; | |
− | + | Text_b1.value = b1; | |
− | + | Text_b3.value = b3; | |
+ | |||
+ | |||
+ | Slider_b1.min = -1; | ||
+ | Slider_b1.max = 1; | ||
+ | Slider_b1.step = 0.1; | ||
+ | Slider_b1.value = Text_b1.value; | ||
− | Slider_delt.min = - | + | Slider_b3.min = -1; |
− | Slider_delt.max = | + | Slider_b3.max = 1; |
+ | Slider_b3.step = 0.1; | ||
+ | Slider_b3.value = Text_b3.value; | ||
+ | |||
+ | Slider_delt.min = -5; | ||
+ | Slider_delt.max = 5; | ||
Slider_delt.step = 0.1; | Slider_delt.step = 0.1; | ||
Slider_delt.value = Text_delt.value; | Slider_delt.value = Text_delt.value; | ||
− | + | Slider_m.min = 0.1; | |
− | + | Slider_m.max = 10; | |
− | + | Slider_m.step = 0.1; | |
− | + | Slider_m.value = Text_m.value; | |
− | + | Slider_c.min = 1; | |
− | + | Slider_c.max = 200; | |
− | + | Slider_c.step = 1; | |
− | + | Slider_c.value = Text_c.value; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
Slider_delt.focus(); | Slider_delt.focus(); | ||
Строка 90: | Строка 114: | ||
const fps = 550; // frames per second - число кадров в секунду (качеcтво отображения) | const fps = 550; // frames per second - число кадров в секунду (качеcтво отображения) | ||
const spf = 260; // steps per frame - число шагов интегрирования между кадрами (скорость расчета) | const spf = 260; // steps per frame - число шагов интегрирования между кадрами (скорость расчета) | ||
− | const dt = 0. | + | const dt = 0.1 * T0 / fps; // шаг интегрирования |
// Задание констант для рисования | // Задание констант для рисования | ||
Строка 111: | Строка 135: | ||
b.x_ = b.x; b.y_ = b.y; | b.x_ = b.x; b.y_ = b.y; | ||
b.fx = 0; b.vx = 0; // начальная скорость | b.fx = 0; b.vx = 0; // начальная скорость | ||
− | + | b.cx = 0; b.ax = 0; // начальное ускорение | |
− | |||
− | |||
− | |||
− | |||
− | |||
// центр рамки | // центр рамки | ||
Строка 155: | Строка 174: | ||
} | } | ||
} | } | ||
+ | |||
// функция запускается при отпускании клавиши мыши | // функция запускается при отпускании клавиши мыши | ||
Строка 171: | Строка 191: | ||
b.x = (m.x + xShift)/scale; | b.x = (m.x + xShift)/scale; | ||
delt = b.x - l1; | delt = b.x - l1; | ||
− | b.vx = 0; | + | b.vx = 0; |
− | console.log(b.x); | + | b.ax = 0; |
+ | //console.log(b.x); | ||
Text_delt.value = delt; | Text_delt.value = delt; | ||
Slider_delt.value = Text_delt.value; | Slider_delt.value = Text_delt.value; | ||
Строка 203: | Строка 224: | ||
delt = Number(input); //записываем значение начального смещения | delt = Number(input); //записываем значение начального смещения | ||
time = 1; | time = 1; | ||
− | b.x = l1 + delt | + | b.x = l1 + delt; //изменение начальных координат шаров |
b.x_ = b.x; | b.x_ = b.x; | ||
− | b.vx = 0; | + | b.vx = 0; //задание начальных скоростей шаров |
+ | b.ax = 0; | ||
Text_delt.value = delt; | Text_delt.value = delt; | ||
Slider_delt.value = Text_delt.value; | Slider_delt.value = Text_delt.value; | ||
Строка 214: | Строка 236: | ||
} | } | ||
− | this. | + | this.set_m = function(input) |
{ | { | ||
− | + | m = Number(input); | |
time = 1; | time = 1; | ||
context.clearRect(0, 0, w * scale, h* scale); | context.clearRect(0, 0, w * scale, h* scale); | ||
Строка 223: | Строка 245: | ||
} | } | ||
− | this. | + | this.set_c = function(input) |
{ | { | ||
− | + | c = Number(input); | |
time = 1; | time = 1; | ||
context.clearRect(0, 0, w * scale, h* scale); | context.clearRect(0, 0, w * scale, h* scale); | ||
Строка 233: | Строка 255: | ||
} | } | ||
− | this. | + | this.set_b1 = function(input) |
{ | { | ||
− | + | b1 = Number(input); | |
time = 1; | time = 1; | ||
− | context.clearRect(0, 0, w * scale, h* scale); | + | context.clearRect(0, 0, w * scale, h* scale); |
context_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr); | context_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr); | ||
− | context_gr2.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr); | + | context_gr2.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr); |
} | } | ||
− | this. | + | this.set_b3 = function(input) |
− | { | + | { |
− | + | b3 = Number(input); | |
time = 1; | time = 1; | ||
context.clearRect(0, 0, w * scale, h* scale); | context.clearRect(0, 0, w * scale, h* scale); | ||
context_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr); | context_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr); | ||
− | context_gr2.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr); | + | context_gr2.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr); |
} | } | ||
− | + | ||
/*this.set_scale1 = function(input) | /*this.set_scale1 = function(input) | ||
{ | { | ||
Строка 271: | Строка 293: | ||
context_gr.clearRect(0, 0, w * scale, h * scale); | context_gr.clearRect(0, 0, w * scale, h * scale); | ||
context_gr2.clearRect(0, 0, w * scale, h * scale); | context_gr2.clearRect(0, 0, w * scale, h * scale); | ||
− | }*/ | + | }*/ |
− | |||
// Функция, делающая spf шагов интегрирования | // Функция, делающая spf шагов интегрирования | ||
function physics() | function physics() | ||
{ | { | ||
− | + | b.x_ = b.x; b.vx_= b.vx; b.ax_ = b.ax; //записываем старые координаты, скорости и ускорения | |
− | c.x_ = c.x; c.vx_= c.vx; | + | //c.x_ = c.x; c.vx_= c.vx; |
E_ = E; | E_ = E; | ||
− | |||
for (var s = 1; s <= spf; s++) | for (var s = 1; s <= spf; s++) | ||
{ | { | ||
+ | b.ax = 1*(-c*(b.x - l1) + b1*b.vx - b3*b.vx*b.vx*b.vx )/m*dt; //расчет ускорения первого шара | ||
+ | //console.log(Ftr); | ||
+ | //console.log(b.vx); | ||
+ | /* c.vx += -c2*(c.x - b.x - l2)/m2*dt; //расчет скорости второго шара */ | ||
+ | b.vx += 100*b.ax*dt; //расчет скорости первого шара | ||
+ | b.x += b.vx*dt | ||
+ | /* c.x += c.vx*dt; */ //расчет координаты второго шара | ||
+ | //console.log(b.x - 2*a0) | ||
+ | /* if (b.x - 2*a0 > w/2 - 9*a0) // условие на пружину сжатую. | ||
+ | { | ||
+ | b.x += 10000*b.vx*dt ; | ||
+ | console.log(b.x); | ||
+ | } // расчет координаты первого шара | ||
+ | else | ||
+ | { | ||
+ | b.vx = 0 ; | ||
+ | b.ax = 0; | ||
− | b. | + | for (var s = 1; s <= spf; s++) |
− | + | { | |
− | b. | + | b.ax = 100*(-c1*(b.x - l1)+ k*b.vx - Ftr)/m1*dt; //расчет ускорения первого шара |
− | + | console.log(b.x) | |
− | + | b.vx += b.ax*dt; | |
+ | b.x += b.vx*dt; */ | ||
+ | /* } */ | ||
+ | } | ||
+ | |||
+ | //console.log(b.x) | ||
+ | E = 0.5*c*(b.x-l1)*(b.x - l1); //рачсет энергии системы | ||
//Vprov = Math.max(b.vx, c.vx); | //Vprov = Math.max(b.vx, c.vx); | ||
//if ((Vprov) > Vmax) Vmax = b.vx; | //if ((Vprov) > Vmax) Vmax = b.vx; | ||
− | + | ||
time = time + 1; | time = time + 1; | ||
Строка 308: | Строка 351: | ||
context.moveTo(b.x*scale, b.y*scale); | context.moveTo(b.x*scale, b.y*scale); | ||
context.lineTo(wall1.x*scale, wall1.y*scale); | context.lineTo(wall1.x*scale, wall1.y*scale); | ||
− | |||
− | |||
− | |||
// стенка | // стенка | ||
context.moveTo(wall1.x*scale, (wall1.y + a0)*scale ); | context.moveTo(wall1.x*scale, (wall1.y + a0)*scale ); | ||
Строка 317: | Строка 357: | ||
context.stroke(); | context.stroke(); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
//частица первая | //частица первая | ||
context.fillStyle = 'blue'; | context.fillStyle = 'blue'; | ||
Строка 336: | Строка 371: | ||
{ | { | ||
scale2 = h /5* delt; | scale2 = h /5* delt; | ||
− | // | + | //console.log (Math.abs(b.vx_ - b.vx)); |
− | Graph(b, ' | + | if(Math.abs(b.vx_ - b.vx) > 0.00005) |
+ | { | ||
+ | Graph(b, 'blue'); //график для шара при положительном ускорении | ||
+ | } | ||
+ | else | ||
+ | { | ||
+ | Graph(b, 'red'); //график для шара при отрицательном ускорении | ||
+ | } | ||
GraphAxex('black'); //оси | GraphAxex('black'); //оси | ||
+ | |||
+ | |||
} | } | ||
Строка 347: | Строка 391: | ||
function Graph(b, color) | function Graph(b, color) | ||
{ | { | ||
− | + | context_gr2.lineWidth = 2; | |
context_gr.strokeStyle = color; | context_gr.strokeStyle = color; | ||
context_gr.beginPath(); | context_gr.beginPath(); | ||
Строка 359: | Строка 403: | ||
function GraphAxex(color) | function GraphAxex(color) | ||
{ | { | ||
+ | context_gr2.lineWidth = 2; | ||
context_gr.strokeStyle = color; | context_gr.strokeStyle = color; | ||
context_gr.beginPath(); | context_gr.beginPath(); | ||
Строка 374: | Строка 419: | ||
function Graph1(b, color) | function Graph1(b, color) | ||
{ | { | ||
− | + | context_gr2.lineWidth = 2; | |
context_gr.strokeStyle = color; | context_gr.strokeStyle = color; | ||
context_gr.beginPath(); | context_gr.beginPath(); | ||
− | context_gr.moveTo(time*scale2/3, (b.x-l1 | + | context_gr.moveTo(time*scale2/3, (b.x-l1)*scale*2*scale2 + scale*h1/2); |
− | context_gr.lineTo( (time+1)*scale2/3, (b.x_- l1 | + | context_gr.lineTo( (time+1)*scale2/3, (b.x_- l1)*scale*2*scale2 + scale*h1/2); |
context_gr.stroke(); | context_gr.stroke(); | ||
context_gr.closePath(); | context_gr.closePath(); | ||
Строка 387: | Строка 432: | ||
function draw_gr2() // Определение функции, рисующей второй график | function draw_gr2() // Определение функции, рисующей второй график | ||
{ | { | ||
+ | |||
+ | scale1 = 6* (h1*Mmax)/( c*delt*delt); | ||
+ | scale2 = A; | ||
+ | GraphVel(b, 'blue'); //график для шара | ||
+ | //GraphVel2(b, 'red'); //график для амплитудного коэффициента для шара | ||
+ | GraphVel3(b, 'green'); | ||
+ | GraphAxex2('black'); //оси | ||
+ | //console.log(A); | ||
+ | |||
+ | |||
+ | } | ||
− | var | + | /* function draw_gr3() // Определение функции, рисующей амплитудный график сходимости |
− | + | { | |
− | GraphVel(b, ' | + | |
+ | var A = Math.sqrt((-4*b1)m*m/(3*b3*c*c)); | ||
+ | scale1 = A; | ||
+ | GraphVel(b, 'yellow'); //график для первого шара | ||
//GraphVel2(c, 'red'); //график для второго шара | //GraphVel2(c, 'red'); //график для второго шара | ||
GraphAxex2('black'); //оси | GraphAxex2('black'); //оси | ||
− | } | + | } */ |
+ | |||
+ | |||
function GraphVel(b, color) | function GraphVel(b, color) | ||
{ | { | ||
− | + | context_gr2.lineWidth = 2; | |
context_gr2.strokeStyle = color; | context_gr2.strokeStyle = color; | ||
Строка 416: | Строка 477: | ||
function GraphVel2(b, color) | function GraphVel2(b, color) | ||
{ | { | ||
− | + | context_gr2.lineWidth = 2; | |
context_gr2.strokeStyle = color; | context_gr2.strokeStyle = color; | ||
context_gr2.beginPath(); | context_gr2.beginPath(); | ||
− | context_gr2.moveTo((b.x-l1 | + | context_gr2.moveTo((b.x-l1)*2*scale2 + scale*w1/2, b.vx*scale2 + scale*h1/2 ); |
− | context_gr2.lineTo((b.x_- l1 | + | context_gr2.lineTo((b.x_- l1)*2*scale2 + scale*w1/2, b.vx_*scale2 + scale*h1/2); |
− | |||
context_gr2.closePath(); | context_gr2.closePath(); | ||
context_gr2.stroke(); | context_gr2.stroke(); | ||
+ | |||
+ | |||
+ | |||
+ | } | ||
+ | function GraphVel3(b, color) | ||
+ | |||
+ | { | ||
+ | |||
+ | //Grafic A | ||
+ | A = Math.sqrt((-4*b1*m*m)/(3*b3*c*c)); | ||
+ | context_gr2.lineWidth = 1; | ||
+ | context_gr2.strokeStyle = color; | ||
+ | console.log(A); | ||
+ | context_gr2.beginPath(); | ||
+ | context_gr2.moveTo(1*A*Math.sin(time)+ scale*w1/2, 1*A*Math.cos(time)+ scale*h1/2); | ||
+ | context_gr2.lineTo(1*A*Math.sin(time)+ scale*w1/2, 1*A*Math.cos(time)+ scale*h1/2); | ||
+ | //context_gr2.moveTo(A*Math.sin(b.x-l1)+ scale*w1/2, A*Math.cos(b.x-l1)+ (h1/2)*scale); | ||
+ | //context_gr2.lineTo(A*Math.sin(b.x_-l1)+ scale*w1/2,A*Math.cos(b.x_-l1) + (h1/2)*scale); | ||
− | + | context_gr2.closePath(); | |
− | + | context_gr2.stroke(); | |
+ | } | ||
function GraphAxex2(color) | function GraphAxex2(color) | ||
{ | { | ||
+ | context_gr2.lineWidth = 1; | ||
context_gr2.strokeStyle = color; | context_gr2.strokeStyle = color; | ||
context_gr2.beginPath(); | context_gr2.beginPath(); | ||
Строка 450: | Строка 530: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | Файл '''" | + | Файл '''"1_7.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> | ||
<title> 2 </title> | <title> 2 </title> | ||
− | <script src=" | + | <script src="2_7.js"></script> |
</head> | </head> | ||
<body> | <body> | ||
Строка 464: | Строка 544: | ||
<div> | <div> | ||
Координаты от времени: | Координаты от времени: | ||
− | <font color="#0000FF" size="5"><B>—</B></font> | + | <font color="#0000FF" size="5"><B>—</B></font> Тело |
− | |||
− | |||
</div> | </div> | ||
Строка 473: | Строка 551: | ||
<div> | <div> | ||
Фазовая плоскость: | Фазовая плоскость: | ||
− | <font color="#0000FF" size="5"><B>—</B></font> | + | <font color="#0000FF" size="5"><B>—</B></font> Тело |
− | |||
− | |||
</div> | </div> | ||
Строка 486: | Строка 562: | ||
app.set_delt(this.value); | app.set_delt(this.value); | ||
document.getElementById('Slider_delt').value = this.value; | document.getElementById('Slider_delt').value = this.value; | ||
− | + | ||
"> | "> | ||
<input type = "range" id="Slider_delt" style="width: 100px;" oninput="app.set_delt(this.value); document.getElementById('Text_delt').value = this.value;"> | <input type = "range" id="Slider_delt" style="width: 100px;" oninput="app.set_delt(this.value); document.getElementById('Text_delt').value = this.value;"> | ||
Строка 494: | Строка 570: | ||
<!-- Масса 1 --> | <!-- Масса 1 --> | ||
<div> | <div> | ||
− | + | m = | |
− | <input id=" | + | <input id="Text_m" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput=" |
if (!this.checkValidity()) return; | if (!this.checkValidity()) return; | ||
− | app. | + | app.set_m(this.value); |
− | document.getElementById(' | + | document.getElementById('Slider_m').value = this.value; |
"> | "> | ||
− | <input type = "range" id=" | + | <input type = "range" id="Slider_m" style="width: 100px;" oninput="app.set_m(this.value); document.getElementById('Text_m').value = this.value;"> |
</I></font> | </I></font> | ||
</div> | </div> | ||
Строка 506: | Строка 582: | ||
<!-- Жесткость 1--> | <!-- Жесткость 1--> | ||
<div> | <div> | ||
− | + | c = | |
− | <input id=" | + | <input id="Text_c" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput=" |
if (!this.checkValidity()) return; | if (!this.checkValidity()) return; | ||
− | app. | + | app.set_c(this.value); |
− | document.getElementById(' | + | document.getElementById('Slider_c').value = this.value; |
"> | "> | ||
− | <input type = "range" id=" | + | <input type = "range" id="Slider_c" style="width: 100px;" oninput="app.set_c(this.value); document.getElementById('Text_c').value = this.value;"> |
+ | </I></font> | ||
+ | </div> | ||
+ | <!-- Первый коэффициент --> | ||
+ | <div> | ||
+ | b1 = | ||
+ | <input id="Text_b1" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput=" | ||
+ | if (!this.checkValidity()) return; | ||
+ | app.set_b1(this.value); | ||
+ | document.getElementById('Slider_b1').value = this.value; | ||
+ | |||
+ | "> | ||
+ | <input type = "range" id="Slider_b1" style="width: 100px;" oninput="app.set_b1(this.value); document.getElementById('Text_b1').value = this.value;"> | ||
</I></font> | </I></font> | ||
</div> | </div> | ||
+ | <!-- Второй коэффициент --> | ||
+ | <div> | ||
+ | b3 = | ||
+ | <input id="Text_b3" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput=" | ||
+ | if (!this.checkValidity()) return; | ||
+ | app.set_b3(this.value); | ||
+ | document.getElementById('Slider_b3').value = this.value; | ||
+ | |||
+ | "> | ||
+ | <input type = "range" id="Slider_b3" style="width: 100px;" oninput="app.set_b3(this.value); document.getElementById('Text_b3').value = this.value;"> | ||
+ | </I></font> | ||
+ | </div> | ||
<script type="text/javascript"> app = new MainParticle(document.getElementById('canvasBalls'),document.getElementById('canvasGraph'),document.getElementById('canvasGraph1'));</script> | <script type="text/javascript"> app = new MainParticle(document.getElementById('canvasBalls'),document.getElementById('canvasGraph'),document.getElementById('canvasGraph1'));</script> | ||
</body> | </body> | ||
− | </html> | + | </html> |
</syntaxhighlight> | </syntaxhighlight> | ||
</div> | </div> |
Текущая версия на 16:23, 13 февраля 2016
Виртуальная лаборатория > Простейшая колебательная система с двумя степенями свободыРассматривается простейшая колебательная система тело-пружина-конвейер. Пружина крепится к стенке. Грузик на пружинке колеблется посредством постоянной силы F, с которой тянет конвейер. Запишем уравнения движения системы :
- , где - масса грузика, - жесткость пружины, - скорость конвейера, - изменение скорости тела
Делаем замену переменных.
, где - начальная координата тела. Затем раскладываем силу в ряд Тейлора, получаем новое уравнение :Переобозначим переменные. Пусть :
Получим новое уравнение :
, где - частота колебаний.
Скачать SeregaTrouble.rar.
Текст программы на языке JavaScript (разработчик Бондарев Сергей):
Файл "2_7.js"
1 function MainParticle(canvas, canvas_gr, canvas_gr2) {
2 // Предварительные установки
3 var context = canvas.getContext("2d"); // на context происходит рисование
4 var context_gr = canvas_gr.getContext("2d"); // на context происходит рисование
5 var context_gr2 = canvas_gr2.getContext("2d");
6
7 // Задание констант
8 const Pi = 3.1415926; // число "пи"
9 const m0 = 1; // масштаб массы
10 const T0 = 1; // масштаб времени (период колебаний исходной системы)
11 const a0 = 1; // масштаб расстояния (диаметр шара)
12 const mu = 0.4; // коэф. трения
13
14
15 const g0 = a0 / T0 / T0; // масштаб ускорения (ускорение, при котором за T0 будет пройдено расстояние a0)
16 const k0 = 2 * Pi / T0; // масштаб частоты
17 const C0 = m0 * k0 * k0; // масштаб жесткости
18 var scale1 = 0.2;
19 /* var scale2 = 0.2; */
20 // *** Задание физических параметров ***
21 var xShift= 0;
22 const Ny = 15; // число шаров, помещающихся по вертикали в окно (задает размер шара относительно размера окна)
23 const Nx = 15; // число шаров, помещающихся по вертикали в окно (задает размер шара относительно размера окна)
24 const l1 = 15*a0; // длина первой пружины
25 const lmax = 2*l1; // максимальное растяжение первой пружины
26 /* const l2 = 5*a0; */ // длина второй пружины
27 var m = 5 * m0; // масса шара
28 //var v.x = 0; // скорость шара
29 var k = 1; // силовой коэффициент
30 var b1 = 0.1;
31 var b3 = 0.1;
32 var N = m*9.8; // сила трения
33 var Ftr = -mu * N ;
34 /* var m2 = 10 * m0; // масса второго шара */
35 const Cwall = 10 * C0; // жесткость стен
36 const r = 1 * a0; // радиус частицы в расчетных координатах
37 var c = 100; // "жесткость" пружинки 1
38 /* var c2 = 100; */ // "жесткость" пружинки 1
39 var vx0 = 0 * a0/T0; //начальная скорость
40 var delt = 0*a0; //начальное смещение
41 var E = 0; //энергия системы
42 var Vmax = 0; var Mmin = 0; var Vprov = 0;
43
44 var A = Math.sqrt((-4*b1*m*m)/(3*b3*c*c));
45 var Mmax= Math.max(m,10);
46 //*** Передача значений слайдерам и текстовым окнам***
47 Text_delt.value = delt;
48 Text_m.value = m;
49 Text_c.value = c;
50 Text_b1.value = b1;
51 Text_b3.value = b3;
52
53
54 Slider_b1.min = -1;
55 Slider_b1.max = 1;
56 Slider_b1.step = 0.1;
57 Slider_b1.value = Text_b1.value;
58
59 Slider_b3.min = -1;
60 Slider_b3.max = 1;
61 Slider_b3.step = 0.1;
62 Slider_b3.value = Text_b3.value;
63
64 Slider_delt.min = -5;
65 Slider_delt.max = 5;
66 Slider_delt.step = 0.1;
67 Slider_delt.value = Text_delt.value;
68
69 Slider_m.min = 0.1;
70 Slider_m.max = 10;
71 Slider_m.step = 0.1;
72 Slider_m.value = Text_m.value;
73
74 Slider_c.min = 1;
75 Slider_c.max = 200;
76 Slider_c.step = 1;
77 Slider_c.value = Text_c.value;
78 Slider_delt.focus();
79
80 // *** Задание вычислительных параметров ***
81
82 const fps = 550; // frames per second - число кадров в секунду (качеcтво отображения)
83 const spf = 260; // steps per frame - число шагов интегрирования между кадрами (скорость расчета)
84 const dt = 0.1 * T0 / fps; // шаг интегрирования
85
86 // Задание констант для рисования
87 const scale = canvas.height / Ny / a0; // масштабный коэффициент для перехода от расчетных к экранным координатам
88 const scale_gr = canvas_gr.height / Ny / a0; // масштабный коэффициент для перехода от расчетных к экранным координатам
89 const scale_gr2 = canvas_gr2.height / Ny / a0;
90
91
92 var w = canvas.width / scale; // ширина окна в расчетных координатах
93 var h = canvas.height / scale; // высота окна в расчетных координатах
94 var w1 = canvas_gr.width / scale; // ширина окна в расчетных координатах
95 var h1 = canvas_gr.height / scale; // высота окна в расчетных координатах
96
97
98 // ------------------------------- Выполнение программы ------------------------------------------
99 // Добавление шара 1
100 var b = [];
101 var time = 1;
102 b.x = l1; b.y = h / 2; // расчетные координаты шара
103 b.x_ = b.x; b.y_ = b.y;
104 b.fx = 0; b.vx = 0; // начальная скорость
105 b.cx = 0; b.ax = 0; // начальное ускорение
106
107 // центр рамки
108 var origin = [];
109 origin.x = w/2; origin.y = h/2;
110 // стенка
111 var wall1 = [];
112 wall1.x = w/2 - 9*a0; wall1.y = h/2;
113
114 // Основной цикл программы
115 setInterval(control, 1500 / fps); // функция control вызывается с периодом, определяемым вторым параметром
116
117 // ---------------------------------------------------------------------------------------------------------------------
118 // --------------------------------- Определение всех функций -----------------------------------
119 // ---------------------------------------------------------------------------------------------------------------------
120
121 // функция запускается при нажатии клавиши мыши
122 canvas.onmousedown = function(e)
123 {
124 var m = mouseCoords(e); // получаем координаты курсора мыши
125 context.clearRect(0, 0, w * scale, h* scale);
126 context_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);
127 context_gr2.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);
128 context_gr.closePath();
129 context_gr2.closePath();
130 context.closePath();
131 context.fill();
132 var x = b.x*scale - m.x; // расстояние от центра шара до курсора по оси x
133 var y = b.y*scale - m.y; // расстояние от центра шара до курсора по оси y
134 var rLen2 = x * x + y * y; // квадрат расстояния между курсором и центром шара
135 //console.log(rLen2);
136 //console.log(100*r*r);
137 if (rLen2 <= 500 * r * r) // если курсор нажал на шар
138 {
139 xShift = b.x*scale - m.x; // сдвиг курсора относительно центра шара по x
140 canvas.onmousemove = mouseMove; // пока клавиша нажата - работает функция перемещения
141
142 }
143 }
144
145
146 // функция запускается при отпускании клавиши мыши
147 document.onmouseup = function()
148 {
149 canvas.onmousemove = null; // когда клавиша отпущена - функции перемещения нету
150 }
151
152 // функция запускается при перемещении мыши (много раз, в каждый момент перемещения)
153 // в нашем случае работает только с зажатой клавишей мыши
154 function mouseMove(e) {
155 context.clearRect(0, 0, w * scale, h* scale);
156 context_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);
157 context_gr2.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);
158 var m = mouseCoords(e); // получаем координаты курсора мыши
159 b.x = (m.x + xShift)/scale;
160 delt = b.x - l1;
161 b.vx = 0;
162 b.ax = 0;
163 //console.log(b.x);
164 Text_delt.value = delt;
165 Slider_delt.value = Text_delt.value;
166 //var scale1 = 0.0000000002;
167 //var scale2 = 0.2;
168
169 }
170
171 // функция возвращает координаты курсора мыши
172 function mouseCoords(e) {
173 var m = [] ;
174 var rect = canvas.getBoundingClientRect();
175 m.x = e.clientX - rect.left;
176 m.y = e.clientY - rect.top;
177 return m;
178 }
179 // основная функция, вызываемая в программе
180 function control()
181 {
182 physics(); // делаем spf шагов интегрирование
183 draw();
184 draw_gr();
185 draw_gr2();
186
187 }
188
189 // Реакция на изменение значения в чекбоксе
190 this.set_delt = function(input)
191 {
192 delt = Number(input); //записываем значение начального смещения
193 time = 1;
194 b.x = l1 + delt; //изменение начальных координат шаров
195 b.x_ = b.x;
196 b.vx = 0; //задание начальных скоростей шаров
197 b.ax = 0;
198 Text_delt.value = delt;
199 Slider_delt.value = Text_delt.value;
200 context.clearRect(0, 0, w * scale, h* scale);
201 context_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);
202 context_gr2.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);
203
204 }
205
206 this.set_m = function(input)
207 {
208 m = Number(input);
209 time = 1;
210 context.clearRect(0, 0, w * scale, h* scale);
211 context_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);
212 context_gr2.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);
213 }
214
215 this.set_c = function(input)
216 {
217 c = Number(input);
218 time = 1;
219 context.clearRect(0, 0, w * scale, h* scale);
220 context_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);
221 context_gr2.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);
222
223 }
224
225 this.set_b1 = function(input)
226 {
227 b1 = Number(input);
228 time = 1;
229 context.clearRect(0, 0, w * scale, h* scale);
230 context_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);
231 context_gr2.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);
232 }
233
234 this.set_b3 = function(input)
235 {
236 b3 = Number(input);
237 time = 1;
238 context.clearRect(0, 0, w * scale, h* scale);
239 context_gr.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);
240 context_gr2.clearRect(0, 0, w1 * scale_gr, h1 * scale_gr);
241 }
242
243 /*this.set_scale1 = function(input)
244 {
245 //scale1 = Number(input);
246 var Cmax = Math.max(c1, c2); var Mmax = Math.max(m1, m2);
247 scale1 = h*Mmax/(Cmax*delt);
248 console.log(scale1);
249 time = 1;
250 context.clearRect(0, 0, w * scale, h * scale);
251 context_gr.clearRect(0, 0, w * scale, h * scale);
252 context_gr2.clearRect(0, 0, w * scale, h * scale);
253 }
254
255 this.set_scale2 = function(input)
256 {
257
258 scale2 = Number(input);
259 time = 1;
260 context.clearRect(0, 0, w * scale, h * scale);
261 context_gr.clearRect(0, 0, w * scale, h * scale);
262 context_gr2.clearRect(0, 0, w * scale, h * scale);
263 }*/
264 // Функция, делающая spf шагов интегрирования
265 function physics()
266 {
267 b.x_ = b.x; b.vx_= b.vx; b.ax_ = b.ax; //записываем старые координаты, скорости и ускорения
268 //c.x_ = c.x; c.vx_= c.vx;
269 E_ = E;
270 for (var s = 1; s <= spf; s++)
271 {
272 b.ax = 1*(-c*(b.x - l1) + b1*b.vx - b3*b.vx*b.vx*b.vx )/m*dt; //расчет ускорения первого шара
273 //console.log(Ftr);
274 //console.log(b.vx);
275 /* c.vx += -c2*(c.x - b.x - l2)/m2*dt; //расчет скорости второго шара */
276 b.vx += 100*b.ax*dt; //расчет скорости первого шара
277 b.x += b.vx*dt
278 /* c.x += c.vx*dt; */ //расчет координаты второго шара
279 //console.log(b.x - 2*a0)
280 /* if (b.x - 2*a0 > w/2 - 9*a0) // условие на пружину сжатую.
281 {
282 b.x += 10000*b.vx*dt ;
283 console.log(b.x);
284 } // расчет координаты первого шара
285 else
286 {
287 b.vx = 0 ;
288 b.ax = 0;
289
290 for (var s = 1; s <= spf; s++)
291 {
292 b.ax = 100*(-c1*(b.x - l1)+ k*b.vx - Ftr)/m1*dt; //расчет ускорения первого шара
293 console.log(b.x)
294 b.vx += b.ax*dt;
295 b.x += b.vx*dt; */
296 /* } */
297 }
298
299 //console.log(b.x)
300 E = 0.5*c*(b.x-l1)*(b.x - l1); //рачсет энергии системы
301 //Vprov = Math.max(b.vx, c.vx);
302 //if ((Vprov) > Vmax) Vmax = b.vx;
303
304
305
306
307 time = time + 1;
308
309 }
310
311 // определение функций, рисующих частицу, стенки и графики
312
313 function draw() //функция, рисующая шары, стенку и пружины
314 {
315 context.clearRect(0, 0, w * scale, h * scale); // очистить экран
316
317 // линия, соединяющая первую частицу со стенкой
318 context.beginPath();
319 context.moveTo(b.x*scale, b.y*scale);
320 context.lineTo(wall1.x*scale, wall1.y*scale);
321 // стенка
322 context.moveTo(wall1.x*scale, (wall1.y + a0)*scale );
323 context.lineTo(wall1.x*scale, (wall1.y - a0)*scale );
324 context.closePath();
325 context.stroke();
326
327 //частица первая
328 context.fillStyle = 'blue';
329 context.beginPath();
330 context.arc(b.x * scale, b.y * scale, 0.5*r * scale, 0, 2*Math.PI, false);
331 context.fill();
332
333
334 }
335
336
337
338 function draw_gr() // Определение функции, рисующей первый график
339 {
340 scale2 = h /5* delt;
341 //console.log (Math.abs(b.vx_ - b.vx));
342 if(Math.abs(b.vx_ - b.vx) > 0.00005)
343 {
344 Graph(b, 'blue'); //график для шара при положительном ускорении
345 }
346 else
347 {
348 Graph(b, 'red'); //график для шара при отрицательном ускорении
349 }
350 GraphAxex('black'); //оси
351
352
353
354 }
355
356
357
358
359 function Graph(b, color)
360 {
361 context_gr2.lineWidth = 2;
362 context_gr.strokeStyle = color;
363 context_gr.beginPath();
364 context_gr.moveTo(time*scale2/3, (b.x-l1)*scale*2*scale2 + h1*scale/2);
365 context_gr.lineTo( (time+1)*scale2/3, (b.x_- l1)*scale*2*scale2 + h1*scale/2);
366 context_gr.stroke();
367 context_gr.closePath();
368
369 }
370
371 function GraphAxex(color)
372 {
373 context_gr2.lineWidth = 2;
374 context_gr.strokeStyle = color;
375 context_gr.beginPath();
376 // ось горизонтальная
377 context_gr.moveTo(w1/2*scale, 0);
378 context_gr.lineTo(w1/2*scale, h1*scale);
379 // ось вертикальная
380 context_gr.moveTo(0, (h1/2)*scale);
381 context_gr.lineTo((w1)*scale, (h1/2)*scale);
382 context_gr.closePath();
383 context_gr.stroke();
384
385 }
386
387 function Graph1(b, color)
388 {
389 context_gr2.lineWidth = 2;
390 context_gr.strokeStyle = color;
391 context_gr.beginPath();
392 context_gr.moveTo(time*scale2/3, (b.x-l1)*scale*2*scale2 + scale*h1/2);
393 context_gr.lineTo( (time+1)*scale2/3, (b.x_- l1)*scale*2*scale2 + scale*h1/2);
394 context_gr.stroke();
395 context_gr.closePath();
396
397 }
398
399
400 function draw_gr2() // Определение функции, рисующей второй график
401 {
402
403 scale1 = 6* (h1*Mmax)/( c*delt*delt);
404 scale2 = A;
405 GraphVel(b, 'blue'); //график для шара
406 //GraphVel2(b, 'red'); //график для амплитудного коэффициента для шара
407 GraphVel3(b, 'green');
408 GraphAxex2('black'); //оси
409 //console.log(A);
410
411
412 }
413
414 /* function draw_gr3() // Определение функции, рисующей амплитудный график сходимости
415 {
416
417 var A = Math.sqrt((-4*b1)m*m/(3*b3*c*c));
418 scale1 = A;
419 GraphVel(b, 'yellow'); //график для первого шара
420 //GraphVel2(c, 'red'); //график для второго шара
421 GraphAxex2('black'); //оси
422
423
424 } */
425
426
427
428 function GraphVel(b, color)
429 {
430
431 context_gr2.lineWidth = 2;
432 context_gr2.strokeStyle = color;
433
434 context_gr2.beginPath();
435
436 context_gr2.moveTo((b.x-l1)*2*scale1 + scale*w1/2, b.vx*scale1 + scale*h1/2 );
437 context_gr2.lineTo((b.x_- l1)*2*scale1 + scale*w1/2, b.vx_*scale1 + scale*h1/2);
438
439 context_gr2.closePath();
440 context_gr2.stroke();
441
442
443 }
444
445 function GraphVel2(b, color)
446 {
447 context_gr2.lineWidth = 2;
448 context_gr2.strokeStyle = color;
449
450 context_gr2.beginPath();
451
452 context_gr2.moveTo((b.x-l1)*2*scale2 + scale*w1/2, b.vx*scale2 + scale*h1/2 );
453 context_gr2.lineTo((b.x_- l1)*2*scale2 + scale*w1/2, b.vx_*scale2 + scale*h1/2);
454
455 context_gr2.closePath();
456 context_gr2.stroke();
457
458
459
460 }
461 function GraphVel3(b, color)
462
463 {
464
465 //Grafic A
466 A = Math.sqrt((-4*b1*m*m)/(3*b3*c*c));
467 context_gr2.lineWidth = 1;
468 context_gr2.strokeStyle = color;
469 console.log(A);
470 context_gr2.beginPath();
471
472 context_gr2.moveTo(1*A*Math.sin(time)+ scale*w1/2, 1*A*Math.cos(time)+ scale*h1/2);
473 context_gr2.lineTo(1*A*Math.sin(time)+ scale*w1/2, 1*A*Math.cos(time)+ scale*h1/2);
474 //context_gr2.moveTo(A*Math.sin(b.x-l1)+ scale*w1/2, A*Math.cos(b.x-l1)+ (h1/2)*scale);
475 //context_gr2.lineTo(A*Math.sin(b.x_-l1)+ scale*w1/2,A*Math.cos(b.x_-l1) + (h1/2)*scale);
476
477 context_gr2.closePath();
478 context_gr2.stroke();
479 }
480
481 function GraphAxex2(color)
482 {
483 context_gr2.lineWidth = 1;
484 context_gr2.strokeStyle = color;
485 context_gr2.beginPath();
486 // ось горизонтальная
487 context_gr2.moveTo(w1/2*scale, 0);
488 context_gr2.lineTo(w1/2*scale, h1*scale);
489 // ось вертикальная
490 context_gr2.moveTo(0, (h1/2)*scale);
491 context_gr2.lineTo((w1)*scale, (h1/2)*scale);
492 context_gr2.closePath();
493 context_gr2.stroke();
494
495 }
496
497
498 }
Файл "1_7.html"
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title> 2 </title>
5 <script src="2_7.js"></script>
6 </head>
7 <body>
8 <!-- Добавление области для рисования частицы -->
9 <canvas id="canvasBalls" width="800" height="300" style="border:1px solid #000000;"></canvas>
10 <!-- Добавление области для рисования графика -->
11 <div>
12 Координаты от времени:
13 <font color="#0000FF" size="5"><B>—</B></font> Тело
14
15 </div>
16 <canvas id="canvasGraph" width="800" height="600" style="border:1px solid #000000;"></canvas>
17 <!-- Добавление чекбокса для ввода скорости частицы -->
18 <div>
19 Фазовая плоскость:
20 <font color="#0000FF" size="5"><B>—</B></font> Тело
21
22 </div>
23 <canvas id="canvasGraph1" width="800" height="600" style="border:1px solid #000000;"></canvas>
24
25 <div>
26 delt =
27 <input id="Text_delt" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
28 if (!this.checkValidity()) return;
29 app.set_delt(this.value);
30 document.getElementById('Slider_delt').value = this.value;
31
32 ">
33 <input type = "range" id="Slider_delt" style="width: 100px;" oninput="app.set_delt(this.value); document.getElementById('Text_delt').value = this.value;">
34 </I></font>
35 </div>
36
37 <!-- Масса 1 -->
38 <div>
39 m =
40 <input id="Text_m" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
41 if (!this.checkValidity()) return;
42 app.set_m(this.value);
43 document.getElementById('Slider_m').value = this.value;
44 ">
45 <input type = "range" id="Slider_m" style="width: 100px;" oninput="app.set_m(this.value); document.getElementById('Text_m').value = this.value;">
46 </I></font>
47 </div>
48
49 <!-- Жесткость 1-->
50 <div>
51 c =
52 <input id="Text_c" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
53 if (!this.checkValidity()) return;
54 app.set_c(this.value);
55 document.getElementById('Slider_c').value = this.value;
56 ">
57 <input type = "range" id="Slider_c" style="width: 100px;" oninput="app.set_c(this.value); document.getElementById('Text_c').value = this.value;">
58 </I></font>
59 </div>
60 <!-- Первый коэффициент -->
61 <div>
62 b1 =
63 <input id="Text_b1" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
64 if (!this.checkValidity()) return;
65 app.set_b1(this.value);
66 document.getElementById('Slider_b1').value = this.value;
67
68 ">
69 <input type = "range" id="Slider_b1" style="width: 100px;" oninput="app.set_b1(this.value); document.getElementById('Text_b1').value = this.value;">
70 </I></font>
71 </div>
72
73 <!-- Второй коэффициент -->
74 <div>
75 b3 =
76 <input id="Text_b3" style="width: 4.2ex;" required pattern="[-+]?([0-9]*\.[0-9]+|[0-9]+)" oninput="
77 if (!this.checkValidity()) return;
78 app.set_b3(this.value);
79 document.getElementById('Slider_b3').value = this.value;
80
81 ">
82 <input type = "range" id="Slider_b3" style="width: 100px;" oninput="app.set_b3(this.value); document.getElementById('Text_b3').value = this.value;">
83 </I></font>
84 </div>
85 <script type="text/javascript"> app = new MainParticle(document.getElementById('canvasBalls'),document.getElementById('canvasGraph'),document.getElementById('canvasGraph1'));</script>
86 </body>
87 </html>