Мещерский 48.15 — различия между версиями

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
(→‎Решение)
 
(не показаны 3 промежуточные версии 2 участников)
Строка 5: Строка 5:
 
== Решение ==
 
== Решение ==
  
−
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Trotskaya_VV/trockayavv.html |width=850 |height=400 |border=0 }}
+
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Trotskaya_VV/trockayavv.html |width=1050 |height=600 |border=0 }}
  
 
==Код программы==
 
==Код программы==
 
<div class="mw-collapsible mw-collapsed">
 
<div class="mw-collapsible mw-collapsed">
−
'''Текст программы на языке JavaScript:'''
+
'''Текст программы на языке JavaScript:''' <div class="mw-collapsible-content">
−
<div id="WebGL-output">
+
<syntaxhighlight lang="javascript" line start="1" enclose="div">
−
</div>
+
var renderer, scene, camera, stats, axes;
−
<div id="Stats-output">
+
  var control, controls, controls1, spotLight; var dt = 1/60;
−
</div>
+
  var g = 9.8;
−
<!--Javascript code that runs our Three.js examples -->
+
  var length = 30;
−
<script type="text/javascript">
+
  var cubeY = 25;
−
// once everything is loaded, we run our Three.js stuff.
 
−
$(function () {
 
−
var dt = 1/60;
 
−
var g = 9.8;
 
−
function ksi(t) {
 
−
return 0.125*t*t;
 
−
}
 
−
function dksi(t) {
 
−
return (ksi(t+0.001)-ksi(t))/0.001;
 
−
}
 
−
function ddksi(t) {
 
−
return (dksi(t+0.001)-dksi(t))/0.001;
 
−
}
 
−
var c = new function() {
 
−
this.animate=false;
 
−
this.alpha=Math.PI/6;
 
−
this.m=1;
 
−
this.l=4;
 
−
this.t=0;
 
−
this.fi = 0;
 
−
<!-- this.eps=-g/this.l*Math.sin(this.fi)-2/this.l*Math.cos(this.fi-this.alpha); -->
 
−
<!-- this.omega=this.eps*this.t; -->
 
−
<!-- this.ksi=0.125*this.t*this.t; -->
 
−
this.calculate = function() {
 
−
if(this.t>Math.sqrt(40*8)) {this.t=0};
 
−
this.dksi = dksi(this.t);
 
−
this.ddksi = ddksi(this.t);
 
−
this.ksi=ksi(this.t);
 
−
this.eps=-g/this.l*Math.sin(this.fi)-this.ddksi/this.l*Math.cos(this.fi-this.alpha);
 
−
this.omega=this.eps*this.t;
 
−
this.fi=Math.PI/6*Math.sin(Math.sqrt(g/this.l)*this.t+Math.PI/6);//this.eps*this.t*this.t/2;
 
−
}
 
−
this.calculate();
 
−
this.setDefault = function() {
 
−
this.t = 0;
 
−
this.calculate();
 
−
}
 
−
}
 
−
console.log(c);
 
−
var gui = new dat.GUI();
 
−
var animeChange = gui.add(c,'animate');
 
−
var alphaChange = gui.add(c,'alpha',0,Math.PI/3);
 
−
gui.add(c,'ksi').listen();
 
−
gui.add(c,'t').listen();
 
−
gui.add(c,'fi').listen();
 
−
gui.add(c,'omega').listen();
 
−
gui.add(c,'eps').listen();
 
−
 
−
 
−
animeChange.onFinishChange(function(value) {
 
−
c.setDefault();
 
−
c.calculate();
 
−
});
 
−
alphaChange.onFinishChange(function(value) {
 
−
c.setDefault();
 
−
c.calculate();
 
−
});
 
−
 
−
 
−
var scene = new THREE.Scene();
 
−
 
−
/*
 
−
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight , 0.1, 1000);
 
−
camera.position.x = 10;
 
−
camera.position.y = 10;
 
−
camera.position.z = 50;
 
−
*/
 
−
//*z
 
−
var camera = new THREE.OrthographicCamera( window.innerWidth / - 50, window.innerWidth / 50, window.innerHeight / 50, window.innerHeight / - 50, 1, 100 );
 
−
camera.position.x = 0;
 
−
camera.position.y = 0;
 
−
camera.position.z = 30;
 
−
//*/
 
−
var renderer = new THREE.WebGLRenderer();
 
−
renderer.setClearColor(0xe2f1fd);
 
−
renderer.setSize(window.innerWidth, window.innerHeight);
 
−
while(scene.children.length > 0){
 
−
scene.remove(scene.children[0]);
 
−
}
 
−
var axes = new THREE.AxesHelper( 20 );
 
−
scene.add(axes);
 
−
 
−
control = new THREE.OrbitControls(camera,renderer.domElement);
 
−
 
−
// ��������� ������
 
−
<!-- function Curve1() { -->
 
−
    <!-- THREE.Curve.call(this); -->
 
−
    <!-- }; -->
 
−
    <!-- Curve1.prototype = Object.create(THREE.Curve.prototype); -->
 
−
    <!-- Curve1.prototype.constructor = Curve1; -->
 
−
    <!-- Curve1.prototype.getPoint = function(t) { -->
 
−
    <!-- var tx = t*c.ksi*Math.cos(c.alpha); -->
 
−
    <!-- var ty = t*c.ksi*Math.sin(c.alpha); -->
 
−
    <!-- return new THREE.Vector3(tx,ty,0); -->
 
−
    <!-- }; -->
 
−
    <!-- var path1 = new Curve1(); -->
 
−
    <!-- scene.add(new THREE.Mesh(new THREE.TubeGeometry(path1,15,0.2,3), new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true}))); -->
 
