Цилиндр и наклонная плоскость (48.29) — различия между версиями

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
(→‎Решение задачи)
(→‎Разработка)
Строка 55: Строка 55:
 
<syntaxhighlight lang="javascript" line start="1" enclose="div">
 
<syntaxhighlight lang="javascript" line start="1" enclose="div">
 
<!DOCTYPE html>
 
<!DOCTYPE html>
−
    <html>
+
 
−
    <head>
+
<html>
−
<title>4829</title>
+
 
−
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\three.js"></script>
+
<head>
−
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OBJLoader.js"></script>
+
    <title>Example 05.01 - Basic 2D geometries - Plane</title>
−
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\MTLLoader.js"></script>
+
     <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\three.js"></script>
−
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OBJMTLLoader.js"></script>
+
     <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\OBJLoader.js"></script>
−
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\jquery-1.9.0.js"></script>
+
     <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\MTLLoader.js"></script>
−
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\stats.js"></script>
+
     <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\OBJMTLLoader.js"></script>
−
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\dat.gui.js"></script>
+
     <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\jquery-1.9.0.js"></script>
−
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\chroma.js"></script>
+
     <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\stats.js"></script>
−
     <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\TrackballControls.js"></script>
+
     <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\dat.gui.js"></script>
−
<script type="text/javascript" src="http://tm.spbstu.ru/htmlets/VaraevV/mesherskiy\OrbitControls.js"></script>
+
     <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\chroma.js"></script>
−
     
+
     <script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\TrackballControls.js"></script>
 +
<script type="text/javascript" src="C:\Users\s1\Desktop\JavaScript, Wolfram\libs\OrbitControls.js"></script>
 +
    <style>
 +
        body {
 +
            /* set margin to 0 and overflow to hidden, to go fullscreen */
 +
            margin: 0;
 +
            overflow: hidden;
 +
        }
 
     </style>
 
     </style>
−
    </head>
+
</head>
−
    <body>
+
<body>
  
−
    <div id="Stats-output">
+
<div id="Stats-output">
−
    </div>
+
</div>
 +
<!-- Div which will hold the Output -->
 +
<div id="WebGL-output">
 +
</div>
  
−
    <div id="WebGL-output">
+
<!-- Javascript code that runs our Three.js examples -->
−
    </div>
