Цепочка из частиц с вращательными степенями свободы — различия между версиями

  1 window.addEventListener("load", MainSystem, true);
  2 function MainSystem()
  3 {
  4     var context_s = canvasSystem.getContext('2d');                  // Отрисовка цепочки
  5 	var context_g = canvasGraph.getContext('2d');                  // Отрисовка графиков
  6 	var context_g_1 = canvasGraph_1.getContext('2d');
  7 	var context_g_2 = canvasGraph_2.getContext('2d'); 
  8 	
  9     const Pi = 3.1415926;                   
 10     const m0 = 1;                         
 11     const T0 = 1;                         
 12 	const l0 = 1;
 13 	const E0 = 1;
 14 	
 15 	//ширина канваса - ширина окна в браузере
 16 	const distance_between_canvases = 5;
 17 	canvasSystem.width = document.body.clientWidth;  
 18 	canvasGraph.width = document.body.clientWidth / 2 - distance_between_canvases;
 19 	canvasGraph_1.width = document.body.clientWidth / 2 - distance_between_canvases;
 20 	canvasGraph_2.width = document.body.clientWidth;
 21 	
 22     var Db = parseFloat(diameter.value) * l0;			// диаметр балки
 23 	const l = 60 * l0;				// длина балки	
 24 	const a = 60 * l0;				// длина стержня
 25 	var Db2 = Db * Db;
 26 	var J = Pi * Db2 * Db2 / 64;              // коэффициент жесткости
 27 	const E = 10000000 * E0; 				// модуль Юнга 
 28 	var C = E * J / l; 
 29 	var N = parseFloat(number_of_objects.value) + 1;		//число объектов
 30 	const m = 0.01 * m0;             // масса
 31     const Q = m * l * l / 12;  		// момент инерции стержня 
 32 	const w_c = Math.sqrt(2 * C / Q);   // собственная частота колебаний
 33 	
 34 	//Изменение системы
 35 	restart.onclick = function() 
 36 	{
 37 		N = parseFloat(number_of_objects.value) + 1; 	//новое кол-во тел
 38 		scale = canvasSystem.width / N;
 39 		spf = calcul_speed.value;
 40 		Db = parseFloat(diameter.value) * l0;	//новый диаметр балки
 41 		Db2 = Db * Db;
 42 		J = Pi * Db2 * Db2 / 64;       	
 43 		C = E * J / l;
 44 		
 45 		context_s.clearRect(0, 0, canvasSystem.width, canvasSystem.height);
 46 		context_g.clearRect(0, 0, canvasGraph.width, canvasGraph.height);
 47 		context_g_1.clearRect(0, 0, canvasGraph_1.width, canvasGraph_1.height);
 48 		context_g_2.clearRect(0, 0, canvasGraph_2.width, canvasGraph_2.height);
 49 		
 50 		shaft = [];
 51 		addSystem(shaft);
 52 		
 53 		t = 0;
 54 		P1 = 0;
 55 		K1 = 0;
 56     };
 57 	
 58 	const fps = 50;                         // frames per second (качество отображения)
 59     var spf = calcul_speed.value;           // steps per frame  (скорость расчёта)
 60     const frequency = 1000 / fps;			//Время, через которые будет выполнятся код - 1000 миллисекунд / fps
 61 	const dt  =  0.05 * T0 / fps; 	              
 62 	
 63 	var scale = canvasSystem.width / N;  		// Для масштабирования
 64 	
 65 	var K0 = 0; var P0 = 0; var E_p0 = 0; var L0; 		// показания энергий на i-шаге
 66 	var K1 = 0; var P1 = 0; var E_p1 = 0; var L1;		// показания энергий на (i+1)-шаге
 67 	var K_m;    					//максимальное значение энергии в начальный момент времени - для масштабирования
 68  	var t = 0;					// время
 69 	
 70 	//Пауза
 71 	pause_button.onclick = function() 
 72 	{
 73 		pause = !pause;  
 74 		if(pause == false)
 75 			pause_button.value = "Pause";
 76 		else
 77 			pause_button.value = "Run";
 78 	}
 79 	
 80 	var pause = false;
 81 	const stretch_graphics = 3;	
 82 	var help = stretch_graphics * canvasGraph.width; 	//масштабирование графиков по оси t 
 83 	
 84     // Запуск вычислений 
 85     function control() 
 86 	{
 87         if(!pause)
 88 		{
 89 			physics();
 90 			draw();
 91 			
 92 			if(t*help > canvasGraph.width)
 93 			{
 94 				t = 0;
 95 				context_g.clearRect(0, 0, canvasGraph.width, canvasGraph.height);
 96 				context_g_1.clearRect(0, 0, canvasGraph_1.width, canvasGraph_1.height);
 97 			}
 98 			 
 99 			draw_Graph_energy(t*help, (t + dt)*help);
100 			draw_Graph_angels();
101 			
102 			P0 = P1;
103 			K0 = K1;
104 			L0 = L1;
105 			E_p0 = E_p1;
106 			E_p1 = 0;
107 			L1 = 0;
108 			P1 = 0;
109 			K1 = 0;
110 			t += dt;
111 		}
112     }
113 
114 	//Физика - вычисление новых положений
115 	function physics() 
116 	{ 
117         for (var s = 1; s <= spf; s++) 
118         {	
119 			shaft[0].v = shaft[N-1].v;
120 			shaft[N].v = shaft[1].v;
121 			
122 			for (var i = 1; i < N; i++) 
123 			{
124 				shaft[i].M = - 2 * C * (shaft[i-1].v + 2 * shaft[i].v) - 2 * C * (2 * shaft[i].v + shaft[i+1].v);
125 			}
126 			
127 			for (var i = 1; i < N; i++) 
128 			{		
129 				shaft[i].w += shaft[i].M / Q * dt;
130 				shaft[i].v += shaft[i].w * dt;				
131 			}
132 			
133 			for (var i = 1; i < N; i++) 
134 			{	
135 				shaft[i].M = 0;
136 			}
137     	}
138     }
139 	 
140     //Отрисовка системы
141     function draw() 
142     {
143         context_s.clearRect(0, 0, canvasSystem.width, canvasSystem.height);  // очистить экран
144  
145         for (var i = 1; i < N; i++)
146 		{
147 			context_s.beginPath();
148 			context_s.moveTo(shaft[i].x - (a/2) * Math.sin(shaft[i].v), shaft[i].y - (a/2) * Math.cos(shaft[i].v));
149 			context_s.lineTo(shaft[i].x + (a/2) * Math.sin(shaft[i].v), shaft[i].y + (a/2) * Math.cos(shaft[i].v));
150 			context_s.closePath();
151 			context_s.stroke();
152         }
153     }
154 	
155 	// График углов
156 	function draw_Graph_angels()
157 	{
158 		var scale1 = canvasGraph_2.width / (N + 2);
159 		context_g_2.clearRect(0, 0, canvasGraph_2.width, canvasGraph_2.height);  // очистить экран
160 
161 		for(var i = 0; i < N; i++)
162 		{
163 			context_g_2.beginPath();
164 			context_g_2.moveTo(scale1 * (i+1), -shaft[i].v / (Pi/2) * canvasGraph_2.height / 2 + canvasGraph_2.height / 2);
165 			context_g_2.lineTo(scale1 * (i+2), -shaft[i+1].v / (Pi/2) * canvasGraph_2.height / 2 + canvasGraph_2.height / 2);
166 			context_g_2.closePath();
167 			context_g_2.stroke();
168 		}	
169 	}
170 	
171 	// Графики энергий
172 	function draw_Graph_energy(x0, x1)
173 	{		
174 		//потенциальная
175 		context_g_1.beginPath();
176 		context_g_1.strokeStyle = "#FF0000";
177 		context_g_1.moveTo(x0, -P0 / K_m * canvasGraph_1.height + canvasGraph_1.height);	
178 		
179 		for (var i = 1; i < N; i++)
180 		{
181 			P1 +=  C / 2 * (12 * shaft[i].v * shaft[i].v - ((shaft[i-1].v - shaft[i].v) * (shaft[i-1].v - shaft[i].v) + 
182 			(shaft[i].v - shaft[i+1].v) * (shaft[i].v - shaft[i+1].v)));
183 		}
184 		
185 		context_g_1.lineTo(x1, -P1 / K_m * canvasGraph_1.height + canvasGraph_1.height);
186 		context_g_1.closePath();
187 		context_g_1.stroke();
188 		
189 		//кинетическая
190 		context_g_1.beginPath();
191 		context_g_1.strokeStyle = "#000000";
192 		context_g_1.moveTo(x0, -K0 / K_m * canvasGraph_1.height + canvasGraph_1.height);	
193 		
194 		for (var i = 1; i < N; i++)
195 		{
196 			K1 += Q * shaft[i].w * shaft[i].w / 2;
197 		}
198 		
199 		context_g_1.lineTo(x1, -K1 / K_m * canvasGraph_1.height + canvasGraph_1.height);
200 		context_g_1.closePath();
201 		context_g_1.stroke();
202 		
203 		//полная
204 		context_g_1.beginPath();
205 		context_g_1.strokeStyle = "blue";
206 		context_g_1.moveTo(x0, -E_p0 / K_m * canvasGraph.height + canvasGraph.height);	
207 		
208 		E_p1 = K1 + P1;
209 
210 		context_g_1.lineTo(x1, -E_p1 / K_m * canvasGraph.height + canvasGraph.height);
211 		context_g_1.closePath();
212 		context_g_1.stroke();
213 		
214 		//Лагранжиан
215 		context_g.beginPath();
216 		context_g.strokeStyle = "orange";
217 		context_g.moveTo(x0, -L0 / K_m * canvasGraph.height / 2 + canvasGraph.height / 2);	
218 		
219 		L1 = K1 - P1;
220 
221 		context_g.lineTo(x1, -L1 / K_m * canvasGraph.height / 2 + canvasGraph.height / 2);
222 		context_g.closePath();
223 		context_g.stroke();
224 	}	
225 	
226     // Добавление системы из объектов
227     function addSystem(shaft)
228     {
229     	for (var i = 0; i < N + 1; i++) 
230 		{
231 			var shaft_new = [];
232 			shaft_new.x = scale * i;          
233 			shaft_new.y = canvasSystem.height / 2; 		
234 			shaft_new.v = 0;
235 			shaft_new.w = 0;	
236 			shaft_new.M = 0;
237 			shaft[shaft.length] = shaft_new;		   
238 		}
239 		
240 		K_m = 0;
241 		var average_w = 0;			// средняя скорость объектов
242 		// Задаем начальные условия
243 		for (var i = 0; i < N; i++)
244 		{	
245 			shaft[i].w = Math.random() * w_c;
246 			average_w += shaft[i].w;
247 		}
248 		
249 		average_w /= N;
250 	
251 		for (var i = 0; i < N; i++)
252 		{	
253 			shaft[i].w -= average_w;	
254 			K_m += Q * shaft[i].w * shaft[i].w / 2;
255 		}
256 		
257 		E_p0 = K_m;
258 		L0 = K_m;
259     }
260 	
261 	shaft = [];
262 	addSystem(shaft);  			//Добавление системы стержней
263 
264     setInterval(control, frequency);  
265 }

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 </head>
 5 <body>
 6 	<br>
 7 	<!-- ќбласть дл¤ рисовани¤ системы -->
 8 	<canvas id="canvasSystem" width="1200" height="300" style="border:1px solid #000000;"></canvas><br><br>
 9 