−
var h = 40
 
−
var cyl = new THREE.Mesh(new THREE.CylinderGeometry(0.2,0.2,h,32,5,0), new THREE.MeshLambertMaterial({color: 0xEEEEEE, wireframe:false}));
 
−
scene.add(cyl);
 
−
 
−
// ������
 
−
var pod = new THREE.Mesh(new THREE.SphereGeometry(0.4,8,8), new THREE.MeshLambertMaterial({color: 0xff0000, wireframe:false}));
 
−
scene.add(pod);
 
−
 
−
var tab = new THREE.Mesh(new THREE.CylinderGeometry(0.2,0.2,c.l,32,5,0), new THREE.MeshLambertMaterial({color: 0xEEEEEE, wireframe:false}));
 
−
tab.rotation.set(0,0,c.fi);
 
−
tab.position.set(pod.position.x+c.l/2*Math.sin(c.fi),pod.position.y-c.l/2*Math.cos(c.fi),0);
 
−
scene.add(tab);
 
−
 
  
−
var w = new THREE.Mesh(new THREE.SphereGeometry(0.8,8,8), new THREE.MeshLambertMaterial({color: 0x00ff00, wireframe:false}));
+
  function init()
−
scene.add(w);
+
  {
−
+
    scene = new THREE.Scene();  // создаем сцену
 +
    camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000); // создаем камеру
  
−
var spotLight = new THREE.SpotLight( 0xffffff );
+
    renderer = new THREE.WebGLRenderer();
−
spotLight.position.set( 0, 80, 30 );
+
    renderer.setClearColor(0XEEEEEE,1);
−
spotLight.castShadow = true;
+
    renderer.setSize(window.innerWidth,window.innerHeight);
−
scene.add(spotLight );
+
    renderer.shadowMap.enabled=true;
−
//camera.lookAt(scene.position);
+
 
−
+
    axes = new THREE.AxisHelper(20); 
−
function initStats()
+
    scene.add(axes);
