Цилиндр и наклонная плоскость (48.29) — различия между версиями
Материал из Department of Theoretical and Applied Mechanics
(→Реализация на JavaScript) |
(→Реализация на JavaScript) |
||
(не показано 5 промежуточных версий 2 участников) | |||
Строка 45: | Строка 45: | ||
==Реализация на JavaScript== | ==Реализация на JavaScript== | ||
+ | |||
+ | {{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy/n4829.html|width=800 |height=600|border=0 }} | ||
== Разработка == | == Разработка == | ||
Строка 57: | Строка 59: | ||
<head> | <head> | ||
− | <title> | + | <title>4829</title> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\three.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OBJLoader.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\MTLLoader.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OBJMTLLoader.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\jquery-1.9.0.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\stats.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\dat.gui.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\chroma.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\TrackballControls.js"></script> |
− | <script type="text/javascript" src=" | + | <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OrbitControls.js"></script> |
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
</style> | </style> | ||
</head> | </head> | ||
Строка 80: | Строка 77: | ||
<div id="Stats-output"> | <div id="Stats-output"> | ||
</div> | </div> | ||
− | + | ||
<div id="WebGL-output"> | <div id="WebGL-output"> | ||
</div> | </div> | ||
− | + | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
− | |||
$(function () { | $(function () { | ||
+ | var a = 0; | ||
+ | var g = 9.8; | ||
+ | var m = 20; | ||
+ | var m1 = 15; | ||
+ | var stats = initStats(); | ||
− | |||
− | |||
− | |||
var scene = new THREE.Scene(); | var scene = new THREE.Scene(); | ||
− | |||
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); | var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); | ||
− | + | var renderer = new THREE.WebGLRenderer(); | |
− | var | ||
− | |||
− | |||
− | |||
− | var plane = | + | renderer.setClearColor(new THREE.Color(0x7722ff, 1.0)); |
− | + | renderer.setSize(window.innerWidth, window.innerHeight); | |
− | + | renderer.shadowMapEnabled = true; | |
− | + | <!-- var spotLight = new THREE.SpotLight( 0x00ff00 ); --> | |
− | + | <!-- spotLight.position.set( -1000, 0, -10 ); --> | |
− | + | <!-- scene.add(spotLight ); --> | |
− | + | var ugol= 135; | |
− | + | var alpha0 = Math.cos(ugol*Math.PI/180); | |
− | + | var step = 0; | |
− | + | var plane = createMesh0(new THREE.PlaneGeometry(1000, 2000, 50, 50)); | |
− | + | scene.add(plane); | |
− | + | var cube = createMesh(new THREE.CubeGeometry(2, 200, 800)); | |
− | + | cube.position.x=0; | |
− | + | cube.position.y=0; | |
− | + | cube.position.z=0; | |
− | + | scene.add(cube); | |
− | + | var cylinder1 = createMesh1(new THREE.CylinderGeometry(25, 25, 80, 25, 1)); | |
− | + | cylinder1.position.x=cube.position.x-400*Math.cos((180-ugol)*Math.PI/180)+25*Math.sin((180-ugol)*Math.PI/180); | |
− | + | cylinder1.position.y=cube.position.y; | |
− | + | cylinder1.position.z=cube.position.z+400*Math.sin((180-ugol)*Math.PI/180)+25*Math.cos((180-ugol)*Math.PI/180); | |
− | + | var c = cylinder1.position.x; | |
− | + | var d = cylinder1.position.z; | |
− | + | scene.add(cylinder1); | |
− | + | var group1 = new THREE.Object3D(); | |
− | + | group1.add(cube); | |
− | + | group1.add(cylinder1); | |
− | + | group1.position.x = 0; | |
− | + | group1.position.y = 0; | |
− | + | group1.position.z=0; | |
− | + | scene.add(group1); | |
− | + | ||
− | + | function createMesh0(geom) { | |
− | + | var meshMaterial = new THREE.MeshNormalMaterial( { color: 0x550000 } ); | |
− | + | meshMaterial.side = THREE.DoubleSide; | |
− | + | var wireFrameMat = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); | |
− | + | wireFrameMat.wireframe = true; | |
− | + | var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]); | |
− | + | return plane; | |
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
function createMesh(geom) { | function createMesh(geom) { | ||
− | + | var meshMaterial = new THREE.MeshNormalMaterial( { color: 0xffffff } ); | |
− | |||
− | var meshMaterial = new THREE.MeshNormalMaterial(); | ||
meshMaterial.side = THREE.DoubleSide; | meshMaterial.side = THREE.DoubleSide; | ||
− | var wireFrameMat = new THREE.MeshBasicMaterial(); | + | var wireFrameMat = new THREE.MeshBasicMaterial( { color: 0x9999ff } ); |
wireFrameMat.wireframe = true; | wireFrameMat.wireframe = true; | ||
− | + | var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]); | |
− | + | return mesh; | |
− | var | + | } |
− | + | function createMesh1(geom) { | |
− | return | + | var mat = new THREE.MeshNormalMaterial( { color: 0xffff00 } ); |
+ | var mesh = new THREE.Mesh(geom,mat); | ||
+ | return mesh; | ||
} | } | ||
− | + | camera.position.x = 0; | |
− | + | camera.position.y = -1300; | |
+ | camera.position.z = 1500; | ||
+ | camera.lookAt(scene.position); | ||
− | + | $("#WebGL-output").append(renderer.domElement); | |
− | + | renderer.render(scene, camera); | |
− | + | var stats = initStats(); | |
− | + | cameraControls = new THREE.OrbitControls(camera, renderer.domElement); | |
− | + | cameraControls.maxDistance = 900; | |
+ | cameraControls.minDistance = 0.5; | ||
+ | cameraControls.update(); | ||
+ | var controls = new function() { | ||
+ | this.Speed = 0.1; | ||
+ | this.ugol = 135; | ||
+ | this.m = 20; | ||
+ | this.m1 = 15; | ||
+ | this.a='0' | ||
} | } | ||
+ | var obj = { start_again:function(){ | ||
+ | step=0; | ||
+ | cube.position.x=0; | ||
+ | cube.position.y=0; | ||
+ | cube.position.z=0; | ||
+ | cylinder1.position.x=cube.position.x-400*Math.cos((180-ugol)*Math.PI/180)+25*Math.sin((180-ugol)*Math.PI/180); | ||
+ | cylinder1.position.y=cube.position.y; | ||
+ | cylinder1.position.z=cube.position.z+400*Math.sin((180-ugol)*Math.PI/180)+25*Math.cos((180-ugol)*Math.PI/180); | ||
+ | group1.position.x = 0; | ||
+ | group1.position.y = 0; | ||
+ | group1.position.z=0; | ||
+ | }}; | ||
+ | var gui = new dat.GUI(); | ||
+ | gui.add(controls, 'Speed',0.1,0.3); | ||
+ | gui.add(controls, 'ugol',89.9999,180); | ||
+ | gui.add(controls, 'm',0.1,50); | ||
+ | gui.add(controls, 'm1',0.1,50); | ||
+ | gui.add(controls,'a').listen(); | ||
+ | gui.add(obj,'start_again'); | ||
+ | var step = 0; | ||
+ | function render() { | ||
+ | cameraControls.update(); | ||
+ | requestAnimationFrame(render); | ||
+ | renderer.render(scene, camera); | ||
+ | step += controls.Speed | ||
+ | ugol = controls.ugol | ||
+ | controls.a=a; | ||
+ | m = controls.m | ||
+ | m1=controls.m1 | ||
+ | if(ugol<=135) { | ||
+ | group1.rotation.y=Math.cos(ugol*Math.PI/180); | ||
+ | } | ||
+ | else { | ||
+ | group1.rotation.y=Math.cos(ugol*Math.PI/180)+Math.cos((ugol-55)*Math.PI/180); | ||
+ | } | ||
+ | cylinder1.rotation.y = step*step; | ||
+ | a = -(g*m1*Math.sin(2*(180-ugol)*Math.PI/180))/(3*(m1+m)-2*m1*((Math.cos((180-ugol)*Math.PI/180))*(Math.cos((180-ugol)*Math.PI/180)))); | ||
+ | var v =0.65*a; | ||
− | function initStats() { | + | if (cylinder1.position.z<=25*Math.sin((180-ugol)*Math.PI/180)) { |
− | + | cylinder1.position.x = 25; | |
+ | cylinder1.position.z = 25*Math.sin((180-ugol)*Math.PI/180); | ||
+ | cylinder1.rotation.y = 0; | ||
+ | group1.position.x =group1.position.x+v; | ||
+ | if (group1.position.x<=-500) { | ||
+ | step=0; | ||
+ | cube.position.x=0; | ||
+ | cube.position.y=0; | ||
+ | cube.position.z=0; | ||
+ | cylinder1.position.x=cube.position.x-400*Math.cos((180-ugol)*Math.PI/180)+25*Math.sin((180-ugol)*Math.PI/180); | ||
+ | cylinder1.position.y=cube.position.y; | ||
+ | cylinder1.position.z=cube.position.z+400*Math.sin((180-ugol)*Math.PI/180)+25*Math.cos((180-ugol)*Math.PI/180); | ||
+ | group1.position.x = 0; | ||
+ | group1.position.y = 0; | ||
+ | group1.position.z=0; | ||
+ | } | ||
+ | } | ||
+ | else { | ||
+ | group1.position.x = (a*step*step)/2; | ||
+ | cylinder1.position.x=26; | ||
+ | cylinder1.position.z=d-g*Math.sin((180-ugol)*Math.PI/180)*step*step/2; | ||
+ | } | ||
+ | } | ||
+ | render(); | ||
+ | function initStats() { | ||
var stats = new Stats(); | var stats = new Stats(); | ||
stats.setMode(0); // 0: fps, 1: ms | stats.setMode(0); // 0: fps, 1: ms | ||
− | |||
− | |||
stats.domElement.style.position = 'absolute'; | stats.domElement.style.position = 'absolute'; | ||
stats.domElement.style.left = '0px'; | stats.domElement.style.left = '0px'; | ||
stats.domElement.style.top = '0px'; | stats.domElement.style.top = '0px'; | ||
− | |||
$("#Stats-output").append(stats.domElement); | $("#Stats-output").append(stats.domElement); | ||
− | |||
return stats; | return stats; | ||
} | } | ||
}); | }); | ||
− | |||
− | |||
</script> | </script> | ||
</body> | </body> |
Текущая версия на 14:58, 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>4829</title>
7 <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\three.js"></script>
8 <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OBJLoader.js"></script>
9 <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\MTLLoader.js"></script>
10 <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OBJMTLLoader.js"></script>
11 <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\jquery-1.9.0.js"></script>
12 <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\stats.js"></script>
13 <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\dat.gui.js"></script>
14 <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\chroma.js"></script>
15 <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\TrackballControls.js"></script>
16 <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OrbitControls.js"></script>
17
18 </style>
19 </head>
20 <body>
21
22 <div id="Stats-output">
23 </div>
24
25 <div id="WebGL-output">
26 </div>
27
28
29 <script type="text/javascript">
30
31 $(function () {
32 var a = 0;
33 var g = 9.8;
34 var m = 20;
35 var m1 = 15;
36 var stats = initStats();
37
38 var scene = new THREE.Scene();
39
40 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
41
42 var renderer = new THREE.WebGLRenderer();
43
44 renderer.setClearColor(new THREE.Color(0x7722ff, 1.0));
45 renderer.setSize(window.innerWidth, window.innerHeight);
46 renderer.shadowMapEnabled = true;
47 <!-- var spotLight = new THREE.SpotLight( 0x00ff00 ); -->
48 <!-- spotLight.position.set( -1000, 0, -10 ); -->
49 <!-- scene.add(spotLight ); -->
50 var ugol= 135;
51 var alpha0 = Math.cos(ugol*Math.PI/180);
52 var step = 0;
53 var plane = createMesh0(new THREE.PlaneGeometry(1000, 2000, 50, 50));
54 scene.add(plane);
55 var cube = createMesh(new THREE.CubeGeometry(2, 200, 800));
56 cube.position.x=0;
57 cube.position.y=0;
58 cube.position.z=0;
59 scene.add(cube);
60 var cylinder1 = createMesh1(new THREE.CylinderGeometry(25, 25, 80, 25, 1));
61 cylinder1.position.x=cube.position.x-400*Math.cos((180-ugol)*Math.PI/180)+25*Math.sin((180-ugol)*Math.PI/180);
62 cylinder1.position.y=cube.position.y;
63 cylinder1.position.z=cube.position.z+400*Math.sin((180-ugol)*Math.PI/180)+25*Math.cos((180-ugol)*Math.PI/180);
64 var c = cylinder1.position.x;
65 var d = cylinder1.position.z;
66 scene.add(cylinder1);
67 var group1 = new THREE.Object3D();
68 group1.add(cube);
69 group1.add(cylinder1);
70 group1.position.x = 0;
71 group1.position.y = 0;
72 group1.position.z=0;
73 scene.add(group1);
74
75 function createMesh0(geom) {
76 var meshMaterial = new THREE.MeshNormalMaterial( { color: 0x550000 } );
77 meshMaterial.side = THREE.DoubleSide;
78 var wireFrameMat = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
79 wireFrameMat.wireframe = true;
80 var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
81 return plane;
82 }
83 function createMesh(geom) {
84 var meshMaterial = new THREE.MeshNormalMaterial( { color: 0xffffff } );
85 meshMaterial.side = THREE.DoubleSide;
86 var wireFrameMat = new THREE.MeshBasicMaterial( { color: 0x9999ff } );
87 wireFrameMat.wireframe = true;
88 var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
89 return mesh;
90 }
91 function createMesh1(geom) {
92 var mat = new THREE.MeshNormalMaterial( { color: 0xffff00 } );
93 var mesh = new THREE.Mesh(geom,mat);
94 return mesh;
95 }
96
97 camera.position.x = 0;
98 camera.position.y = -1300;
99 camera.position.z = 1500;
100 camera.lookAt(scene.position);
101
102 $("#WebGL-output").append(renderer.domElement);
103 renderer.render(scene, camera);
104 var stats = initStats();
105 cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
106 cameraControls.maxDistance = 900;
107 cameraControls.minDistance = 0.5;
108 cameraControls.update();
109 var controls = new function() {
110 this.Speed = 0.1;
111 this.ugol = 135;
112 this.m = 20;
113 this.m1 = 15;
114 this.a='0'
115 }
116 var obj = { start_again:function(){
117 step=0;
118 cube.position.x=0;
119 cube.position.y=0;
120 cube.position.z=0;
121 cylinder1.position.x=cube.position.x-400*Math.cos((180-ugol)*Math.PI/180)+25*Math.sin((180-ugol)*Math.PI/180);
122 cylinder1.position.y=cube.position.y;
123 cylinder1.position.z=cube.position.z+400*Math.sin((180-ugol)*Math.PI/180)+25*Math.cos((180-ugol)*Math.PI/180);
124 group1.position.x = 0;
125 group1.position.y = 0;
126 group1.position.z=0;
127 }};
128 var gui = new dat.GUI();
129 gui.add(controls, 'Speed',0.1,0.3);
130 gui.add(controls, 'ugol',89.9999,180);
131 gui.add(controls, 'm',0.1,50);
132 gui.add(controls, 'm1',0.1,50);
133 gui.add(controls,'a').listen();
134 gui.add(obj,'start_again');
135 var step = 0;
136 function render() {
137 cameraControls.update();
138 requestAnimationFrame(render);
139 renderer.render(scene, camera);
140 step += controls.Speed
141 ugol = controls.ugol
142 controls.a=a;
143 m = controls.m
144 m1=controls.m1
145 if(ugol<=135) {
146 group1.rotation.y=Math.cos(ugol*Math.PI/180);
147 }
148 else {
149 group1.rotation.y=Math.cos(ugol*Math.PI/180)+Math.cos((ugol-55)*Math.PI/180);
150 }
151 cylinder1.rotation.y = step*step;
152 a = -(g*m1*Math.sin(2*(180-ugol)*Math.PI/180))/(3*(m1+m)-2*m1*((Math.cos((180-ugol)*Math.PI/180))*(Math.cos((180-ugol)*Math.PI/180))));
153 var v =0.65*a;
154
155 if (cylinder1.position.z<=25*Math.sin((180-ugol)*Math.PI/180)) {
156 cylinder1.position.x = 25;
157 cylinder1.position.z = 25*Math.sin((180-ugol)*Math.PI/180);
158 cylinder1.rotation.y = 0;
159 group1.position.x =group1.position.x+v;
160 if (group1.position.x<=-500) {
161 step=0;
162 cube.position.x=0;
163 cube.position.y=0;
164 cube.position.z=0;
165 cylinder1.position.x=cube.position.x-400*Math.cos((180-ugol)*Math.PI/180)+25*Math.sin((180-ugol)*Math.PI/180);
166 cylinder1.position.y=cube.position.y;
167 cylinder1.position.z=cube.position.z+400*Math.sin((180-ugol)*Math.PI/180)+25*Math.cos((180-ugol)*Math.PI/180);
168 group1.position.x = 0;
169 group1.position.y = 0;
170 group1.position.z=0;
171 }
172 }
173 else {
174 group1.position.x = (a*step*step)/2;
175 cylinder1.position.x=26;
176 cylinder1.position.z=d-g*Math.sin((180-ugol)*Math.PI/180)*step*step/2;
177 }
178 }
179 render();
180 function initStats() {
181 var stats = new Stats();
182 stats.setMode(0); // 0: fps, 1: ms
183 stats.domElement.style.position = 'absolute';
184 stats.domElement.style.left = '0px';
185 stats.domElement.style.top = '0px';
186 $("#Stats-output").append(stats.domElement);
187 return stats;
188 }
189 });
190 </script>
191 </body>
192 </html>