Редактирование: Колебания в цилиндре

== Постановка задачи ==
Определить движение однородного стержня массы М, скользящего внутри цилиндра радиуса R. Внутри однородного стержня движется точка массы m с постоянной скоростью v.

==Решение==
Решаем, пользуясь уравнением Лагранжа 2-ого рода:

<math>\frac{d}{dt}\left(\frac{\partial T}{\partial\dot q_i}\right) - \frac{\partial T}{\partial q_i} = - \frac{\partial \Pi}{\partial q_i} </math> , где
 T - кинетическая энергия системы
 П - потенциальная энергия системы
 q - независимые обобщенные координаты

1) У данной системы одна степень свободы. 
   В качестве обобщенной координаты возьмем угол отклонения стержня от заданного положения. 
 <math>q = \varphi </math>.

2) Выразим кинетическую и потенциальную энергию через эту координату и найдем производные, необходимые для решения уравнения Лагранжа:
<math>T= T1 + T2</math>
<math>T= \frac{1}{2}\ θ\ ω ^{2} + \frac{1}{2}\ m\ V ^{2}</math>
<math> θ= \frac{1}{2}\ M\ R ^{2} </math>
<math>T= \frac{1}{4}\M\ R ^{2} \ dot\varphi ^{2} + \frac{1}{2}\ m\ V ^{2}</math>
<math>\Pi = m \ g\ x \sin(\varphi )\ </math>

3)Продифференцировав энергии по обобщенной координате и ее производной, получаем уравнение:

<math>  \frac{1}{2}\ M\  R ^{2} \ ddot\varphi =  m \ g\ v\ t \cos(\varphi )\ </math>

4)Решив это дифференциальное уравнение, с нулевыми начальными условиями и зафиксированным углом наклона стержня, получим уравнение движения:

<math> \varphi = arctg (\frac\{v\ t}{\R \(frac\{\M}{{3}\ m}) ^{2}}\)</math>
==Визуализация процесса==

Для моделирования колебаний данного маятника используются cледующие библиотеки:

*three.js

*dat.gui.js

*stats.js

== Решение ==

{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/SakevicTS/kurs.html |width=1200 |height=600}}




<div class="mw-collapsible mw-collapsed">
'''Текст программы на языке JavaScript:''' <div class="mw-collapsible-content">
Файл '''"Generalwork2.js"'''
<syntaxhighlight lang="javascript" line start="1" enclose="div">