−
{
+
 
−
var stats=new Stats();
+
 
−
stats.setMode(0);
+
 
−
stats.domElement.style.position='0px';
+
    control = new THREE.OrbitControls(camera,renderer.domElement);
−
stats.domElement.style.left='0px';
+
 
−
stats.domElement.style.top='0px';
+
    controls = new function()
−
document.getElementById("Stats-output").appendChild(stats.domElement);
+
    {
−
return stats;
+
      this.alpha = Math.PI/6;
−
};
+
      this.blockRadius = 3;
 +
      this.m1 = 3;
 +
      this.m2 = 1;
 +
      this.animate = false;
 +
      this.showAcs = false;
 +
      this.reset  = function() {
 +
        controls1.t = 0;
 +
        ReDraw();
 +
      }
 +
    }
 +
 
 +
    controls1=new function() 
 +
    {
 +
      this.t = 0.0;
 +
      this.a = (controls.m1*g*Math.sin(controls.alpha)-controls.m2*g)/(2*controls.m1+controls.m2);
 +
    }
 +
 
 +
    var gui = new dat.GUI();
 +
    gui.add(controls,'alpha', 0.1,Math.PI/3).onChange(controls.reset);
 +
    gui.add(controls,'m1',1,20).onChange(controls.reset);
 +
    gui.add(controls,'m2',1,20).onChange(controls.reset);
 +
    gui.add(controls, 'animate');
 +
    gui.add(controls, 'showAcs').onChange(ReDraw);
 +
    gui.add(controls, 'reset');
 +
    //gui.add(controls,'m',1,10).onChange(ReDraw);
 +
    gui.add(controls1, 't').listen();
 +
    gui.add(controls1, 'a').listen();
 +
 
 +
    ambientLight=new THREE.AmbientLight(0x000000);
 +
    scene.add(ambientLight);
 +
    document.getElementById("WebGL").appendChild(renderer.domElement);
 +
    // Camera
 +
    camera.position.x = -30;
 +
    camera.position.y = 40;
 +
    camera.position.z = 80;
 +
    camera.lookAt(scene.position);
 +
    // Ligth
 +
    spotLight = new THREE.SpotLight( 0xffffff );
 +
    spotLight.position.set( -40, 80, 50 );
 +
    spotLight.castShadow = true;
 +
    scene.add(spotLight );
 +
 
 +
    // Main Plane
 +
    var planeGeometry2 = new THREE.PlaneGeometry(length,20);
 +
    var planeMaterial2 = new THREE.MeshLambertMaterial({color: 0x6F482A, side: THREE.DoubleSide});
 +
    plane1 = new THREE.Mesh(planeGeometry2,planeMaterial2);
 +
    plane1.rotation.x = -0.5*Math.PI;
 +
    plane1.position.x = -length/2;
 +
    plane1.position.y = 0;
 +
    plane1.position.z = 0;
 +
    plane1.receiveShadow = true;
 +
    scene.add(plane1);
 +
 
 +
 
 +
    var planeGeometry2 = new THREE.PlaneGeometry(length,20,6,4);
 +
    var planeMaterial2 = new THREE.MeshLambertMaterial({color: 0x6F482A, wireframe: true});
 +
    plane2 = new THREE.Mesh(planeGeometry2,planeMaterial2);
 +
    plane2.rotation.x = -0.5*Math.PI;
 +
    plane2.position.set(length/2,0,0);
 +
    scene.add(plane2);
 +
 
 +
    stats = initStats();
 +
    Draw();
 +
    renderScene();
 +
 
 +
    window.addEventListener('resize',onResize,false);
 +
  };
 +
 
 +
  function ReDraw()  // функция, перерисовывающая всю картинку
 +
  {
 +
    controls1.a = (controls.m1*g*Math.sin(controls.alpha)-controls.m2*g)/(2*controls.m1+controls.m2);
 +
    scene.remove(block1);
 +
    scene.remove(block2);
 +
    scene.remove(cube);
 +
    scene.remove(plane3);
 +
    scene.remove(torus);
 +
    scene.remove(cr1);
 +
    scene.remove(cr2);
 +
    scene.remove(cr3);
 +
    scene.remove(arr1);
 +
    scene.remove(arr2);
 +
    scene.remove(arr3);
 +
    scene.remove(arr4);
 +
    Draw();
 +
  }
 +
 
 +
  function Draw()
 +
  {
 +
 
 +
    // Second Plane
 +
    var planeGeometry3 = new THREE.PlaneGeometry(length/Math.cos(controls.alpha),20);
 +
    var planeMaterial3 = new THREE.MeshLambertMaterial({color: 0x6F482A, wireframe: false, side: THREE.DoubleSide});
 +
    plane3 = new THREE.Mesh(planeGeometry3,planeMaterial3);
 +
    plane3.rotation.set(-0.5*Math.PI,-controls.alpha,0);
 +
    plane3.position.set(length/2,0.5*length*Math.tan(controls.alpha),0);
 +
    plane3.receiveShadow = true;
 +
    scene.add(plane3);
 +
    // Block1
 +
    block1 = new THREE.Mesh(new THREE.CylinderGeometry(controls.blockRadius,controls.blockRadius,3,32), new THREE.MeshLambertMaterial({color: 0xA8A8A8, wireframe: false, side: THREE.DoubleSide}));
 +
    block1.rotation.set(-0.5*Math.PI,0,0);
 +
    block1.position.set(length,length*Math.tan(controls.alpha),0);
 +
    block1.castShadow = true;
 +
    scene.add(block1);
 +
    // Block2
 +
    block2 = new THREE.Mesh(new THREE.CylinderGeometry(controls.blockRadius,controls.blockRadius,3,32), new THREE.MeshLambertMaterial({color: 0xA8A8A8, wireframe: false, side: THREE.DoubleSide}));
 +
    block2.rotation.set(-0.5*Math.PI,0,0);
 +
    block2.position.x = length/2-controls1.a*controls1.t*controls1.t*Math.cos(controls.alpha)*0.5;
 +
    block2.position.y = block2.position.x*Math.tan(controls.alpha)+controls.blockRadius/Math.cos(controls.alpha);
 +
    block2.castShadow = true;
 +
    scene.add(block2);
 +
    // Thorus
 +
    torus = new THREE.Mesh( new THREE.TorusGeometry( 6, 0.1, 16, 100, controls.alpha ), new THREE.MeshBasicMaterial( { color: 0xff0000 } ) );
 +
    torus.position.set(0,0,9.9)
 +
    scene.add(torus);
 +
    // Cube
 +
    cube = new THREE.Mesh(new THREE.BoxGeometry(4, 4, 4), new THREE.MeshLambertMaterial({color: 0x7CA05A, wireframe: false}));
 +
    cube.position.set(length+controls.blockRadius,-cubeY+controls1.a*controls1.t*controls1.t,0);
 +
    scene.add(cube);
 +
    //More rope
 +
    cr1 = new THREE.Mesh(new THREE.CylinderGeometry(0.2,0.2,(length*Math.tan(controls.alpha)+cubeY),32), new THREE.MeshLambertMaterial({color: 0x000000, wireframe: false}));
 +
    cr1.rotation.set(0,0,0);
 +
    cr1.position.set(length+controls.blockRadius, (length*Math.tan(controls.alpha)+cube.position.y)/2, 0);
 +
    cr1.scale.y = (length*Math.tan(controls.alpha)-cube.position.y)/(length*Math.tan(controls.alpha)+cubeY);
 +
    cr1.castShadow = true;
 +
    scene.add(cr1);
 +
 
 +
    cr2 = new THREE.Mesh(new THREE.CylinderGeometry(0.2,0.2,1), new THREE.MeshLambertMaterial({color: 0x000000, wireframe: false}));
 +
    cr2.rotation.set(0,0,-Math.PI/2+controls.alpha);
 +
    cr2.position.set((length+block2.position.x-controls.blockRadius*Math.sin(controls.alpha))/2,(length*Math.tan(controls.alpha)+block2.position.y+controls.blockRadius*Math.cos(controls.alpha))/2, 0);
 +
    cr2.scale.y = (length-block2.position.x-controls.blockRadius*Math.sin(controls.alpha))/Math.cos(controls.alpha);
 +
    cr2.castShadow = true;
 +
    scene.add(cr2);
 +
 
 +
    function Curve2() {
 +
      THREE.Curve.call(this);
 +
    };
 +
    Curve2.prototype = Object.create(THREE.Curve.prototype);
 +
    Curve2.prototype.constructor = Curve2;
 +
    Curve2.prototype.getPoint = function(t) {
 +
      var tx = length+controls.blockRadius*Math.cos(controls.alpha+Math.PI*0.5-t*(controls.alpha+Math.PI*0.5));
 +
      var ty = length*Math.tan(controls.alpha)+controls.blockRadius*Math.sin(controls.alpha+Math.PI*0.5-t*(controls.alpha+Math.PI*0.5));
 +
      return new THREE.Vector3(tx,ty,0);
 +
    };
 +
    var path2 = new Curve2();
 +
    cr3 = new THREE.Mesh(new THREE.TubeGeometry(path2,20,0.2,8), new THREE.MeshBasicMaterial({color: 0x000000, wireframe: false}));
 +
    scene.add(cr3);
 +
 
 +
    //arrows
 +
    arr1 = new THREE.Mesh(new THREE.CylinderGeometry(0.3,0.3,4,32), new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: false}));
 +
    arr1.rotation.set(0,0,0);
 +
    arr1.position.set(length+controls.blockRadius,cube.position.y+controls.m2*2+controls1.a*2,0);
 +
    arr1.scale.y = controls1.a;
 +
    if (!controls.showAcs) {arr1.visible = false}
 +
    else {arr1.visible = true}
 +
    scene.add(arr1);
 +
    arr2 = new THREE.Mesh(new THREE.CylinderGeometry(0,0.7,Math.sign(controls1.a)*2,32), new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: false}));
 +
    arr2.rotation.set(0,0,0);
 +
    arr2.position.set(length+controls.blockRadius,cube.position.y+controls.m2*2+controls1.a*4,0);
 +
    if (!controls.showAcs) {arr2.visible = false}
 +
    else {arr2.visible = true}
 +
    scene.add(arr2);
 +
    arr3 = new THREE.Mesh(new THREE.CylinderGeometry(0.3,0.3,4,32), new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true}));
 +
    arr3.rotation.set(0,0,-1.5*Math.PI+controls.alpha);
 +
    arr3.position.set(block2.position.x-Math.sign(controls1.a)*(controls.blockRadius)*Math.cos(controls.alpha)-controls1.a*2*Math.cos(controls.alpha),block2.position.y-Math.sign(controls1.a)*(controls.blockRadius)*Math.sin(controls.alpha)-controls1.a*2*Math.sin(controls.alpha),0);
 +
    arr3.scale.y = controls1.a;
 +
    if (!controls.showAcs) {arr3.visible = false}
 +
    else {arr3.visible = true}
 +
    scene.add(arr3);
 +
    arr4 = new THREE.Mesh(new THREE.CylinderGeometry(0,0.7,-Math.sign(controls1.a)*2,32), new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: false}));
 +
    arr4.rotation.set(0,0,-Math.PI/2+controls.alpha);
 +
    arr4.position.set(block2.position.x-Math.sign(controls1.a)*(controls.blockRadius)*Math.cos(controls.alpha)-controls1.a*4*Math.cos(controls.alpha),block2.position.y-Math.sign(controls1.a)*(controls.blockRadius)*Math.sin(controls.alpha)-controls1.a*4*Math.sin(controls.alpha),0);
 +
    if (!controls.showAcs) {arr4.visible = false}
 +
    else {arr4.visible = true}
 +
    scene.add(arr4);
 +
 
 +
    renderer.render(scene,camera);
 +
  }
 +
 
 +
  function renderScene()
 +
  {
 +
    if((block2.position.y <= controls.blockRadius) || (cube.position.y >= length*Math.tan(controls.alpha)-controls.blockRadius) || (((block2.position.y-block1.position.y)*(block2.position.y-block1.position.y)+(block2.position.x-block1.position.x)*(block2.position.x-block1.position.x)) <= 4*controls.blockRadius*controls.blockRadius)) {
 +
      controls1.t = 0;
 +
    }
 +
    if (controls.animate)
 +
    {
 +
      controls1.t+=dt;
 +
      ReDraw();
 +
    }
 +
 
 +
    stats.update();
 +
    requestAnimationFrame(renderScene);
 +
    renderer.render(scene,camera);
 +
  };
 +
 
 +
  function initStats()
 +
  {
 +
    var 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;
 +
  };
 +
 
 +
  function onResize()
 +
  {
 +
    camera.aspect=window.innerWidth/window.innerHeight;
 +
    camera.updateProjectionMatrix();
 +
    renderer.setSize(window.innerWidth,window.innerHeight);
 +
  }
 +
 
 +
  window.onload = init;
 +
