Chain v1 — различия между версиями

  1 function MainChain(canvas) {
  2 
  3     // Предварительные установки
  4 
  5     var context = canvas.getContext("2d");                  // на context происходит рисование
  6     document.oncontextmenu=function(e){return false};       // блокировка контекстного меню
  7 
  8     var Pi = 3.1415926;                   // число "пи"
  9 
 10     var m0 = 1;                           // масштаб массы
 11     var T0 = 1;                           // масштаб времени (период колебаний исходной системы)
 12     var a0 = 1;                           // масштаб расстояния (диаметр шара)
 13 
 14     var k0 = 2 * Pi / T0;                 // масштаб частоты
 15     var C0 = m0 * k0 * k0;                // масштаб жесткости
 16 
 17     // *** Задание физических параметров ***
 18 
 19     var Ny = 5;						    // Число шаров, помещающихся по вертикали в окно (задает размер шара относительно размера окна)
 20     var scale = canvas.height / Ny / a0;  // масштабный коэффициент для перехода от расчетных к экранным координатам
 21     var m = 1 * m0;                 	    // масса
 22     var C = 1 * C0;                 	    // жесткость
 23     var r = a0;               	        // радиус частицы в расчетных координатах
 24     var rScale = r * scale;               // радиус частицы в экранных координатах
 25     var num = 10;                         // количество частиц
 26     var v0 = 1*a0/T0;                     // начальный разброс скоростей
 27 
 28     // *** Задание вычислительных параметров ***
 29 
 30     var fps = 50;             	        // frames per second - число кадров в секунду (качечтво отображения)
 31     var spf = 100;              		    // steps per frame   - число шагов интегрирования между кадрами (скорость расчета)
 32     var dt  = 0.045 * T0 / fps;      	    // шаг интегрирования (качество расчета)
 33 
 34     // Выполнение программы
 35 
 36     var w = canvas.width / scale;		    // ширина окна в расчетных координатах
 37     var h = canvas.height / scale;		    // высота окна в расчетных координатах
 38     var pDist = w/num;                    // расстояние между шарами (в начальном положении)
 39     var hC = h/2 * scale;                 // высота цепи
 40 
 41     // Работа с массивом
 42 
 43     var balls = [];                         // массив шаров
 44     for (var i = 1; i < num + 1; i++) {
 45         var b = [];
 46 
 47         b.x0 = pDist*(0.5 + i-1);                           // расчетные координаты начального положения шара
 48         b.uu = 0;                                           // расчетное смещение шара относительно начального положения
 49         b.xx = b.x0 + b.uu;                                 // расчетные координаты положения шара
 50         b.x = b.xx*scale;                                   // экранные координаты шара
 51         b.fx = 0;                                           // сила, действующая на шар
 52         b.vx = v0*(2*Math.random()-1);                      // скорость
 53 
 54         balls[i] = b;                                       // добавить элемент в конец массива
 55     }
 56 
 57     // здесь задается периодическая система
 58     balls[0] = balls[num];
 59     balls[num+1] = balls[1];
 60 
 61     // уравновешивание суммарной скорости по оси х (чтобы частицы не улетали в сторону)
 62     var sumVx = 0;
 63     for (var i0 = 1; i0 < num+1; i0++) sumVx += balls[i0].vx;
 64     var vxAverage = sumVx/num;
 65     for (var i1 = 1; i1 < num+1; i1++) balls[i1].vx -= vxAverage;
 66 
 67     // высота оси у на графике u(n)
 68     var sumVx2 = 0;
 69     for (var i2 = 1; i2 < num+1; i2++) sumVx2 += balls[i2].vx*balls[i2].vx;
 70     var sigma2 = sumVx2 / num;
 71     var omega2 = C/m;
 72     var xLabel = 2*Math.sqrt(sigma2/omega2);
 73 
 74     // график
 75 
 76     var steps = 0;                      // количество шагов интегрирования
 77 
 78     var uGraph = new TM_graph(          // определить график
 79         "#uGraph",                      // на html-элементе #uGraph
 80         "n", "u",                       // подписи на осях
 81         null                            // в данном типе графика не используется
 82         ,-xLabel, +xLabel, xLabel/4     // мин. значение оси Y, макс. значение оси Y, шаг по оси Y
 83     );
 84 
 85     var vGraph = new TM_graph(          // определить график
 86         "#vGraph",                      // на html-элементе #vGraph
 87         "n", "v",                       // подписи на осях
 88         null                            // в данном типе графика не используется
 89         ,-1.2*v0, 1.2*v0, 1.2*v0/4                     // мин. значение оси Y, макс. значение оси Y, шаг по оси Y
 90     );
 91 
 92     // Основной цикл программы
 93 
 94     function control() {
 95         physics();
 96         draw();
 97     }
 98 
 99     // Расчетная часть программы
100 
101     function physics(){
102         for (var s=1; s<=spf; s++) {// то, что происходит каждый шаг времени
103             for (var i=1; i<balls.length-1; i++){
104                 balls[i].fx = C*(balls[i+1].uu - 2*balls[i].uu + balls[i-1].uu);
105                 balls[i].vx += balls[i].fx / m * dt;
106                 balls[i].xx += balls[i].vx * dt;
107 
108                 balls[i].x = balls[i].xx * scale;
109             }
110             // присваиваем новые перемещения
111             for (var i2=1; i2 < balls.length-1; i2++) balls[i2].uu = balls[i2].xx - balls[i2].x0;
112         }
113         steps++;
114 
115         // для графика создаем массив пар значений [x, y]
116         var uData = []; var vData = [];
117         for (var i0=1; i0<balls.length-1; i0++) uData[i0] = [i0, balls[i0].uu];
118         for (var i1=1; i1<balls.length-1; i1++) vData[i1] = [i1, balls[i1].vx];
119 
120         if (steps % 10 == 0) uGraph.graph(uData);   // подаем данные на график
121         if (steps % 10 == 0) vGraph.graph(vData);   // подаем данные на график
122     }
123 
124     // Рисование
125 
126     var rScale13 = rScale*1.3;          // ___в целях оптимизации___
127     var rScaleShift = rScale/5.0;       // ___в целях оптимизации___
128     function draw(){
129         context.clearRect(0, 0, w*scale, h*scale);          // очистить экран
130         for (var i = 0; i < balls.length; i++){
131             var b = balls[i];
132 
133             // расчет градиента нужно проводить для каждого шара
134             var gradient=context.createRadialGradient(b.x, hC, rScale13, b.x-rScaleShift, hC+rScaleShift,0);
135             gradient.addColorStop(0,"#0000bb");
136             gradient.addColorStop(1,"#44ddff");
137             context.fillStyle=gradient;
138 
139             context.beginPath();
140             context.arc(b.x, hC, r*scale,0,2*Math.PI);
141             context.closePath();
142             context.fill();
143         }
144     }
145 
146     // Запуск системы
147 
148     setInterval(control, 1000/fps);
149 
150 }

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Chain</title>
 5     <script src="Chain_v1_release.js"></script>
 6 
 7     <script src="jquery.min.js"></script>
 8     <script src="TM_v2.js"></script>
 9     <script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
10     <script language="javascript" type="text/javascript" src="jquery.flot.axislabels.js"></script>
11 </head>
12 <body>
13     <canvas id="canvasChain" width="800" height="100" style="border:1px solid #000000;"></canvas>
14     <script type="text/javascript">MainChain(document.getElementById('canvasChain'));</script>
15 
16     <!--графики-->
17     <div style="float:left;">
18         <div id="uGraph" style="width:600px; height:300px; clear:both; float:left;"></div>
19         <div id="vGraph" style="width:600px; height:300px; clear:both; float:left;"></div>
20     </div>
21     <div style="clear:both;"></div>
22 </body>
23 </html>