+
<script type="text/javascript">
  
 +
    // once everything is loaded, we run our Three.js stuff.
 +
    $(function () {
  
−
    <script type="text/javascript">
+
        var stats = initStats();
  
−
    $(function () {
+
        // create a scene, that will hold all our elements such as objects, cameras and lights.
−
var a = 0;
+
        var scene = new THREE.Scene();
−
var g = 9.8;
+
 
−
var m = 20;
+
        // create a camera, which defines where we're looking at.
−
var m1 = 15;
+
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
−
var stats = initStats();
+
 
−
        var scene = new THREE.Scene();
+
        // create a render and set the size
−
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
+
        var webGLRenderer = new THREE.WebGLRenderer();
−
        var renderer = new THREE.WebGLRenderer();
+
        webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
−
        renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
+
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
−
        renderer.setSize(window.innerWidth, window.innerHeight);
+
        webGLRenderer.shadowMapEnabled = true;
−
        renderer.shadowMapEnabled = true;
+
 
−
var spotLight = new THREE.SpotLight( 0xffffff );
+
        var plane = createMesh(new THREE.PlaneGeometry(10, 14, 4, 4));
−
spotLight.position.set( -100, 0, -10 ); //-40, 60, -10
+
        // add the sphere to the scene
−
scene.add(spotLight );
+
        scene.add(plane);
−
var ugol= 135;
+
 
−
var alpha0 = Math.cos(ugol*Math.PI/180);
+
        // position and point the camera to the center of the scene
−
var step = 0;
+
        camera.position.x = -20;
−
var plane = createMesh0(new THREE.PlaneGeometry(1000, 2000, 50, 50));
+
        camera.position.y = 30;
−
scene.add(plane);
+
        camera.position.z = 40;
−
var cube = createMesh(new THREE.CubeGeometry(2, 200, 800));
+
        camera.lookAt(new THREE.Vector3(10, 0, 0));
−
cube.position.x=0;
+
 
−
cube.position.y=0;
+
 
−
cube.position.z=0;
+
        // add spotlight for the shadows
−
scene.add(cube);
+
        var spotLight = new THREE.SpotLight(0xffffff);
−
var cylinder1 = createMesh1(new THREE.CylinderGeometry(25, 25, 60, 15, 1));
+
        spotLight.position.set(-40, 60, -10);
−
cylinder1.position.x=cube.position.x-400*Math.cos((180-ugol)*Math.PI/180)+25*Math.sin((180-ugol)*Math.PI/180);
+
        scene.add(spotLight);
−
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);
+
        // add the output of the renderer to the html element
−
var c = cylinder1.position.x;
+
        $("#WebGL-output").append(webGLRenderer.domElement);
−
var d = cylinder1.position.z;
+
 
−
scene.add(cylinder1);
+
        // call the render function
−
var group1 = new THREE.Object3D();
+
        var step = 0;
−
group1.add(cube);
+
 
−
group1.add(cylinder1);
+
 
−
group1.position.x = 0;
+
        // setup the control gui
−
group1.position.y = 0;
+
        var controls = new function () {
−
group1.position.z=0;
+
            // we need the first child, since it's a multimaterial
−
scene.add(group1);
+
 
−
+
 
−
function createMesh0(geom) {
+
            this.width = plane.children[0].geometry.width;
−
                  var meshMaterial = new THREE.MeshNormalMaterial();
+
            this.height = plane.children[0].geometry.height;
−
                  meshMaterial.side = THREE.DoubleSide;
+
 
−
                  var wireFrameMat = new THREE.MeshBasicMaterial();
+
            this.widthSegments = plane.children[0].geometry.widthSegments;
−
                  wireFrameMat.wireframe = true;
+
            this.heightSegments = plane.children[0].geometry.heightSegments;
−
                  var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
+
 
−
                  return plane;
+
            this.redraw = function () {
−
          }
+
                // remove the old plane
−
            function createMesh(geom) {
+
                scene.remove(plane);
−
            var meshMaterial = new THREE.MeshNormalMaterial();
+
                // create a new one
−
            meshMaterial.side = THREE.DoubleSide;
+
                plane = createMesh(new THREE.PlaneGeometry(controls.width, controls.height, Math.round(controls.widthSegments), Math.round(controls.heightSegments)));
−
            var wireFrameMat = new THREE.MeshBasicMaterial();
+
                // add it to the scene.
−
            wireFrameMat.wireframe = true;
+
                scene.add(plane);
−
            var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
+
            };
−
            return mesh;
+
        }
−
            }
+
 
−
function createMesh1(geom) {
+
        var gui = new dat.GUI();
−
                        var mat = new THREE.MeshNormalMaterial();
+
        gui.add(controls, 'width', 0, 40).onChange(controls.redraw);
−
var mesh = new THREE.Mesh(geom,mat);
+
        gui.add(controls, 'height', 0, 40).onChange(controls.redraw);
−
return mesh;
+
        ;
−
          }
+
        gui.add(controls, 'widthSegments', 0, 10).onChange(controls.redraw);
 +
        ;
 +
        gui.add(controls, 'heightSegments', 0, 10).onChange(controls.redraw);
 +
        ;
 +
 
 +
 
 +
        render();
 +
 
 +
        function createMesh(geom) {
 +
 
 +
            // assign two materials
 +
            var meshMaterial = new THREE.MeshNormalMaterial();
 +
            meshMaterial.side = THREE.DoubleSide;
 +
            var wireFrameMat = new THREE.MeshBasicMaterial();
 +
            wireFrameMat.wireframe = true;
 +
 
 +
            // create a multimaterial
 +
            var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
 +
 
 +
            return plane;
 +
        }
 +
 
 +
        function render() {
 +
            stats.update();
 +
 
 +
            plane.rotation.y = step += 0.01;
 +
 
 +
            // render using requestAnimationFrame
 +
            requestAnimationFrame(render);
 +
            webGLRenderer.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;
 +
        }
 +
    });
  
−
        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 = 800;
 
−
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,0.2);
 