</syntaxhighlight>
  
−
stats = initStats();
 
−
 
−
function renderScene() {
 
−
stats.update();
 
−
if(c.animate) {c.t+=dt;}
 
−
c.calculate();
 
−
cyl.rotation.set(0,0,-Math.PI/2+c.alpha);
 
−
cyl.position.set(h/2*Math.cos(c.alpha),h/2*Math.sin(c.alpha),0);
 
−
pod.position.set(c.ksi*Math.cos(c.alpha),c.ksi*Math.sin(c.alpha),0);
 
−
tab.rotation.set(0,0,c.fi);
 
−
tab.position.set(pod.position.x+c.l/2*Math.sin(c.fi),pod.position.y-c.l/2*Math.cos(c.fi),0);
 
−
w.position.set(pod.position.x+c.l*Math.sin(c.fi),pod.position.y-c.l*Math.cos(c.fi),0);
 
−
requestAnimationFrame(renderScene);
 
−
renderer.render(scene, camera);
 
−
}
 
−
go = function() {
 
−
$("#WebGL-output").append(renderer.domElement);
 
−
    renderScene();
 
−
};
 
−
go();
 
−
});
 
−
</script>
 
 
</div>
 
</div>
−
 
  
 
== Возможности программы ==
 
== Возможности программы ==

