Задача из Яблонского Д24-13
Материал из Department of Theoretical and Applied Mechanics
Условие задачи
Определить частоты малых свободных колебаний и формы главных колебаний системы с двумя степенями свободы, пренебрегая силами сопротивления, массами пружин и моментами инерции скручиваемых валов.
Дано 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
Код программы
Текст программы:
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>