10 	Number of objects: <input type="number" id="number_of_objects" value="500" step=1 style="width: 5em">
11 	Diameter of beam: <input type="number" id="diameter" value="0.1" step=0.01 style="width: 5em">c.u.<br>
12 	Calculation speed: <input type="range" id="calcul_speed" value="100" step=0.01 min=10 max=300>
13 	<input type="button" id="restart" value="Restart">
14 	<input type="button" id="pause_button" value="Pause"><br><br>
15 	
16 	<!-- ќбласти дл¤ графика -->
17 	Graphics:<br>
18 	<canvas id="canvasGraph" width="600" height="300" style="border:1px solid #000000;"></canvas>
19 	<canvas id="canvasGraph_1" width="600" height="300" style="border:1px solid #000000;"></canvas><br>
20 	L<hr align="left" width="50" size="3" color="orange" />
21 	E<hr align="left" width="50" size="3" color="blue" />
22 	K<hr align="left" width="50" size="3" color="#000000" />
23 	P<hr align="left" width="50" size="3" color="#FF0000" /><br>
24 	Angles:<br>
25 	<canvas id="canvasGraph_2" width="1200" height="300" style="border:1px solid #000000;"></canvas><br>
26 	
27 	<script src="simulation.js"></script>
28 </body>
29 </html>