Текущая версия на 11:40, 22 декабря 2017

Задача: С помощью языка программирования JavaScript смоделировать колебания маятника, точка подвеса которого движется по заданному закону.

Выполнил: Троцкая Валерия, 23632/2

Решение[править]

Код программы[править]

Текст программы на языке JavaScript: 
  1 var renderer, scene, camera, stats, axes;
  2   var control, controls, controls1, spotLight;  var dt = 1/60;
  3   var g = 9.8;
  4   var length = 30;
  5   var cubeY = 25;
  6 
  7   function init()
  8   {
  9     scene = new THREE.Scene();  // создаем сцену
 10     camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);  // создаем камеру
 11 
 12     renderer = new THREE.WebGLRenderer();
 13     renderer.setClearColor(0XEEEEEE,1);
 14     renderer.setSize(window.innerWidth,window.innerHeight);
 15     renderer.shadowMap.enabled=true;
 16 
 17     axes = new THREE.AxisHelper(20);  
 18     scene.add(axes);
 19 
 20 
 21 
 22     control = new THREE.OrbitControls(camera,renderer.domElement);
 23 
 24     controls = new function() 
 25     {
 26       this.alpha = Math.PI/6;
 27       this.blockRadius = 3;
 28       this.m1 = 3;
 29       this.m2 = 1;
 30       this.animate = false;
 31       this.showAcs = false;
 32       this.reset  = function() {
 33         controls1.t = 0;
 34         ReDraw();
 35       }
 36     }
 37 
 38     controls1=new function()   
 39     {
 40       this.t = 0.0;
 41       this.a = (controls.m1*g*Math.sin(controls.alpha)-controls.m2*g)/(2*controls.m1+controls.m2);
 42     }
 43 
 44     var gui = new dat.GUI(); 
 45     gui.add(controls,'alpha', 0.1,Math.PI/3).onChange(controls.reset);
 46     gui.add(controls,'m1',1,20).onChange(controls.reset);
 47     gui.add(controls,'m2',1,20).onChange(controls.reset);
 48     gui.add(controls, 'animate');
 49     gui.add(controls, 'showAcs').onChange(ReDraw);
 50     gui.add(controls, 'reset');
 51     //gui.add(controls,'m',1,10).onChange(ReDraw);
 52     gui.add(controls1, 't').listen();
 53     gui.add(controls1, 'a').listen();
 54 
 55     ambientLight=new THREE.AmbientLight(0x000000);
 56     scene.add(ambientLight);
 57     document.getElementById("WebGL").appendChild(renderer.domElement);
 58     // Camera
 59     camera.position.x = -30;
 60     camera.position.y = 40;
 61     camera.position.z = 80;
 62     camera.lookAt(scene.position);
 63     // Ligth
 64     spotLight = new THREE.SpotLight( 0xffffff );
 65     spotLight.position.set( -40, 80, 50 );
 66     spotLight.castShadow = true;
 67     scene.add(spotLight );
 68 
 69     // Main Plane
 70     var planeGeometry2 = new THREE.PlaneGeometry(length,20);
 71     var planeMaterial2 = new THREE.MeshLambertMaterial({color: 0x6F482A, side: THREE.DoubleSide});
 72     plane1 = new THREE.Mesh(planeGeometry2,planeMaterial2);
 73     plane1.rotation.x = -0.5*Math.PI;
 74     plane1.position.x = -length/2;
 75     plane1.position.y = 0;
 76     plane1.position.z = 0;
 77     plane1.receiveShadow = true;
 78     scene.add(plane1);
 79 
 80 
 81     var planeGeometry2 = new THREE.PlaneGeometry(length,20,6,4);
 82     var planeMaterial2 = new THREE.MeshLambertMaterial({color: 0x6F482A, wireframe: true});
 83     plane2 = new THREE.Mesh(planeGeometry2,planeMaterial2);
 84     plane2.rotation.x = -0.5*Math.PI;
 85     plane2.position.set(length/2,0,0);
 86     scene.add(plane2);
 87 
 88     stats = initStats();
 89     Draw();
 90     renderScene();
 91 
 92     window.addEventListener('resize',onResize,false);
 93   };
 94 
 95   function ReDraw()  // функция, перерисовывающая всю картинку
 96   {
 97     controls1.a = (controls.m1*g*Math.sin(controls.alpha)-controls.m2*g)/(2*controls.m1+controls.m2);
 98     scene.remove(block1);
 99     scene.remove(block2);
100     scene.remove(cube);
101     scene.remove(plane3);
102     scene.remove(torus);
103     scene.remove(cr1);
104     scene.remove(cr2);
105     scene.remove(cr3);
106     scene.remove(arr1);
107     scene.remove(arr2);
108     scene.remove(arr3);
109     scene.remove(arr4);
110     Draw();
111   }
112 
113   function Draw()
114   {
115 
116     // Second Plane
117     var planeGeometry3 = new THREE.PlaneGeometry(length/Math.cos(controls.alpha),20);
118     var planeMaterial3 = new THREE.MeshLambertMaterial({color: 0x6F482A, wireframe: false, side: THREE.DoubleSide});
119     plane3 = new THREE.Mesh(planeGeometry3,planeMaterial3);
120     plane3.rotation.set(-0.5*Math.PI,-controls.alpha,0);
121     plane3.position.set(length/2,0.5*length*Math.tan(controls.alpha),0);
122     plane3.receiveShadow = true;
123     scene.add(plane3);
124     // Block1
125     block1 = new THREE.Mesh(new THREE.CylinderGeometry(controls.blockRadius,controls.blockRadius,3,32), new THREE.MeshLambertMaterial({color: 0xA8A8A8, wireframe: false, side: THREE.DoubleSide}));
126     block1.rotation.set(-0.5*Math.PI,0,0);
127     block1.position.set(length,length*Math.tan(controls.alpha),0);
128     block1.castShadow = true;
129     scene.add(block1);
130     // Block2
131     block2 = new THREE.Mesh(new THREE.CylinderGeometry(controls.blockRadius,controls.blockRadius,3,32), new THREE.MeshLambertMaterial({color: 0xA8A8A8, wireframe: false, side: THREE.DoubleSide}));
132     block2.rotation.set(-0.5*Math.PI,0,0);
133     block2.position.x = length/2-controls1.a*controls1.t*controls1.t*Math.cos(controls.alpha)*0.5;
134     block2.position.y = block2.position.x*Math.tan(controls.alpha)+controls.blockRadius/Math.cos(controls.alpha);
135     block2.castShadow = true;
136     scene.add(block2);
137     // Thorus
138     torus = new THREE.Mesh( new THREE.TorusGeometry( 6, 0.1, 16, 100, controls.alpha ), new THREE.MeshBasicMaterial( { color: 0xff0000 } ) );
139     torus.position.set(0,0,9.9)
140     scene.add(torus);
141     // Cube
142     cube = new THREE.Mesh(new THREE.BoxGeometry(4, 4, 4), new THREE.MeshLambertMaterial({color: 0x7CA05A, wireframe: false}));
143     cube.position.set(length+controls.blockRadius,-cubeY+controls1.a*controls1.t*controls1.t,0);
144     scene.add(cube);
145     //More rope
146     cr1 = new THREE.Mesh(new THREE.CylinderGeometry(0.2,0.2,(length*Math.tan(controls.alpha)+cubeY),32), new THREE.MeshLambertMaterial({color: 0x000000, wireframe: false}));
147     cr1.rotation.set(0,0,0);
148     cr1.position.set(length+controls.blockRadius, (length*Math.tan(controls.alpha)+cube.position.y)/2, 0);
149     cr1.scale.y = (length*Math.tan(controls.alpha)-cube.position.y)/(length*Math.tan(controls.alpha)+cubeY);
150     cr1.castShadow = true;
151     scene.add(cr1);
152 
153     cr2 = new THREE.Mesh(new THREE.CylinderGeometry(0.2,0.2,1), new THREE.MeshLambertMaterial({color: 0x000000, wireframe: false}));
154     cr2.rotation.set(0,0,-Math.PI/2+controls.alpha);
155     cr2.position.set((length+block2.position.x-controls.blockRadius*Math.sin(controls.alpha))/2,(length*Math.tan(controls.alpha)+block2.position.y+controls.blockRadius*Math.cos(controls.alpha))/2, 0);
156     cr2.scale.y = (length-block2.position.x-controls.blockRadius*Math.sin(controls.alpha))/Math.cos(controls.alpha);
157     cr2.castShadow = true;
158     scene.add(cr2);
159 
160     function Curve2() {
161       THREE.Curve.call(this);
162     };
163     Curve2.prototype = Object.create(THREE.Curve.prototype);
164     Curve2.prototype.constructor = Curve2;
165     Curve2.prototype.getPoint = function(t) {
166       var tx = length+controls.blockRadius*Math.cos(controls.alpha+Math.PI*0.5-t*(controls.alpha+Math.PI*0.5));
167       var ty = length*Math.tan(controls.alpha)+controls.blockRadius*Math.sin(controls.alpha+Math.PI*0.5-t*(controls.alpha+Math.PI*0.5));
168       return new THREE.Vector3(tx,ty,0);
169     };
170     var path2 = new Curve2();
171     cr3 = new THREE.Mesh(new THREE.TubeGeometry(path2,20,0.2,8), new THREE.MeshBasicMaterial({color: 0x000000, wireframe: false}));
172     scene.add(cr3);
173 
174     //arrows
175     arr1 = new THREE.Mesh(new THREE.CylinderGeometry(0.3,0.3,4,32), new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: false}));
176     arr1.rotation.set(0,0,0);
177     arr1.position.set(length+controls.blockRadius,cube.position.y+controls.m2*2+controls1.a*2,0);
178     arr1.scale.y = controls1.a;
179     if (!controls.showAcs) {arr1.visible = false}
180     else {arr1.visible = true}
181     scene.add(arr1);
182     arr2 = new THREE.Mesh(new THREE.CylinderGeometry(0,0.7,Math.sign(controls1.a)*2,32), new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: false}));
183     arr2.rotation.set(0,0,0);
184     arr2.position.set(length+controls.blockRadius,cube.position.y+controls.m2*2+controls1.a*4,0);
185     if (!controls.showAcs) {arr2.visible = false}
186     else {arr2.visible = true}
187     scene.add(arr2);
188     arr3 = new THREE.Mesh(new THREE.CylinderGeometry(0.3,0.3,4,32), new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true}));
189     arr3.rotation.set(0,0,-1.5*Math.PI+controls.alpha);
190     arr3.position.set(block2.position.x-Math.sign(controls1.a)*(controls.blockRadius)*Math.cos(controls.alpha)-controls1.a*2*Math.cos(controls.alpha),block2.position.y-Math.sign(controls1.a)*(controls.blockRadius)*Math.sin(controls.alpha)-controls1.a*2*Math.sin(controls.alpha),0);
191     arr3.scale.y = controls1.a;
192     if (!controls.showAcs) {arr3.visible = false}
193     else {arr3.visible = true}
194     scene.add(arr3);
195     arr4 = new THREE.Mesh(new THREE.CylinderGeometry(0,0.7,-Math.sign(controls1.a)*2,32), new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: false}));
196     arr4.rotation.set(0,0,-Math.PI/2+controls.alpha);
197     arr4.position.set(block2.position.x-Math.sign(controls1.a)*(controls.blockRadius)*Math.cos(controls.alpha)-controls1.a*4*Math.cos(controls.alpha),block2.position.y-Math.sign(controls1.a)*(controls.blockRadius)*Math.sin(controls.alpha)-controls1.a*4*Math.sin(controls.alpha),0);
198     if (!controls.showAcs) {arr4.visible = false}
199     else {arr4.visible = true}
200     scene.add(arr4);
201 
202     renderer.render(scene,camera);
203   }
204 
205   function renderScene()
206   {
207     if((block2.position.y <= controls.blockRadius) || (cube.position.y >= length*Math.tan(controls.alpha)-controls.blockRadius) || (((block2.position.y-block1.position.y)*(block2.position.y-block1.position.y)+(block2.position.x-block1.position.x)*(block2.position.x-block1.position.x)) <= 4*controls.blockRadius*controls.blockRadius)) {
208       controls1.t = 0;
209     }
210     if (controls.animate)
211     {
212       controls1.t+=dt;
213       ReDraw();
214     }
215 
216     stats.update();
217     requestAnimationFrame(renderScene);
218     renderer.render(scene,camera);
219   };
220 
221   function initStats()
222   {
223     var stats=new Stats();
224     stats.setMode(0);
225     stats.domElement.style.position='0px';
226     stats.domElement.style.left='0px';
227     stats.domElement.style.top='0px';
228     document.getElementById("Stats-output").appendChild(stats.domElement);
229     return stats;
230   };
231 
232   function onResize()
233   {
234     camera.aspect=window.innerWidth/window.innerHeight;
235     camera.updateProjectionMatrix();
236     renderer.setSize(window.innerWidth,window.innerHeight);
237   }
238 
239   window.onload = init;