−
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.6*a;
 
−
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;  
 
−
}
 
−
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();
 
−
            stats.setMode(0); // 0: fps, 1: ms
 
−
            stats.domElement.style.position = 'absolute';
 
−
            stats.domElement.style.left = '0px';
 
−
            stats.domElement.style.top = '0px';
 
−
            $("#Stats-output").append(stats.domElement);
 
−
            return stats;
 
−
          }
 
−
    });
 
 
</script>
 
</script>
 
</body>
 
</body>

Версия 12:38, 22 декабря 2017

  • "Задача - Мещерский (48.29)"

Условие

На гладкой горизонтальной плоскости помещена треугольная призма ABC массы m, которая может скользить без трения по этой плоскости; по грани призмы AB катится без скольжения однородный круглый цилиндр массы m1. Определить ускорение призмы.

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

Используем уравнение Лагранжа 2-го рода:

[math]\frac{d}{dt}\left(\frac{\partial L}{\partial\dot q_i}\right) - \frac{\partial L}{\partial q_i} = Q , (i = 1,2)[/math] , где 

L = T - П - функция Лагранжа
T - кинетическая энергия системы
П - потенциальная энергия системы
q - независимые обобщенные координаты
Q - непотенциальная обобщённая сила

В данной задаче в качестве обобщенных координат примем изменяющиеся координату призмы [math]x[/math] и координату цилиндра [math]c[/math] по оси, направленной вдоль наклонной плоскости [math]\varphi [/math]. Представим:

[math]T = T_1+T_2[/math], где [math]T_1[/math] - кинетическая энергия катка массы [math]m_1[/math], а [math]Т_2[/math] - треугольной призмы массы [math]m[/math].

Треугольная призма откатывается вдоль оси [math]x[/math], следовательно:

[math]T_2 = \frac{1}{2}m\dot x^{2}[/math]

Движение цилиндра массы [math]m_1[/math] плоское.

[math]T_1 = \frac{1}{2}m_1V_с^{2}+\frac{1}{4}m_1r^{2} ω^{2}[/math]

Где [math]V_с[/math] - абсолютная скорость центра масс цилиндра массой [math]m_1[/math]:

[math]V_c= \dot S_c \cos\alpha - \dot x[/math]

[math] ω= \frac{1}{r}\dot S_c[/math]

Здесь [math]\dot S_c [/math] - относительная скорость

[math]T = T_1+T_2= \frac{1}{2}m\dot x^{2} +\frac{1}{2}m_1(\dot S_c \cos^{2}\alpha - \dot x)^{2}+\frac{1}{4}m_1\dot S_c^{2}[/math]

Получаем два равенства, соответствующие двум уравнениям Лагранжа:

[math]m\ddot x -m_1(\ddot S_c \cos^{2}\alpha - \ddot x)=m_1g\cos\alpha\sin\alpha[/math]

[math]m_1(\ddot S_c \cos^{2}\alpha - \ddot x)\cos^{2}\alpha+\frac{m_1}{2}\ddot S_c=m_1g\sin\alpha [/math]

Откуда получаем:

[math]\ddot x=a=-g\frac{m_1\sin 2\alpha}{3(m+m_1)-2m_1\cos^{2}\alpha}[/math]

Реализация на 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>
Источник — «http://tm.spbstu.ru/?title=Цилиндр_и_наклонная_плоскость_(48.29)&oldid=49427»