Задача из Яблонского Д24-13 — различия между версиями

Текущая версия на 17:30, 1 июня 2018

Содержание

1 Условие задачи
2 Визуализация процесса
3 Возможности программы
4 скачать код
5 Код программы

Условие задачи[править]

Определить частоты малых свободных колебаний и формы главных колебаний системы с двумя степенями свободы, пренебрегая силами сопротивления, массами пружин и моментами инерции скручиваемых валов.

Дано m1 = 30 кг , m2 = 30 кг, m3 = 10 кг , R = 0.4 м с1 = 2*104 H/рад , с1 = 2*104 H/рад , с2 = 1*104 H/рад , с3 = 2*104 H/м

Визуализация процесса[править]

Для моделирования колебаний данного маятника используется язык программирования JavaScript и следующие библиотеки:

three.js

dat.gui.js

stats.js

stats.min.js

CurveExtras1.js

Возможности программы[править]

Изменение параметров системы(массы тел и жесткости пружин);
Отрисовка графика смещения третьего тела (прямоугольник) относительно его первоначального положения;
Возможность перерисовки графика

скачать код[править]

Скачать работу zip.

Код программы[править]

Текст программы:

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title> D24_13</title>
  5     
  6     
  7     <script type="text/javascript" src=""http://tm.spbstu.ru/htmlets/polinovma\three.js"></script>
  8     <script type="text/javascript" src=""http://tm.spbstu.ru/htmlets/polinovma\stats.min.js"></script>
  9     <script type="text/javascript" src=""http://tm.spbstu.ru/htmlets/polinovma\dat.gui.js"></script>
 10 	<script type="text/javascript" src=""http://tm.spbstu.ru/htmlets/polinovma\CurveExtras1.js"></script>
 11     <style>
 12         body {
 13             /* set margin to 0 and overflow to hidden, to go fullscreen */
 14             margin: 0;
 15 /*             overflow: hidden; */
 16         }
 17     </style>
 18 </head>
 19 <body>
 20 
 21  <canvas id="canvas_example" width = 100 height = 200></canvas>
 22  <canvas id="canvas_example2" width = 1000 height = 200></canvas><br>
 23 
 24 <div id="Stats-output">
 25 </div>
 26 <!-- Div which will hold the Output -->
 27 <div id="WebGL-output">
 28 </div>
 29 
 30 <script type="text/javascript">
 31 
 32     function init() {
 33 
 34         var stats = initStats();
 35 
 36         // create a scene, that will hold all our elements such as objects, cameras and lights.
 37         var scene = new THREE.Scene();
 38 
 39         // create a camera, which defines where we're looking at.
 40         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 41 
 42         // create a render and set the size
 43         var renderer = new THREE.WebGLRenderer();
 44 
 45         renderer.setClearColor(new THREE.Color(0xEEEEEE));
 46         renderer.setSize(window.innerWidth, window.innerHeight);
 47         
 48         
 49         
 50         
 51         
 52         // create the ground plane
 53         var plane0Geometry = new THREE.PlaneGeometry(30, 20, 10, 20);
 54         var plane0Material = new THREE.MeshPhongMaterial({color: 0xF5F5F5	});
 55         var plane0 = new THREE.Mesh(plane0Geometry, plane0Material);
 56         plane0.receiveShadow = true;
 57 
 58 		//rotate and position the plane
 59 		        plane0.rotation.x = -0.5 * Math.PI;
 60         plane0.position.x = 8;
 61         plane0.position.y = 6;
 62         plane0.position.z = 5;
 63 
 64 		//add the plane to the scene
 65         scene.add(plane0);
 66         
 67         
 68     
 69         
 70         // create the ground plane
 71         var planeGeometry = new THREE.PlaneGeometry(30, 9, 10, 20);
 72         var planeMaterial = new THREE.MeshPhongMaterial({color: 0xa9a9a9});
 73         var plane = new THREE.Mesh(planeGeometry, planeMaterial);
 74         plane.receiveShadow = true;
 75 
 76 		//rotate and position the plane
 77         plane.position.x = 8;
 78         plane.position.y = 10;
 79         plane.position.z = 4;
 80 
 81 		//add the plane to the scene
 82         scene.add(plane);
 83         
 84         //creat a cylinder 1 (палка 1)
 85 		var cylinderGeometry = new THREE.CylinderGeometry(0.5, 0.5, 10, 32 );
 86 		var cylinderMaterial = new THREE.MeshLambertMaterial({color: 0xFF0000});
 87 		var cylinder = new THREE.Mesh( cylinderGeometry, cylinderMaterial );
 88 		cylinder.castShadow = true;
 89 		
 90 		//position the cylinder 1
 91 		cylinder.rotation.x = 0.5 * Math.PI;
 92 		cylinder.position.x = 5;
 93 		cylinder.position.y = 11;
 94 		cylinder.position.z = 4;
 95 		
 96 		//add the cylinder 1 to the scene
 97 		scene.add(cylinder) ;
 98 		
 99 		
100 		
101 		 //creat a block1 
102 		var cylinder1Geometry = new THREE.CylinderGeometry(2, 2, 1, 32 );
103 		var cylinder1Material = new THREE.MeshLambertMaterial({color: 0x666666});
104 		var cylinder1 = new THREE.Mesh( cylinder1Geometry, cylinder1Material );
105 		cylinder1.castShadow = true;
106 		
107 		//position the block1
108 		cylinder1.rotation.x = 0.5 * Math.PI;
109 		cylinder1.position.x = 5;
110 		cylinder1.position.y = 11;
111 		cylinder1.position.z = 12;
112 		
113 		//add the block1 to the scene
114 		scene.add(cylinder1) ;
115 		
116 		
117 		
118 		//creat a cylinder 2 (палка 2)
119 		var cylinder3Geometry = new THREE.CylinderGeometry(0.5, 0.5, 13.1, 32 );
120 		var cylinder3Material = new THREE.MeshLambertMaterial({color: 0xFF0000});
121 		var cylinder3 = new THREE.Mesh( cylinder3Geometry, cylinder3Material );
122 		cylinder3.castShadow = true;
123 		
124 		//position the cylinder 1
125 		cylinder3.rotation.x = 0.5 * Math.PI;
126 		cylinder3.position.x = 5;
127 		cylinder3.position.y = 11;
128 		cylinder3.position.z = 12;
129 		
130 		//add the cylinder 1 to the scene
131 		scene.add(cylinder3) ;
132 		
133 		//creat a block2 
134 		var cylinder4Geometry = new THREE.CylinderGeometry(1.5, 1.5, 1, 32 );
135 		var cylinder4Material = new THREE.MeshLambertMaterial({color: 0x666666});
136 		var cylinder4 = new THREE.Mesh( cylinder4Geometry, cylinder4Material );
137 		cylinder4.castShadow = true;
138 		
139 		//position the block 2
140 		cylinder4.rotation.x = 0.5 * Math.PI;
141 		cylinder4.position.x = 5;
142 		cylinder4.position.y = 11;
143 		cylinder4.position.z = 18;
144 		
145 		//add the block1 to the scene
146 		scene.add(cylinder4) ;
147 		
148 	    // create a cube 
149         var cubeGeometry = new THREE.BoxGeometry(5, 0.5, 1);
150         var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x666666});
151         var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
152         cube.castShadow = true;
153 
154  		// position the cube 1
155         cube.position.x = 5;
156         cube.position.y = 9.25;
157         cube.position.z = 18;
158       	
159 		// add the cube 1 to the scene
160         scene.add(cube);
161 		
162 		// create the ground plane 1
163         var plane1Geometry = new THREE.PlaneGeometry(1.25, 1.25, 10, 20);
164         var plane1Material = new THREE.MeshPhongMaterial({color: 0xa9a9a9});
165         var plane1 = new THREE.Mesh(plane1Geometry, plane1Material);
166         plane1.receiveShadow = true;
167 
168 		//rotate and position the plane 1
169         plane1.position.x = 10;
170         plane1.position.y = 9.25;
171         plane1.position.z = 18;
172         plane1.rotation.y = -0.5 * Math.PI;
173 
174 
175 		//add the plane to the scene
176         scene.add(plane1);
177 		
178 		// create the ground plane 2
179         var plane2Geometry = new THREE.PlaneGeometry(1.25, 1.25, 10, 20);
180         var plane2Material = new THREE.MeshPhongMaterial({color: 0xa9a9a9});
181         var plane2 = new THREE.Mesh(plane2Geometry, plane2Material);
182         plane2.receiveShadow = true;
183 
184 		//rotate and position the plane 2
185         plane2.position.x = 0;
186         plane2.position.y = 9.25;
187         plane2.position.z = 18;
188         plane2.rotation.y = -0.5 * Math.PI;
189 
190 
191 		//add the plane to the scene
192         scene.add(plane2);
193         
194          // position and point the camera to the center of the scene
195         camera.position.x = -5;
196         camera.position.y = 15;
197         camera.position.z = 38;
198         camera.lookAt(new THREE.Vector3(10, 5, 1));
199 
200 
201 		 // add subtle ambient lighting
202         var ambientLight = new THREE.AmbientLight(0x0c0c0c);
203         scene.add(ambientLight);
204 
205         // add spotlight for the shadows
206         var spotLight = new THREE.SpotLight(0xffffff);
207         spotLight.position.set(80, 50, 90);
208 
209         scene.add(spotLight);
210 
211         // add the output of the renderer to the html element
212         document.getElementById("WebGL-output").appendChild(renderer.domElement);
213         
214         
215         
216         var material0 = new THREE.MeshLambertMaterial( { color: 0xff00ff } );
217 	    var wireframeMaterial0 = new THREE.MeshBasicMaterial( { color: 0xf00000, opacity: 0.3, wireframe: true, transparent: true } );
218         var HelixCurve = new THREE.Curves.HelixCurve();
219         var springMaterial = new THREE.MeshBasicMaterial( { color: 0xff00ff } );
220         var tubeGeometry = new THREE.TubeBufferGeometry( HelixCurve, 100, 0.5, 3, false );
221         var spring = THREE.SceneUtils.createMultiMaterialObject( tubeGeometry, [ material0, wireframeMaterial0 ] );
222         spring.scale.z = 0.011;
223         spring.scale.y = 0.01;
224         spring.scale.x = 0.01;
225         
226         spring.rotation.y = 0.5 * Math.PI;
227         spring.position.x = 0.23;
228         spring.position.y = 9.25;
229         spring.position.z = 18;
230         spring.castShadow = true;
231 
232 		// add spring to playground
233         scene.add( spring );
234         
235         
236         
237         
238          var material01 = new THREE.MeshLambertMaterial( { color: 0xff00ff } );
239 	    var wireframeMaterial01 = new THREE.MeshBasicMaterial( { color: 0xf00000, opacity: 0.3, wireframe: true, transparent: true } );
240         var HelixCurve1 = new THREE.Curves.HelixCurve();
241         var springMaterial = new THREE.MeshBasicMaterial( { color: 0xff00ff } );
242         var tubeGeometry1 = new THREE.TubeBufferGeometry( HelixCurve1, 100, 0.5, 3, false );
243         var spring1 = THREE.SceneUtils.createMultiMaterialObject( tubeGeometry1, [ material01, wireframeMaterial01 ] );
244         spring1.scale.z = 0.011;
245         spring1.scale.y = 0.01;
246         spring1.scale.x = 0.01;
247         
248         spring1.rotation.y = -0.5 * Math.PI;
249         spring1.position.x = 10;
250         spring1.position.y = 9.25;
251         spring1.position.z = 18;
252         spring1.castShadow = true;
253 
254         scene.add( spring1 );
255 
256           // call the render function
257         var step = 0;
258         var scalingStep = 0;
259 
260           
261         var controls = new function () {
262         	this.t = 1;
263         	
264         	this.c1 = 2*10000;
265         	this.c2 = 2*10000;
266         	this.c3 = 2*10000;
267         	this.R = 0.5;
268         	// this.R1 = 0.7;
269 
270             this.m1 = 30;
271             this.m2 = 30;
272             this.m3 = 30;
273             
274             
275             this.a11 = 1/2 * this.m1 * this.R * this.R;
276             this.a22 = 9/32*(this.m2 + this.m3)*this.R * this.R;
277             this.c11 = this.c1 + this.c2;
278             this.c22 = this.c2 + 9/8 * this.c3* this.R * this.R;
279             this.c12 = -1* this.c2;
280 			this.D = Math.sqrt((this.a11 * this.c22 + this.a22 * this.c11)*(this.a11 * this.c22 + this.a22 * this.c11) -4*this.a11 * this.a22*(this.c11 * this.c22 - this.c12 * this.c12));
281             this.k1 = '' + Math.sqrt((this.a11 * this.c22 + this.a22 * this.c11 + this.D)/(2*this.a11*this.a22));
282             this.k2 = '' + Math.sqrt((this.a11 * this.c22 + this.a22 * this.c11 - this.D)/(2*this.a11*this.a22));
283                         
284             this.redraw = function() 
285             {
286             step = 0;    
287             };
288             
289             }; 
290             
291         
292          var gui = new dat.GUI();
293   
294 	    guiweight = gui.addFolder('weight');
295         guiweight.add(controls, 'm1',1,60).onChange(controls.redraw)  ;
296         guiweight.add(controls, 'm2',1,60).onChange(controls.redraw) ; 
297         guiweight.add(controls, 'm3',1,60).onChange(controls.redraw) ;
298     	
299         guistiffness = gui.addFolder('stiffness');
300         guistiffness.add(controls, 'c1',0*10000,4*10000).onChange(controls.redraw) ; 
301         guistiffness.add(controls, 'c2',0*10000,4*10000).onChange(controls.redraw) ; 
302         guistiffness.add(controls, 'c3',0*10000,4*10000).onChange(controls.redraw) ; 
303 
304 
305         gui.add(controls, 'k1').listen() ; 
306         gui.add(controls, 'k2').listen() ;
307 		gui.add(controls, 'redraw');
308 		controls.redraw();
309         
310         render();
311 //         controls.redraw();
312         
313  		function render() {
314             stats.update();
315             
316             controls.a11 = 1/2 * controls.m1 * controls.R * controls.R;
317             controls.a22 = 9/32*(controls.m2 + controls.m3)*controls.R * controls.R;
318             controls.c11 = controls.c1 + controls.c2;
319             controls.c22 = controls.c2 + 9/8 * controls.c3* controls.R * controls.R;
320             controls.c12 = -1* controls.c2;
321 			controls.D = Math.sqrt((controls.a11 * controls.c22 + controls.a22 * controls.c11)*(controls.a11 * controls.c22 + controls.a22 * controls.c11) -4*controls.a11 * controls.a22*(controls.c11 * controls.c22 - controls.c12 * controls.c12));
322             controls.k1 = Math.sqrt((controls.a11 * controls.c22 + controls.a22 * controls.c11 + controls.D)/(2*controls.a11*controls.a22));
323             controls.k2 = Math.sqrt((controls.a11 * controls.c22 + controls.a22 * controls.c11 - controls.D)/(2*controls.a11*controls.a22));
324             
325             
326             
327             
328 
329  
330 
331  
332 //  ///////
333  
334 	var w = canvas_example2.width;
335 	var h = canvas_example2.height;
336 	
337 	var cty = canvas_example2.getContext('2d');
338 	var w2 = canvas_example2.width;
339 	var h2 = canvas_example2.height;
340 	
341 	
342 	
343 	cty.lineWidth = "0.004";
344 // 
345 		cty.moveTo(0, 0 *h/12);
346 	cty.lineTo(w, 0 * h/12);
347 			cty.moveTo(0, 1 *h/12);
348 	cty.lineTo(w, 1 * h/12);
349 		cty.moveTo(0, 2 *h/12);
350 	cty.lineTo(w, 2 * h/12);
351 			cty.moveTo(0, 3 *h/12);
352 	cty.lineTo(w, 3 * h/12);
353 		cty.moveTo(0, 4 *h/12);
354 	cty.lineTo(w, 4 * h/12);
355 			cty.moveTo(0, 5 *h/12);
356 	cty.lineTo(w, 5 * h/12);
357 			cty.moveTo(0, 6 *h/12);
358 	cty.lineTo(w, 6 * h/12);
359 			cty.moveTo(0, 7 *h/12);
360 	cty.lineTo(w, 7 * h/12);
361 			cty.moveTo(0, 8 *h/12);
362 	cty.lineTo(w, 8 * h/12);
363 			cty.moveTo(0, 9 *h/12);
364 	cty.lineTo(w, 9 * h/12);
365 			cty.moveTo(0, 10 *h/12);
366 	cty.lineTo(w, 10 * h/12);
367 			cty.moveTo(0, 11 *h/12);
368 	cty.lineTo(w, 11 * h/12);
369 			cty.moveTo(0, 12 *h/12);
370 	cty.lineTo(w, 12 * h/12);
371 // 
372 	
373 // 
374 		cty.moveTo(w/10, 0);
375 	cty.lineTo(w/10,h);
376 		cty.moveTo(2*w/10, 0);
377 	cty.lineTo(w/5,h);
378 		cty.moveTo(3*w/10, 0);
379 	cty.lineTo(3*w/10,h);
380 		cty.moveTo(4*w/10, 0);
381 	cty.lineTo(4*w/10,h);
382 		cty.moveTo(5*w/10, 0);
383 	cty.lineTo(5*w/10,h);
384 		cty.moveTo(6*w/10, 0);
385 	cty.lineTo(6*w/10,h);
386 		cty.moveTo(7*w/10, 0);
387 	cty.lineTo(7*w/10,h);
388 		cty.moveTo(8*w/10, 0);
389 	cty.lineTo(8*w/10,h);
390 	    cty.moveTo(9*w/10, 0);
391 	cty.lineTo(9*w/10,h);
392 // 	
393 	
394 	cty.stroke();
395 	
396 	
397 	
398 	
399 	cty.strokeRect(0,0,w2,h2);
400 	
401 	if (step == 0) {
402 	cty.clearRect(0, 0, w2, h2);
403 	} 
404 	
405     // график
406     cty.lineWidth="2";              // ширина линии
407     cty.beginPath();
408     if (step == 0) {
409     cty.moveTo(0, h/2); }
410     else {
411     cty.moveTo((step -0.5)/4, 99.5-50*controls.R *(-0.7 *Math.sin(controls.k1*step*0.0003)+ 1.9*Math.sin(controls.k2*step*0.0003)));
412     }
413 // 	cty.moveTo(2, h/2);
414     cty.lineTo(step/4, 100-50*controls.R *(-0.7 *Math.sin(controls.k1*step*0.0003)+ 1.9*Math.sin(controls.k2*step*0.0003)));
415     cty.stroke();
416 
417 
418             
419             step += controls.t;
420             var q = cube.position.x;
421             cube.position.x = 5 +0.75*controls.R*(-0.7 *Math.sin(controls.k1*step*0.0003) + 1.9*Math.sin(controls.k2*step*0.0003));
422 		    cylinder4.rotation.y = (-0.7 *Math.sin(controls.k1*step*0.0003) + 1.9*Math.sin(controls.k2*step*0.0003));
423 		    		    cylinder3.rotation.y = (-0.7*Math.sin(controls.k1*step*0.0003) + 1.9 * Math.sin(controls.k2*step*0.0003));
424 		    cylinder1.rotation.y = (Math.sin(controls.k1*step*0.0003) + Math.sin(controls.k2*step*0.0003));
425 		    		    cylinder.rotation.y = (Math.sin(controls.k1*step*0.0003) + Math.sin(controls.k2*step*0.0003));
426 
427             spring1.scale.z = 0.011 - 0.005*( 0.75*controls.R*(-0.7 * Math.sin(controls.k1*step*0.0003) +1.9 * Math.sin(controls.k2*step*0.0003)));
428             spring.scale.z = 0.011 + 0.005*( 0.75*controls.R*(-0.7 * Math.sin(controls.k1*step*0.0003) + 1.9 * Math.sin(controls.k2*step*0.0003)));
429 
430           
431             
432              // render using requestAnimationFrame
433             requestAnimationFrame(render);
434             renderer.render(scene, camera);
435             
436   
437         }
438         
439          function initStats() {
440 
441             var stats = new Stats();
442 
443             stats.setMode(0); // 0: fps, 1: ms
444 
445             // Align top-left
446             stats.domElement.style.position = 'absolute';
447             stats.domElement.style.left = '0px';
448             stats.domElement.style.top = '0px';
449 
450             document.getElementById("Stats-output").appendChild(stats.domElement);
451 
452             return stats;
453         }
454 
455     }
456     window.onload = init
457 </script>
458 </body>
459 </html>

