Маятник Капицы

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
Маятник Капицы

Маятник Капицы


Визуализация маятника Капицы на JavaScript

Исполнитель: Демченко Артем

Группа 23604/1 Кафедра Теоретической механики

Формулировка задачи

  • Смоделировать маятник Капицы и показать его вертикальную устойчивость.

Решение задачи

Для запуска системы с заданными параметрами нажмите pause. Для запуска системы с другими параметрами перезагрузите страницу(F5), задайте новые параметры и снова нажмите pause.

Участники проекта

Демченко Артем

Презентация

Презентация
Описание


<syntaxhighlight lang="javascript" line start="1" enclose="div">


<!DOCTYPE html> <html> <head>

   <meta charset = "UTF-8">
   <title>8.41</title>
   <script src = "http://tm.spbstu.ru/htmlets/Demchenko_AI/Statics./three.js"></script>
   <script src = "http://tm.spbstu.ru/htmlets/Demchenko_AI/Statics./stats.min.js"></script>
   <script src = "http://tm.spbstu.ru/htmlets/Demchenko_AI/Statics./OrbitControls.js"></script>
   <script src = "http://tm.spbstu.ru/htmlets/Demchenko_AI/Statics./dat.gui.js"></script>
   <style>
       body {
           margin: 0;
           overflow: hidden;
       }
   </style>

</head> <body>

<script>

   var parameters = new function () {
       this.R = 1;
       this.angle = 0;
       this.L = 2;
       this.P = 1;
   };
   var gui = new dat.GUI();
   gui.add(parameters, 'R', 0.1, 2.5);
   gui.add(parameters, 'angle', 0, Math.PI / 2 - 0.01);
   gui.add(parameters, 'L', 2, 10);
   gui.add(parameters, 'P', 1, 10);
   var renderer;
   var scene;
   var camera;
   var stats;
   //var PI = 3.141592;
   var angle = 0;
   var L = 2;
   var R = 1;
   var P = 100;
   var alpha = 0;


   var box;
   var Bx = 1;
   var By = 4;
   var Bz = 0;



   function drawBox() {
       var boxGeometry = new THREE.BoxGeometry(2 * R, 0.1, 0.1); // (l, , )
       var boxMaterial = new THREE.MeshBasicMaterial( {color: 0x000fff} );
       box = new THREE.Mesh(boxGeometry, boxMaterial);
       box.position.set(Bx, By, Bz); // 1 4 0
       scene.add(box);
   }
   var cylinder;
   var Cx = 1;
   var Cy = 2;
   var Cz = 0;
   function drawCylinder() {
       var cylinderGeometry = new THREE.CylinderGeometry(0.1, 0.1, 2 * R);
       var cylinderMaterial = new THREE.MeshBasicMaterial( {color: 0xffff00} );
       cylinder = new THREE.Mesh( cylinderGeometry, cylinderMaterial);
       cylinder.rotation.z = Math.PI / 2;
       cylinder.rotation.y = alpha;
       cylinder.position.set(Cx, Cy, Cz);
       scene.add( cylinder );
   }
   var geometry1;
   var line1;
   function drawLine1() {
       var material = new THREE.LineBasicMaterial({
           color: 0x0000ff
       });
       geometry1 = new THREE.Geometry();
       geometry1.vertices.push(
           new THREE.Vector3(Bx - R, By ,Bz),
           new THREE.Vector3(Cx - 2*R, Cy, cylinder.position.z + R * Math.sin(alpha) )
       );
       line1 = new THREE.Line(geometry1, material);
       scene.add(line1);
   }
   var geometry2;
   var line2;
   function drawLine2() {
       var material = new THREE.LineBasicMaterial({
           color: 0x0000ff
       });
       geometry2 = new THREE.Geometry();
       geometry2.vertices.push(
           new THREE.Vector3(Bx + R, By ,Bz),
           new THREE.Vector3( cylinder.position.x + R * Math.cos(alpha), Cy, cylinder.position.z -
               R * Math.sin(alpha) )
       );
       line2 = new THREE.Line(geometry2, material);
       scene.add(line2);
   }
   var arrow1;
   function drawArrow() {
       var dir1 = new THREE.Vector3(0, -By, 0);
       dir1.normalize();
       var origin1 = new THREE.Vector3(Bx, By, Bz);
       var length1 = R;
        arrow1 = new THREE.ArrowHelper(dir1, origin1, length1);
       scene.add(arrow1);
   }
   function drawScene() {
       drawBox();
       drawCylinder();
       drawLine1();
       drawLine2();
       drawArrow();
   }
   var dirr =  new THREE.Vector3(0, By, 0);
   dirr.normalize();
   function refreshScene() {
       box.scale.x = 2 * parameters.R;
       cylinder.scale.y = 2 * parameters.R;
       cylinder.position.y = By - parameters.L + (1 - Math.cos(parameters.angle));
       geometry1.vertices[0].y = By;
       geometry1.vertices[0].x = Bx - box.scale.x;
       geometry1.verticesNeedUpdate = true;
       geometry1.vertices[1].x = Cx - cylinder.scale.y * Math.cos(parameters.angle);
       geometry1.vertices[1].y = (By - parameters.L) + (1 - Math.cos(parameters.angle));
       geometry1.vertices[1].z = cylinder.scale.y * Math.sin(parameters.angle);
       geometry2.vertices[0].y = By ;
       geometry2.vertices[0].x = Bx + box.scale.x;
       geometry2.verticesNeedUpdate = true;
       geometry2.vertices[1].x = cylinder.scale.y * Math.cos(parameters.angle) + Cx;
       geometry2.vertices[1].y = (By - parameters.L) + (1 - Math.cos(parameters.angle));
       geometry2.vertices[1].z = -cylinder.scale.y * Math.sin(parameters.angle);
       cylinder.rotation.y = parameters.angle;


       if(Math.sin(parameters.angle) > 0.2 ) {
           arrow1.setDirection(dirr);
       }
       arrow1.setLength((parameters.P * (Math.sin(parameters.angle)) / (Math.sqrt(parameters.L -
           4 * Math.sin(parameters.angle / 2) * Math.sin(parameters.angle / 2))) ), 0.1, 0.1);
       }


   function init() {
       scene = new THREE.Scene();
       camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000);
       renderer = new THREE.WebGLRenderer();
       renderer.setSize(window.innerWidth, window.innerHeight);
       renderer.setClearColor(0x808080, 1.0);
       var axes = new THREE.AxisHelper(20);
       scene.add(axes);
       drawScene();
       camera.position.x = 5;
       camera.position.y = 7;
       camera.position.z = 7;
       camera.lookAt(0, 0, 0);
       document.getElementById("WebGL").appendChild(renderer.domElement);
       controls = new THREE.OrbitControls(camera, renderer.domElement);
       stats = initStats();
       renderScene();
   }
   function renderScene() {
       stats.update();
       requestAnimationFrame(renderScene);
       refreshScene();
       renderer.render(scene, camera);
   }
   function initStats() {
       stats = new Stats();
       stats.setMode(0);
       stats.domElement.style.position = '0px';
       stats.domElement.style.left = '0px';
       stats.domElement.style.top = '0px';
       document.getElementById("Stats-output").appendChild(stats.domElement);
       return stats;
   }
   window.onload = init;

</script> </body>

</html>