Колебания в цилиндрической поверхности (48.12) — различия между версиями
(→Решение) |
(→Визуализация) |
||
Строка 35: | Строка 35: | ||
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/shpentyydn/48.12.html |width=1200 |height=600}} | {{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/shpentyydn/48.12.html |width=1200 |height=600}} | ||
+ | |||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <title>Kursach</title> | ||
+ | <script type="text/javascript" src=" http://tm.spbstu.ru/htmlets/libs/three.min.js"></script> | ||
+ | <script src ="http://tm.spbstu.ru/htmlets/libs/OrbitControls.js"></script> | ||
+ | <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/libs/stats.min.js"></script> | ||
+ | <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/libs/dat.gui.min.js"></script> | ||
+ | <script src="https://code.jquery.com/jquery-1.9.1.js" integrity="sha256-e9gNBsAcA0DBuRWbm0oZfbiCyhjLrI6bmqAl5o+ZjUA=" crossorigin="anonymous"></script> | ||
+ | <style> | ||
+ | body{ | ||
+ | /* set margin to 0 and overflow to hidden, | ||
+ | to use the complete page */ | ||
+ | margin: 0; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | </style> | ||
+ | <!-- | ||
+ | ������������ ����� ����� m �������� ��� �������� ���� ������� �� | ||
+ | ������������� ������������, �������� ���������� s=4a sinx, ��� s � ����, | ||
+ | ������������� �� ����� O, � x � ���� ����������� � �������� � �������������� ����. | ||
+ | ���������� �������� �����. | ||
+ | --> | ||
+ | </head> | ||
+ | <body> | ||
+ | <!--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 dt = 1/60; | ||
+ | var g = 9.8; | ||
+ | var controls = new function() { | ||
+ | this.m = 2; | ||
+ | this.animate = false; | ||
+ | this.fi0 = Math.PI/4; | ||
+ | this.fi = this.fi0; | ||
+ | this.a = 1; | ||
+ | this.t = 0; | ||
+ | this.s=0 ; | ||
+ | this.calculate = function() { | ||
+ | this.fi = this.fi0*Math.sin(-0.5*Math.sqrt(g/this.a)*this.t+this.fi0); | ||
+ | //this.fi = (this.s/4/this.a); | ||
+ | this.s = 4*this.a*this.fi; | ||
+ | } | ||
+ | this.calculate(); | ||
+ | this.setDefault = function() { | ||
+ | this.t = 0; | ||
+ | this.fi = this.fi0; | ||
+ | } | ||
+ | } | ||
+ | var gui = new dat.GUI(); | ||
+ | var fi0Change = gui.add(controls, 'fi0',0,Math.PI/2); | ||
+ | var aChange = gui.add(controls, 'a',0.2,2); | ||
+ | var fiChange = gui.add(controls, 'fi').listen(); | ||
+ | var sChange = gui.add(controls, 's').listen(); | ||
+ | var tChange = gui.add(controls, 't').listen(); | ||
+ | var animateChange = gui.add(controls, 'animate'); | ||
+ | |||
+ | fi0Change.onFinishChange(function(value) { | ||
+ | controls.setDefault(); | ||
+ | controls.calculate(); | ||
+ | }); | ||
+ | |||
+ | aChange.onFinishChange(function(value) { | ||
+ | controls.setDefault(); | ||
+ | controls.calculate(); | ||
+ | }); | ||
+ | |||
+ | animateChange.onFinishChange(function(value) { | ||
+ | controls.setDefault(); | ||
+ | controls.calculate(); | ||
+ | }); | ||
+ | |||
+ | fi0Change.onFinishChange(function(value) { | ||
+ | controls.setDefault(); | ||
+ | controls.calculate(); | ||
+ | }); | ||
+ | |||
+ | |||
+ | var scene = new THREE.Scene(); | ||
+ | |||
+ | //* | ||
+ | var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight , 0.1, 1000); | ||
+ | camera.position.x = -25/2; | ||
+ | camera.position.y = 40/2; | ||
+ | camera.position.z = 30/2; | ||
+ | //*/ | ||
+ | /*z | ||
+ | var camera1 = new THREE.OrthographicCamera( window.innerWidth / - 50, window.innerWidth / 50, window.innerHeight / 50, window.innerHeight / - 50, 1, 100 ); | ||
+ | camera1.position.x = 0; | ||
+ | camera1.position.y = 0; | ||
+ | camera1.position.z = 30; | ||
+ | */ | ||
+ | var radius; | ||
+ | var renderer = new THREE.WebGLRenderer(); | ||
+ | renderer.setClearColor(0xEEEEEE); | ||
+ | renderer.setSize(window.innerWidth, window.innerHeight); | ||
+ | radius = 4*controls.a; | ||
+ | while(scene.children.length > 0){ | ||
+ | scene.remove(scene.children[0]); | ||
+ | } | ||
+ | var axes = new THREE.AxesHelper( 20 ); | ||
+ | control = new THREE.OrbitControls(camera,renderer.domElement); | ||
+ | |||
+ | //scene.add(axes); | ||
+ | // ����������� | ||
+ | var planeGeometry = new THREE.PlaneGeometry(radius*2,10,30,5); | ||
+ | var planeMaterial = new THREE.MeshLambertMaterial({color: 0x6F482A, side: THREE.DoubleSide, wireframe: false}); | ||
+ | var plane = new THREE.Mesh(planeGeometry,planeMaterial); | ||
+ | plane.rotation.x=-0.5*Math.PI; | ||
+ | plane.position.x = 0; | ||
+ | plane.position.y = 0; | ||
+ | plane.position.z = 0; | ||
+ | plane.receiveShadow = true; | ||
+ | scene.add(plane); | ||
+ | //�������������� ����������� | ||
+ | var geometry = new THREE.CylinderGeometry(radius, radius, 10, 32, 5, 0, 0, Math.PI); | ||
+ | var material = new THREE.MeshLambertMaterial( {color: 0x6F482A, side: THREE.DoubleSide, wireframe: false} ); | ||
+ | var cylinder = new THREE.Mesh( geometry, material ); | ||
+ | cylinder.rotation.set(0,Math.PI*0.5,Math.PI*1.5); | ||
+ | cylinder.position.set(0,radius,0); | ||
+ | cylinder.receiveShadow = true; | ||
+ | cylinder.castShadow = true; | ||
+ | scene.add( cylinder ); | ||
+ | //����� | ||
+ | var geometry = new THREE.SphereGeometry( radius/8, 16, 16 ); | ||
+ | var material = new THREE.MeshLambertMaterial( {color: 0xA8A8A8, side: THREE.DoubleSide, wireframe: false} ); | ||
+ | var sphere = new THREE.Mesh( geometry, material ); | ||
+ | sphere.position.set(radius*Math.sin(controls.fi)-radius/8*Math.sin(controls.fi),radius*(1-Math.cos(controls.fi))+radius/8*Math.cos(controls.fi),0); | ||
+ | sphere.castShadow = true; | ||
+ | scene.add( sphere ); | ||
+ | //������ | ||
+ | var c1 = new THREE.Mesh(new THREE.CylinderGeometry(0.05,0.05,2,32,5,1,0,2*Math.PI), new THREE.MeshBasicMaterial({color: 0xff0000})); | ||
+ | c1.position = sphere.position; | ||
+ | c1.rotation.set(0 ,controls.fi,0); | ||
+ | scene.add(c1); | ||
+ | var c2 = new THREE.Mesh(new THREE.CylinderGeometry(0,0.2,0.5,32,5,1,0,2*Math.PI), new THREE.MeshBasicMaterial({color: 0xff0000})); | ||
+ | c2.position = sphere.position; | ||
+ | c2.rotation.set(0 ,controls.fi,0); | ||
+ | scene.add(c2); | ||
+ | |||
+ | // ���� | ||
+ | var spotLight = new THREE.SpotLight( 0xffffff ); | ||
+ | spotLight.position.set( 0, 80, 0 ); | ||
+ | spotLight.castShadow = true; | ||
+ | scene.add(spotLight ); | ||
+ | camera.lookAt(scene.position); | ||
+ | function renderScene() { | ||
+ | if(controls.animate) {controls.t+=dt;} | ||
+ | controls.calculate(); | ||
+ | sphere.position.set(radius*Math.sin(controls.fi)-radius/8*Math.sin(controls.fi),radius*(1-Math.cos(controls.fi))+radius/8*Math.cos(controls.fi),0); | ||
+ | c1.position.set(sphere.position.x-Math.sin(controls.fi),sphere.position.y+Math.cos(controls.fi),sphere.position.z); | ||
+ | c1.rotation.set(0,0,controls.fi); | ||
+ | c2.position.set(sphere.position.x-2*Math.sin(controls.fi),sphere.position.y+2*Math.cos(controls.fi),sphere.position.z); | ||
+ | c2.rotation.set(0,0,controls.fi); | ||
+ | requestAnimationFrame(renderScene); | ||
+ | renderer.render(scene, camera); | ||
+ | } | ||
+ | go = function() { | ||
+ | |||
+ | $("#WebGL-output").append(renderer.domElement); | ||
+ | renderScene(); | ||
+ | }; | ||
+ | go(); | ||
+ | }); | ||
+ | </script> | ||
+ | </body> | ||
+ | </html> |
Версия 11:29, 22 декабря 2017
Формулировка задачи
Составить уравнение движения материальной точки, движущейся под влиянием силы тяжести по циклоидальной направляющей, заданной уравнением s = a*sin φ
Решение
Для решения поставленной задачи воспользуемся уравнением Лагранжа 2-го рода
, где
T - кинетическая энергия системы П - потенциальная энергия системы q - независимые обобщенные координаты
Скорость материальной точки определяется первой производной пути по времени (уравнение пути нам задано в условии). Дальше с помощью уравнения Лагранжа мы найдём частные производные. Найдем обобщённую силу и подставим найденные нами значения в уравнение Лагранжа с учётом данной нам зависимости пути и получим искомый ответ.
Скорость мат. точки
уравнение Лагранжа
Используемые библиотеки
Для моделирования колебаний данного маятника используется язык программирования JavaScript и следующие библиотеки:
- three.js
- dat.gui.js
- stats.js
- OrbitControls.js
Визуализация
<!DOCTYPE html> <html> <head> <title>Kursach</title> <script type="text/javascript" src=" http://tm.spbstu.ru/htmlets/libs/three.min.js"></script>
<script src ="http://tm.spbstu.ru/htmlets/libs/OrbitControls.js"></script> <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/libs/stats.min.js"></script> <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/libs/dat.gui.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js" integrity="sha256-e9gNBsAcA0DBuRWbm0oZfbiCyhjLrI6bmqAl5o+ZjUA=" crossorigin="anonymous"></script> <style> body{ /* set margin to 0 and overflow to hidden, to use the complete page */ margin: 0; overflow: hidden; } </style> </head> <body>
<script type="text/javascript"> // once everything is loaded, we run our Three.js stuff. $(function () { var dt = 1/60; var g = 9.8; var controls = new function() { this.m = 2; this.animate = false; this.fi0 = Math.PI/4; this.fi = this.fi0; this.a = 1; this.t = 0;
this.s=0 ;
this.calculate = function() {
this.fi = this.fi0*Math.sin(-0.5*Math.sqrt(g/this.a)*this.t+this.fi0);
//this.fi = (this.s/4/this.a); this.s = 4*this.a*this.fi;
}
this.calculate(); this.setDefault = function() { this.t = 0; this.fi = this.fi0; } } var gui = new dat.GUI(); var fi0Change = gui.add(controls, 'fi0',0,Math.PI/2); var aChange = gui.add(controls, 'a',0.2,2); var fiChange = gui.add(controls, 'fi').listen(); var sChange = gui.add(controls, 's').listen(); var tChange = gui.add(controls, 't').listen(); var animateChange = gui.add(controls, 'animate');
fi0Change.onFinishChange(function(value) { controls.setDefault(); controls.calculate(); });
aChange.onFinishChange(function(value) { controls.setDefault(); controls.calculate(); });
animateChange.onFinishChange(function(value) { controls.setDefault(); controls.calculate(); });
fi0Change.onFinishChange(function(value) { controls.setDefault(); controls.calculate(); });
var scene = new THREE.Scene();
//* var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight , 0.1, 1000); camera.position.x = -25/2; camera.position.y = 40/2; camera.position.z = 30/2; //*/ /*z var camera1 = new THREE.OrthographicCamera( window.innerWidth / - 50, window.innerWidth / 50, window.innerHeight / 50, window.innerHeight / - 50, 1, 100 ); camera1.position.x = 0; camera1.position.y = 0; camera1.position.z = 30; */ var radius; var renderer = new THREE.WebGLRenderer(); renderer.setClearColor(0xEEEEEE); renderer.setSize(window.innerWidth, window.innerHeight); radius = 4*controls.a; while(scene.children.length > 0){ scene.remove(scene.children[0]); } var axes = new THREE.AxesHelper( 20 );
control = new THREE.OrbitControls(camera,renderer.domElement);
//scene.add(axes); // ����������� var planeGeometry = new THREE.PlaneGeometry(radius*2,10,30,5); var planeMaterial = new THREE.MeshLambertMaterial({color: 0x6F482A, side: THREE.DoubleSide, wireframe: false}); var plane = new THREE.Mesh(planeGeometry,planeMaterial); plane.rotation.x=-0.5*Math.PI; plane.position.x = 0; plane.position.y = 0; plane.position.z = 0; plane.receiveShadow = true; scene.add(plane); //�������������� ����������� var geometry = new THREE.CylinderGeometry(radius, radius, 10, 32, 5, 0, 0, Math.PI); var material = new THREE.MeshLambertMaterial( {color: 0x6F482A, side: THREE.DoubleSide, wireframe: false} ); var cylinder = new THREE.Mesh( geometry, material ); cylinder.rotation.set(0,Math.PI*0.5,Math.PI*1.5); cylinder.position.set(0,radius,0); cylinder.receiveShadow = true; cylinder.castShadow = true; scene.add( cylinder ); //����� var geometry = new THREE.SphereGeometry( radius/8, 16, 16 ); var material = new THREE.MeshLambertMaterial( {color: 0xA8A8A8, side: THREE.DoubleSide, wireframe: false} ); var sphere = new THREE.Mesh( geometry, material ); sphere.position.set(radius*Math.sin(controls.fi)-radius/8*Math.sin(controls.fi),radius*(1-Math.cos(controls.fi))+radius/8*Math.cos(controls.fi),0); sphere.castShadow = true; scene.add( sphere ); //������ var c1 = new THREE.Mesh(new THREE.CylinderGeometry(0.05,0.05,2,32,5,1,0,2*Math.PI), new THREE.MeshBasicMaterial({color: 0xff0000})); c1.position = sphere.position; c1.rotation.set(0 ,controls.fi,0); scene.add(c1); var c2 = new THREE.Mesh(new THREE.CylinderGeometry(0,0.2,0.5,32,5,1,0,2*Math.PI), new THREE.MeshBasicMaterial({color: 0xff0000})); c2.position = sphere.position; c2.rotation.set(0 ,controls.fi,0); scene.add(c2);
// ���� var spotLight = new THREE.SpotLight( 0xffffff ); spotLight.position.set( 0, 80, 0 ); spotLight.castShadow = true; scene.add(spotLight ); camera.lookAt(scene.position); function renderScene() { if(controls.animate) {controls.t+=dt;} controls.calculate(); sphere.position.set(radius*Math.sin(controls.fi)-radius/8*Math.sin(controls.fi),radius*(1-Math.cos(controls.fi))+radius/8*Math.cos(controls.fi),0); c1.position.set(sphere.position.x-Math.sin(controls.fi),sphere.position.y+Math.cos(controls.fi),sphere.position.z); c1.rotation.set(0,0,controls.fi); c2.position.set(sphere.position.x-2*Math.sin(controls.fi),sphere.position.y+2*Math.cos(controls.fi),sphere.position.z); c2.rotation.set(0,0,controls.fi); requestAnimationFrame(renderScene); renderer.render(scene, camera); } go = function() {
$("#WebGL-output").append(renderer.domElement); renderScene(); }; go(); }); </script> </body> </html>