@@ Строка 1: / Строка 1: @@
+==Условие задачи ==
+Определить частоты малых свободных колебаний и формы главных колебаний системы с двумя степенями свободы, пренебрегая силами сопротивления, массами пружин и моментами инерции скручиваемых валов.
+Дано
+m1 = 30 кг , m2 = 30 кг, m3 = 10 кг , R = 0.4 м  с1 = 2*104 H/рад , с1 = 2*104 H/рад , с2 = 1*104 H/рад , с3 = 2*104 H/м
+==Визуализация процесса==
+Для моделирования колебаний данного маятника используется язык программирования JavaScript и следующие библиотеки:
+*three.js
+*dat.gui.js
+*stats.js
+*stats.min.js
+*CurveExtras1.js
+== Возможности программы ==
+* Изменение параметров системы(массы тел и жесткости пружин);
+* Отрисовка графика смещения третьего тела (прямоугольник) относительно его первоначального положения;
+* Возможность перерисовки графика
+{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/polinovma/project__threejs.html |width=1000 |height=600}}
+==скачать код==
+*  [http://mech.spbstu.ru/File:Project__threejs.zip  Скачать работу zip].
 == Код программы ==
 <div class="mw-collapsible mw-collapsed">

Задача из Яблонского Д24-13 — различия между версиями

Текущая версия на 17:30, 1 июня 2018

Содержание

Условие задачи[править]

Визуализация процесса[править]

Возможности программы[править]

скачать код[править]

Код программы[править]

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Навигация

Инструменты

Поделиться