Цилиндр и наклонная плоскость (48.29) — различия между версиями
Материал из Department of Theoretical and Applied Mechanics
(→Разработка) |
(→Реализация на JavaScript) |
||
| Строка 45: | Строка 45: | ||
==Реализация на JavaScript== | ==Реализация на JavaScript== | ||
| − | |||
| − | |||
== Разработка == | == Разработка == | ||
Версия 12:44, 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>