(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 renderer = new THREE.WebGLRenderer();
		

        renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;

	var OrbitControls= new THREE.OrbitControls(camera);
		OrbitControls.autoRotate = false;
		var clock = new THREE.Clock();
	
		
        var planeGeometry = new THREE.PlaneGeometry(150,60);
        var planeMaterial = new THREE.MeshBasicMaterial({color:0xE1EfE1});
        var plane = new THREE.Mesh(planeGeometry,planeMaterial);
        plane.receiveShadow  = true;

        // rotate and position the plane
        plane.rotation.x=-0.5*Math.PI;
        plane.position.x=10
        plane.position.y=-4
        plane.position.z=0

        // add the plane to the scene
        scene.add(plane);
		
		var sphereGeometry = new THREE.SphereGeometry(2/5, 20, 20);
        var sphereMaterial = new THREE.MeshLambertMaterial({color: 0xffdddd,transparent:false,opacity:0.2});
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

        // position the sphere
        sphere.position.x =0;
        sphere.position.y =0;
        sphere.position.z =0;
        // add the sphere to the scene
        scene.add(sphere);
 
		//create a stick
		var stickGeometry = new THREE.CylinderGeometry(1/2,1/2,7.7);
		var stickMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff,transparent:true,opacity:0.7});
        var stick = new THREE.Mesh(stickGeometry, stickMaterial);
		
       // stick.castShadow = true;
		
        stick.position.x=0;
        stick.position.y=0;
        stick.position.z=0;

        // add the cube to the scene
        scene.add(stick);

        // create a cube
		
        var cylinderGeometry = new THREE.CylinderGeometry(4,4,10,30,10, true );
        var cylinderMaterial = new THREE.MeshLambertMaterial({color: 0xb3a1aa});
		cylinderMaterial.side = THREE.DoubleSide;
        var cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
		cylinder.castShadow=true;
     //   cylinder.castShadow = true;

        // position the cylinder
		cylinder.rotation.x=-0.5*Math.PI;
        cylinder.position.x=0;
        cylinder.position.y=0;
        cylinder.position.z=0;

        // add the cube to the scene
        scene.add(cylinder);

		var group = new THREE.Object3D();
            group.add(sphere);
			group.add(stick);
            scene.add(group);
			
		var arrowHelper = new THREE.ArrowHelper(new THREE.Vector3( 0, 1.0, 0.0 ), group.position, 10, 0xacd1c5);
		scene.add( arrowHelper );
		var arrowHelper2 = new THREE.ArrowHelper(new THREE.Vector3( 1.0, 0, 0.0 ), group.position, 10, 0xacd1c5 );
		scene.add( arrowHelper2 );
		var arrowHelper3 = new THREE.ArrowHelper(new THREE.Vector3( 0, 0, 1.0 ), group.position, 10, 0xacd1c5 );
		scene.add( arrowHelper3 );
		

        // position and point the camera to the center of the scene
        camera.position.x = 5;
        camera.position.y = 10;
        camera.position.z = 30;
        camera.lookAt(scene.position);
		
		
		
        // add spotlight for the shadows
		var ambientLight=new THREE.AmbientLight(0x0c0c0c);
		//scene.add(ambientLight);
        var spotLight = new THREE.SpotLight( 0xEEEEEE );
        spotLight.position.set( 40, 60, 20 );
        spotLight.castShadow = true;
        scene.add( spotLight );
		
				var pointColor = "#65a54e";
				var pointLight1 = new THREE.PointLight(pointColor);
				pointLight1.distance = 20;
				scene.add(pointLight1);
				
				var sphereLight = new THREE.SphereGeometry(0.2);
				var sphereLightMaterial = new THREE.MeshLambertMaterial({color:0x65a54e});
				var sphereLightMesh = new THREE.Mesh(sphereLight, sphereLightMaterial);
				sphereLightMesh.castShadow = true;

				sphereLightMesh.position = new THREE.Vector3(6, 5, -10);
				pointLight1.position = sphereLightMesh.position;
				scene.add(sphereLightMesh);
				
				
				var pointLight2 = new THREE.PointLight(0xff000d);
				pointLight2.distance = 20;
				scene.add(pointLight2);
				
				var sphereLight2 = new THREE.SphereGeometry(0.2);
				var sphereLight2Material = new THREE.MeshLambertMaterial({color:0xff000d});
				var sphereLight2Mesh = new THREE.Mesh(sphereLight2, sphereLight2Material);
				sphereLight2Mesh.castShadow = true;

				sphereLight2Mesh.position = new THREE.Vector3(3, 8, 8);
				pointLight2.position = sphereLight2Mesh.position;
				scene.add(sphereLight2Mesh);
				
				var pointLight3 = new THREE.PointLight(222672);
				pointLight3.distance = 20;
				scene.add(pointLight3);
				
				var sphereLight3 = new THREE.SphereGeometry(0.2);
				var sphereLight3Material = new THREE.MeshLambertMaterial({color:222672});
				var sphereLight3Mesh = new THREE.Mesh(sphereLight3, sphereLight3Material);
				sphereLight2Mesh.castShadow = true;

				sphereLight3Mesh.position = new THREE.Vector3(-8, 8, 6);
				pointLight3.position = sphereLight3Mesh.position;
				scene.add(sphereLight3Mesh);
				
				var pointLight4 = new THREE.PointLight(0x634ea5);
				pointLight4.distance = 20;
				scene.add(pointLight4);
				
				var sphereLight4 = new THREE.SphereGeometry(0.2);
				var sphereLight4Material = new THREE.MeshLambertMaterial({color:0x634ea5});
				var sphereLight4Mesh = new THREE.Mesh(sphereLight4, sphereLight4Material);
				sphereLight4Mesh.castShadow = true;

				sphereLight4Mesh.position = new THREE.Vector4(6, 7, 4);
				pointLight4.position = sphereLight4Mesh.position;
				scene.add(sphereLight4Mesh);
				
				var pointLight5 = new THREE.PointLight(0xff000d);
				pointLight5.distance = 20;
				scene.add(pointLight5);
				
				var sphereLight5 = new THREE.SphereGeometry(0.2);
				var sphereLight5Material = new THREE.MeshLambertMaterial({color:0xff000d});
				var sphereLight5Mesh = new THREE.Mesh(sphereLight5, sphereLight5Material);
				sphereLight5Mesh.castShadow = true;

				sphereLight5Mesh.position = new THREE.Vector3(-9, 4, -2);
				pointLight5.position = sphereLight5Mesh.position;
				scene.add(sphereLight5Mesh);
				
				var pointLight6 = new THREE.PointLight(0x4e9fa5);
				pointLight6.distance = 20;
				scene.add(pointLight6);
				
				var sphereLight6 = new THREE.SphereGeometry(0.2);
				var sphereLight6Material = new THREE.MeshLambertMaterial({color:0x4e9fa5});
				var sphereLight6Mesh = new THREE.Mesh(sphereLight6, sphereLight6Material);
				sphereLight6Mesh.castShadow = true;

				sphereLight6Mesh.position = new THREE.Vector3(-4, 5, 12);
				pointLight6.position = sphereLight6Mesh.position;
				scene.add(sphereLight6Mesh);
				
				var pointLight7 = new THREE.PointLight(0xa54e9f);
				pointLight7.distance = 20;
				scene.add(pointLight7);
				
				var sphereLight7 = new THREE.SphereGeometry(0.2);
				var sphereLight7Material = new THREE.MeshLambertMaterial({color:0xa54e9f});
				var sphereLight7Mesh = new THREE.Mesh(sphereLight7, sphereLight7Material);
				sphereLight7Mesh.castShadow = true;

				sphereLight7Mesh.position = new THREE.Vector3(-1, 8, -7);
				pointLight7.position = sphereLight7Mesh.position;
				scene.add(sphereLight7Mesh);
     
        // add the output of the renderer to the html element
        $("#WebGL-output").append(renderer.domElement);

        // call the render function
        renderer.render(scene, camera);
		var step = 1;
		var stepg=0.8;
		var d=1;
		var g=1;
        var oldContext = null;

        // setup the control gui
		var omega,phi,c,time,dt,m , M;
        var controls = new function () {
            // we need the first child, since it's a multimaterial
			this.orbit=false
            this.radiusTop = 4;
            this.radiusBottom = 4;
            this.height = 10;

            this.segmentsX = 30;
            this.segmentsY = 10;

            this.openEnded = true;
			this.opacity = stickMaterial.opacity;
			
			this.pointColor = pointColor;
            this.intensity = 0;
            this.distance = 100;
			
			this.visible = cylinderMaterial.visible;
			this.side = "front";
			this.c=1;
			
			this.m=2
			this.M=10
			
			
			this.redraw=function() 
			{
			dt=0.01;
			time=0;
			delta=0;
			phi=Math.PI/3;
			c=controls.c;
			stick.rotation.z=phi;
			sphere.position.x=-2.9
			sphere.position.y=1.7
			}

        }



	
        var gui = new dat.GUI();
		
		gui.add(controls, 'opacity', 0, 1).onChange(function (e) {
            stickMaterial.opacity = e
        });
		
		gui.add(controls, 'm', 0.1, 10);
		gui.add(controls, 'M', 0, 10);
		gui.add(controls, 'orbit', false).onChange(function (e) {
            OrbitControls.autoRotate = e;
			})
		gui.add(controls, 'redraw');

		
		

		controls.redraw();
    
        render();
		controls.redraw();
		

		function render() {
					
			sphere.position.x+= d*0.034;
			sphere.position.y-= d*0.02;
			if (sphere.position.x>3.1) {d=-1}
			if (sphere.position.x<-3) {d=1}
			
			
			
			time+=dt;
			delta=(-d)*(Math.atan(0.04*time/4*Math.sqrt(controls.M/3*controls.m)))*dt;
			phi+=delta;
			group.rotation.z=phi;
			
			
			var x = clock.getDelta();
			OrbitControls.update(x);
					
			stats.update();
			requestAnimationFrame(render);
            renderer.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;
        }

       
    });
window.onload = init;
</syntaxhighlight>
</div>