Задача Д.24, вариант 20 из Задачника Яблонского
Материал из Department of Theoretical and Applied Mechanics
Версия от 21:46, 31 мая 2018; Kaloeva diana (обсуждение | вклад)
Условие задачи
Определить частоты малых свободных колебаний и формы главных колебаний системы с двумя степенями свободы, пренебрегая силами сопротивления, массами пружин и моментами инерции скручиваемых валов.
Программа
Код программы
Текст программы:
1 <!DOCTYPE html>
2
3 <html>
4
5 <head>
6 <title> D24_13</title>
7
8
9 <script type="text/javascript" src="three.js"></script>
10 <script type="text/javascript" src="stats.min.js"></script>
11 <script type="text/javascript" src="dat.gui.js"></script>
12 <script type="text/javascript" src="CurveExtras1.js"></script>
13 <script type="text/javascript" src="OrbitControls.js"></script>
14 <style>
15 body {
16 /* set margin to 0 and overflow to hidden, to go fullscreen */
17 margin: 0;
18 /* overflow: hidden; */
19 }
20 </style>
21 </head>
22 <body>
23 <canvas id="canvas_example" width = 100 height = 200></canvas>
24 <canvas id="canvas_example2" width = 1000 height = 200></canvas><br>
25 <div id="Stats-output">
26 </div>
27 <!-- Div which will hold the Output -->
28 <div id="WebGL-output">
29 </div>
30
31 <script type="text/javascript">
32
33 function init() {
34
35 var stats = initStats();
36
37 // create a scene, that will hold all our elements such as objects, cameras and lights.
38 var scene = new THREE.Scene();
39
40 // create a camera, which defines where we're looking at.
41 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
42
43 // create a render and set the size
44 var renderer = new THREE.WebGLRenderer();
45
46 renderer.setClearColor(new THREE.Color(0xEEEEEE));
47 renderer.setSize(window.innerWidth, window.innerHeight);
48
49 var orbitControls = new THREE.OrbitControls(camera);
50 orbitControls.autoRotate = true;
51
52 var planeGeometry = new THREE.PlaneGeometry(10,20,1,1);
53 var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
54 var plane1 = new THREE.Mesh(planeGeometry,planeMaterial);
55 var plane2 = new THREE.Mesh(planeGeometry,planeMaterial);
56
57 plane1.rotation.y = -0.5*Math.PI;
58 plane1.position.x = -10;
59 scene.add(plane1);
60 plane1.receiveShadow = true;
61
62 plane2.rotation.y = -0.5*Math.PI;
63 plane2.position.x = 10;
64 scene.add(plane2);
65 plane2.receiveShadow = true;
66
67 var cubeGeometry1 = new THREE.CubeGeometry(18,7,5);
68 var cubeMaterial1 = new THREE.MeshLambertMaterial({color: 0xffff00});
69 var cube1 = new THREE.Mesh(cubeGeometry1, cubeMaterial1);
70 cube1.castShadow = true;
71
72 var cubeGeometry2 = new THREE.CubeGeometry(17.5,1,2);
73 var cubeMaterial2 = new THREE.MeshLambertMaterial({color: 0x00ffff});
74 var cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2);
75 cube2.castShadow = true;
76 cube2.position.x = 3.75;
77 cube2.position.y = 20;
78 cube2.geometry.translate(-3.75,0,0);
79 scene.add(cube2);
80
81 var cylinderGeometry = new THREE.CylinderGeometry(0.5, 0.5, 3, 30, 30);
82 var cylinderMaterial = new THREE.MeshLambertMaterial({color: 0xffff00});
83 var cylinder1 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
84 cylinder1.rotation.x = -0.5*Math.PI;
85 cylinder1.position.x = -9.5;
86 cylinder1.position.y = -2.5;
87 cylinder1.castShadow = true;
88
89 var cylinder2 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
90 cylinder2.rotation.x = -0.5*Math.PI;
91 cylinder2.position.x = -9.5;
92 cylinder2.position.y = 2.5;
93 cylinder2.castShadow = true;
94
95 var cylinder3 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
96 cylinder3.rotation.x = -0.5*Math.PI;
97 cylinder3.position.x = 9.5;
98 cylinder3.position.y = -2.5;
99 cylinder3.castShadow = true;
100 //scene.add(cylinder3);
101
102 var cylinder4 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
103 cylinder4.rotation.x = -0.5*Math.PI;
104 cylinder4.position.x = 9.5;
105 cylinder4.position.y = 2.5;
106 cylinder4.castShadow = true;
107 //scene.add(cylinder4);
108
109 var cylinderGeometry1 = new THREE.CylinderGeometry(0.5, 1.5, 2, 4, 4);
110 var cylinder5 = new THREE.Mesh(cylinderGeometry1, cylinderMaterial);
111 cylinder5.rotation.y = -1.25*Math.PI;
112 cylinder5.position.x = 3.75;
113 cylinder5.position.y = 18.5;
114 cylinder5.castShadow = true;
115 scene.add(cylinder5);
116
117 var material = new THREE.MeshLambertMaterial( { color: 0xff00ff } );
118 var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0xf00000, opacity: 0.3, wireframe: true, transparent: true } );
119 var HelixCurve = new THREE.Curves.HelixCurve(10);
120 var springMaterial = new THREE.MeshBasicMaterial( { color: 0xff00ff } );
121 var tubeGeometry = new THREE.TubeBufferGeometry(HelixCurve, 100, 0.5, 3, false);
122 var spring1 = THREE.SceneUtils.createMultiMaterialObject( tubeGeometry, [ material, wireframeMaterial] );
123 var spring2 = THREE.SceneUtils.createMultiMaterialObject( tubeGeometry, [ material, wireframeMaterial] );
124
125 spring1.scale.x = 0.02;
126 spring1.scale.y = 0.02;
127 spring1.scale.z = 0.1;
128 spring1.rotation.x = -0.5 * Math.PI;
129 spring1.position.x = 8;
130 //spring1.position.y = 20;
131 spring1.castShadow = true;
132 //scene.add( spring1 );
133
134 spring2.scale.x = 0.02;
135 spring2.scale.y = 0.02;
136 spring2.scale.z = 0.1;
137 spring2.rotation.x = -0.5 * Math.PI;
138 spring2.position.x = -7.5;
139 //spring2.position.y = 20;
140 spring2.castShadow = true;
141 //scene.add( spring2 );
142
143 var group1 = new THREE.Object3D();
144 group1.add(cube1);
145 group1.add(cylinder1);
146 group1.add(cylinder2);
147 group1.add(cylinder3);
148 group1.add(cylinder4);
149 group1.add(spring1);
150 group1.add(spring2);
151 //group1.position.y = 22;
152 scene.add(group1);
153
154 camera.position.x = -20;
155 camera.position.y = 10;
156 camera.position.z = 80;
157 camera.lookAt(new THREE.Vector3(10, 5, 1));
158
159
160 var ambientLight = new THREE.AmbientLight(0x0c0c0c);
161 scene.add(ambientLight);
162
163 var spotLight = new THREE.SpotLight(0xffffff);
164 spotLight.position.set(-20,10,80);
165
166 scene.add(spotLight);
167
168 document.getElementById("WebGL-output").appendChild(renderer.domElement);
169
170 var step = 0;
171 var scalingStep = 0;
172
173 var controls = new function () {
174 this.t = 1;
175
176 this.c1 = 40*100;
177 this.c2 = 60*100;
178 this.l = 0.5;
179
180 this.m1 = 8;
181 this.m2 = 10;
182
183
184 this.a11 = this.m2;
185 this.a22 = 19/12 * this.m1 * this.l * this.l;
186 this.c11 = this.c1 + this.c2;
187 this.c22 = 6.25 * this.c1 * this.l * this.l + this.c2* this.l * this.l;
188 this.c12 = (2 * this.c2 * this.l - 5 * this.c1 * this.l)/2;
189 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));
190 this.k1 = '' + Math.sqrt((this.a11 * this.c22 + this.a22 * this.c11 + this.D)/(2*this.a11*this.a22));
191 this.k2 = '' + Math.sqrt((this.a11 * this.c22 + this.a22 * this.c11 - this.D)/(2*this.a11*this.a22));
192
193
194 this.redraw = function() {
195 step = 0;
196 };
197 };
198
199
200 var gui = new dat.GUI();
201
202 gui.add(controls, 'm1',5,20).onChange(controls.redraw) ;
203 gui.add(controls, 'm2',5,20).onChange(controls.redraw) ;
204 gui.add(controls, 'c1',0*100,100*100).onChange(controls.redraw) ;
205 gui.add(controls, 'c2',0*100,100*100).onChange(controls.redraw) ;
206
207 gui.add(controls, 'k1').listen() ;
208 gui.add(controls, 'k2').listen() ;
209 gui.add(controls, 'redraw');
210 controls.redraw();
211
212 render();
213
214 function render() {
215 stats.update();
216
217 controls.a11 = controls.m2;
218 controls.a22 = 19/12 * controls.m1 * controls.l * controls.l;
219 controls.c11 = controls.c1 + controls.c2;
220 controls.c22 = 6.25 * controls.c1 * controls.l * controls.l + controls.c2* controls.l * controls.l;
221 controls.c12 = (2 * controls.c2 * controls.l - 5 * controls.c1 * controls.l)/2;
222 controls.D = Math.sqrt((controls.a11 * controls.c22 + controls.a22 * controls.c11)*(controls.a11 * controls.c22 + controls.a22 * controls.c11)
223 -4*controls.a11 * controls.a22*(controls.c11 * controls.c22 - controls.c12 * controls.c12));
224 controls.k1 = '' + Math.sqrt((controls.a11 * controls.c22 + controls.a22 * controls.c11 + controls.D)/(2*controls.a11*controls.a22));
225 controls.k2 = '' + Math.sqrt((controls.a11 * controls.c22 + controls.a22 * controls.c11 - controls.D)/(2*controls.a11*controls.a22));
226
227
228 var cty = canvas_example2.getContext("2d");
229 var w = canvas_example2.width;
230 var h = canvas_example2.height;
231
232 cty.lineWidth = "0.04";
233 cty.moveTo(0, h/2);
234 cty.lineTo(w, h/2);
235 cty.moveTo(0, 0);
236 cty.lineTo(0,h);
237 cty.stroke();
238 //cty.strokeRect(0,0,w,h);
239
240 if (step == 0) {
241 cty.clearRect(0, 0, w, h);
242 }
243
244 var x = 100-5*(3.5 * Math.sin(controls.k1*step*0.0003) -3.74 * Math.sin(controls.k2*step*0.0003));
245 cty.lineWidth="2";
246 cty.beginPath();
247 if (step == 0) {
248 cty.moveTo(0, h/2); }
249 else {
250 cty.moveTo((step -1)/4, x);
251 }
252 cty.lineTo(step/4, x);
253 cty.stroke();
254
255 step += controls.t;
256
257 cube2.rotation.z = 0.2*Math.sin(controls.k1*step*0.0003) - 0.2*Math.sin(controls.k2*step*0.0003);
258 group1.position.y = 0.75*(3.5 * Math.sin(controls.k1*step*0.0003) -3.74 * Math.sin(controls.k2*step*0.0003));
259 spring1.scale.z = 0.1 - 0.008*( 0.75*controls.l*(3.5 * Math.sin(controls.k1*step*0.0003) - 3.74 * Math.sin(controls.k2*step*0.0003)));
260 spring2.scale.z = 0.1 - 0.02*( 0.75*controls.l*(3.5 * Math.sin(controls.k1*step*0.0003) - 3.74 * Math.sin(controls.k2*step*0.0003)));
261
262 requestAnimationFrame(render);
263 renderer.render(scene, camera);
264 }
265
266 function initStats() {
267 var stats = new Stats();
268 stats.setMode(0); // 0: fps, 1: ms
269 stats.domElement.style.position = 'absolute';
270 stats.domElement.style.left = '0px';
271 stats.domElement.style.top = '0px';
272
273 document.getElementById("Stats-output").appendChild(stats.domElement);
274 return stats;
275 }
276 }
277 window.onload = init
278 </script>
279 </body>
280 </html>
Используемые библиотеки
- three.js
- jquery-1.9.0.js
- stats.js
- dat.gui.js
- OrbitControls.js