Возможности программы[править]

  • изменение угла наклона прямой

Решение частного случая[править]

Условия задачи:

Точка подвеса маятника, состоящего из материальной точки массы [math]m[/math] на нерастяжимой нити длины [math]l[/math], движется по заданному закону [math]ξ=ξ0(t)[/math] по наклонной прямой, образующей угол [math]α[/math] с горизонтом. Составить уравнение движения маятника.

Решение:

Кинетическая энергия маятника [math]T = \frac{m{V}^2}{2}[/math] , где [math]\overline{V} = \overline{V_e} + \overline{V_r}[/math]. Здесь [math]V_e = \dot{ξ}, V_r = \dot{φ}l[/math]. Тогда квадрат скорости равен [math]{V}^2 = \dot{ξ}^2 + l^2\dot{φ}^2 + 2 l \dot{φ} \dot{ξ} cos(φ-α)[/math] и кинетическая энергия равна соответственно [math]T = \frac{m}{2}(\dot{ξ}^2 + l^2\dot{φ}^2 + 2 l \dot{φ} \dot{ξ} cos(φ-α))[/math] Потенциальная энергия будет равна [math]U = -m g l (1-cosφ)[/math]

Уравнение Лагранжа для системы с одной степенью свободы имеет вид: [math]\frac{d}{dt}(\frac{dT}{d\dot{φ}}) - \frac{dT}{d{φ}}= Q[/math]

Вычисляем производные, входящие в это уравнение
[math]\frac{dT}{d\dot{φ}} = \frac{m}{2}(2 l^2 \dot{φ} + 2 l \dot{ξ} cos(φ-α))[/math]
[math]\frac{dT}{dφ} = 0[/math]
[math]Q = \frac{dU}{dφ} = -m g l sinφ[/math]
[math]\frac{d}{dt}(\frac{dT}{d\dot{φ}}) = \frac{m}{2}(2 l^2 \dot{φ} + 2 l \dot{ξ} cos(φ-α))[/math]

Подставим полученные производные в уравнение Лагранжа: [math]m(l^2 {φ̈} + l {ξ̈} cos(φ-α)) = -m g l sinφ[/math] , поделим обе части уравнения на [math]l^2[/math] и получим


[math]{φ̈} + \frac{{ξ̈}}{l} cos(φ-α)) + \frac{g}{l} sinφ = 0[/math]
Источник — «http://tm.spbstu.ru/?title=Мещерский_48.15&oldid=49411»