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