Цилиндр и наклонная плоскость (48.29) — различия между версиями
Материал из Department of Theoretical and Applied Mechanics
(→Решение задачи) |
(→Разработка) |
||
Строка 55: | Строка 55: | ||
<syntaxhighlight lang="javascript" line start="1" enclose="div"> | <syntaxhighlight lang="javascript" line start="1" enclose="div"> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
− | + | ||
− | + | <html> | |
− | <title> | + | |
− | <script type="text/javascript" src=" | + | <head> |
− | <script type="text/javascript" src=" | + | <title>Example 05.01 - Basic 2D geometries - Plane</title> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\three.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\OBJLoader.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\MTLLoader.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\OBJMTLLoader.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\jquery-1.9.0.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\stats.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\dat.gui.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\chroma.js"></script> |
− | + | <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\TrackballControls.js"></script> | |
+ | <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\OrbitControls.js"></script> | ||
+ | <style> | ||
+ | body { | ||
+ | /* set margin to 0 and overflow to hidden, to go fullscreen */ | ||
+ | margin: 0; | ||
+ | overflow: hidden; | ||
+ | } | ||
</style> | </style> | ||
− | + | </head> | |
− | + | <body> | |
− | + | <div id="Stats-output"> | |
− | + | </div> | |
+ | <!-- Div which will hold the Output --> | ||
+ | <div id="WebGL-output"> | ||
+ | </div> | ||
− | + | <!-- Javascript code that runs our Three.js examples --> | |
− | + | <script type="text/javascript"> | |
+ | // once everything is loaded, we run our Three.js stuff. | ||
+ | $(function () { | ||
− | + | var stats = initStats(); | |
− | + | // create a scene, that will hold all our elements such as objects, cameras and lights. | |
− | + | var scene = new THREE.Scene(); | |
− | + | ||
− | + | // create a camera, which defines where we're looking at. | |
− | + | var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); | |
− | + | ||
− | + | // create a render and set the size | |
− | + | var webGLRenderer = new THREE.WebGLRenderer(); | |
− | + | webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0)); | |
− | + | webGLRenderer.setSize(window.innerWidth, window.innerHeight); | |
− | + | webGLRenderer.shadowMapEnabled = true; | |
− | + | ||
− | + | var plane = createMesh(new THREE.PlaneGeometry(10, 14, 4, 4)); | |
− | + | // add the sphere to the scene | |
− | + | scene.add(plane); | |
− | + | ||
− | + | // position and point the camera to the center of the scene | |
− | + | camera.position.x = -20; | |
− | + | camera.position.y = 30; | |
− | + | camera.position.z = 40; | |
− | + | camera.lookAt(new THREE.Vector3(10, 0, 0)); | |
− | + | ||
− | + | ||
− | + | // add spotlight for the shadows | |
− | + | var spotLight = new THREE.SpotLight(0xffffff); | |
− | + | spotLight.position.set(-40, 60, -10); | |
− | + | scene.add(spotLight); | |
− | + | ||
− | + | // add the output of the renderer to the html element | |
− | + | $("#WebGL-output").append(webGLRenderer.domElement); | |
− | + | ||
− | + | // call the render function | |
− | + | var step = 0; | |
− | + | ||
− | + | ||
− | + | // setup the control gui | |
− | + | var controls = new function () { | |
− | + | // we need the first child, since it's a multimaterial | |
− | + | ||
− | + | ||
− | + | this.width = plane.children[0].geometry.width; | |
− | + | this.height = plane.children[0].geometry.height; | |
− | + | ||
− | + | this.widthSegments = plane.children[0].geometry.widthSegments; | |
− | + | this.heightSegments = plane.children[0].geometry.heightSegments; | |
− | + | ||
− | + | this.redraw = function () { | |
− | + | // remove the old plane | |
− | + | scene.remove(plane); | |
− | + | // create a new one | |
− | + | plane = createMesh(new THREE.PlaneGeometry(controls.width, controls.height, Math.round(controls.widthSegments), Math.round(controls.heightSegments))); | |
− | + | // add it to the scene. | |
− | + | scene.add(plane); | |
− | + | }; | |
− | + | } | |
− | + | ||
− | + | var gui = new dat.GUI(); | |
− | + | gui.add(controls, 'width', 0, 40).onChange(controls.redraw); | |
− | + | gui.add(controls, 'height', 0, 40).onChange(controls.redraw); | |
− | + | ; | |
− | + | gui.add(controls, 'widthSegments', 0, 10).onChange(controls.redraw); | |
+ | ; | ||
+ | gui.add(controls, 'heightSegments', 0, 10).onChange(controls.redraw); | ||
+ | ; | ||
+ | |||
+ | |||
+ | render(); | ||
+ | |||
+ | function createMesh(geom) { | ||
+ | |||
+ | // assign two materials | ||
+ | var meshMaterial = new THREE.MeshNormalMaterial(); | ||
+ | meshMaterial.side = THREE.DoubleSide; | ||
+ | var wireFrameMat = new THREE.MeshBasicMaterial(); | ||
+ | wireFrameMat.wireframe = true; | ||
+ | |||
+ | // create a multimaterial | ||
+ | var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]); | ||
+ | |||
+ | return plane; | ||
+ | } | ||
+ | |||
+ | function render() { | ||
+ | stats.update(); | ||
+ | |||
+ | plane.rotation.y = step += 0.01; | ||
+ | |||
+ | // render using requestAnimationFrame | ||
+ | requestAnimationFrame(render); | ||
+ | webGLRenderer.render(scene, camera); | ||
+ | } | ||
+ | |||
+ | function initStats() { | ||
+ | |||
+ | var stats = new Stats(); | ||
+ | stats.setMode(0); // 0: fps, 1: ms | ||
+ | |||
+ | // Align top-left | ||
+ | stats.domElement.style.position = 'absolute'; | ||
+ | stats.domElement.style.left = '0px'; | ||
+ | stats.domElement.style.top = '0px'; | ||
+ | |||
+ | $("#Stats-output").append(stats.domElement); | ||
+ | |||
+ | return stats; | ||
+ | } | ||
+ | }); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</script> | </script> | ||
</body> | </body> |
Версия 12:38, 22 декабря 2017
- "Задача - Мещерский (48.29)"
Условие
На гладкой горизонтальной плоскости помещена треугольная призма ABC массы m, которая может скользить без трения по этой плоскости; по грани призмы AB катится без скольжения однородный круглый цилиндр массы m1. Определить ускорение призмы.
Решение задачи
Используем уравнение Лагранжа 2-го рода:
, где
L = T - П - функция Лагранжа T - кинетическая энергия системы П - потенциальная энергия системы q - независимые обобщенные координаты Q - непотенциальная обобщённая сила
В данной задаче в качестве обобщенных координат примем изменяющиеся координату призмы
и координату цилиндра по оси, направленной вдоль наклонной плоскости . Представим:, где - кинетическая энергия катка массы , а - треугольной призмы массы .
Треугольная призма откатывается вдоль оси
, следовательно:
Движение цилиндра массы
плоское.
Где
- абсолютная скорость центра масс цилиндра массой :
Здесь
- относительная скорость
Получаем два равенства, соответствующие двум уравнениям Лагранжа:
Откуда получаем:
Реализация на JavaScript
Разработка
Текст программы на языке JavaScript (разработчик Вараев Владислав):
Файл "4829.html"
1 <!DOCTYPE html>
2
3 <html>
4
5 <head>
6 <title>Example 05.01 - Basic 2D geometries - Plane</title>
7 <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\three.js"></script>
8 <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\OBJLoader.js"></script>
9 <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\MTLLoader.js"></script>
10 <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\OBJMTLLoader.js"></script>
11 <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\jquery-1.9.0.js"></script>
12 <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\stats.js"></script>
13 <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\dat.gui.js"></script>
14 <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\chroma.js"></script>
15 <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\TrackballControls.js"></script>
16 <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\OrbitControls.js"></script>
17 <style>
18 body {
19 /* set margin to 0 and overflow to hidden, to go fullscreen */
20 margin: 0;
21 overflow: hidden;
22 }
23 </style>
24 </head>
25 <body>
26
27 <div id="Stats-output">
28 </div>
29 <!-- Div which will hold the Output -->
30 <div id="WebGL-output">
31 </div>
32
33 <!-- Javascript code that runs our Three.js examples -->
34 <script type="text/javascript">
35
36 // once everything is loaded, we run our Three.js stuff.
37 $(function () {
38
39 var stats = initStats();
40
41 // create a scene, that will hold all our elements such as objects, cameras and lights.
42 var scene = new THREE.Scene();
43
44 // create a camera, which defines where we're looking at.
45 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
46
47 // create a render and set the size
48 var webGLRenderer = new THREE.WebGLRenderer();
49 webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
50 webGLRenderer.setSize(window.innerWidth, window.innerHeight);
51 webGLRenderer.shadowMapEnabled = true;
52
53 var plane = createMesh(new THREE.PlaneGeometry(10, 14, 4, 4));
54 // add the sphere to the scene
55 scene.add(plane);
56
57 // position and point the camera to the center of the scene
58 camera.position.x = -20;
59 camera.position.y = 30;
60 camera.position.z = 40;
61 camera.lookAt(new THREE.Vector3(10, 0, 0));
62
63
64 // add spotlight for the shadows
65 var spotLight = new THREE.SpotLight(0xffffff);
66 spotLight.position.set(-40, 60, -10);
67 scene.add(spotLight);
68
69 // add the output of the renderer to the html element
70 $("#WebGL-output").append(webGLRenderer.domElement);
71
72 // call the render function
73 var step = 0;
74
75
76 // setup the control gui
77 var controls = new function () {
78 // we need the first child, since it's a multimaterial
79
80
81 this.width = plane.children[0].geometry.width;
82 this.height = plane.children[0].geometry.height;
83
84 this.widthSegments = plane.children[0].geometry.widthSegments;
85 this.heightSegments = plane.children[0].geometry.heightSegments;
86
87 this.redraw = function () {
88 // remove the old plane
89 scene.remove(plane);
90 // create a new one
91 plane = createMesh(new THREE.PlaneGeometry(controls.width, controls.height, Math.round(controls.widthSegments), Math.round(controls.heightSegments)));
92 // add it to the scene.
93 scene.add(plane);
94 };
95 }
96
97 var gui = new dat.GUI();
98 gui.add(controls, 'width', 0, 40).onChange(controls.redraw);
99 gui.add(controls, 'height', 0, 40).onChange(controls.redraw);
100 ;
101 gui.add(controls, 'widthSegments', 0, 10).onChange(controls.redraw);
102 ;
103 gui.add(controls, 'heightSegments', 0, 10).onChange(controls.redraw);
104 ;
105
106
107 render();
108
109 function createMesh(geom) {
110
111 // assign two materials
112 var meshMaterial = new THREE.MeshNormalMaterial();
113 meshMaterial.side = THREE.DoubleSide;
114 var wireFrameMat = new THREE.MeshBasicMaterial();
115 wireFrameMat.wireframe = true;
116
117 // create a multimaterial
118 var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
119
120 return plane;
121 }
122
123 function render() {
124 stats.update();
125
126 plane.rotation.y = step += 0.01;
127
128 // render using requestAnimationFrame
129 requestAnimationFrame(render);
130 webGLRenderer.render(scene, camera);
131 }
132
133 function initStats() {
134
135 var stats = new Stats();
136 stats.setMode(0); // 0: fps, 1: ms
137
138 // Align top-left
139 stats.domElement.style.position = 'absolute';
140 stats.domElement.style.left = '0px';
141 stats.domElement.style.top = '0px';
142
143 $("#Stats-output").append(stats.domElement);
144
145 return stats;
146 }
147 });
148
149
150 </script>
151 </body>
152 </html>