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

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
(Реализация на языке JavaScript)
(Реализация на языке JavaScript)
Строка 79: Строка 79:
  
 
{{#widget:Iframe |url=http://library.tm.spbstu.ru/ws-htmlets/Mikhailova_AO/48_36.html|width=940 |height=400 |border=0 }}
 
{{#widget:Iframe |url=http://library.tm.spbstu.ru/ws-htmlets/Mikhailova_AO/48_36.html|width=940 |height=400 |border=0 }}
 +
 +
<div class="mw-collapsible mw-collapsed">
 +
'''Код программы на языке JavaScript:'''
 +
<div class="mw-collapsible-content">
 +
Файл '''"48_36.html"'''
 +
<syntaxhighlight lang="javascript" line start="1" enclose="div">
 +
 +
<!DOCTYPE html>
 +
<html>
 +
 +
<head>
 +
    <title>№48.36</title>
 +
  <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/libs/three.min.js"></script>
 +
    <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/Zhukova_Yu_V/48.24/lib/jquery-1.9.0.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>
 +
 +
    <style>
 +
        body {
 +
            /* set margin to 0 and overflow to hidden, to go fullscreen */
 +
            margin: 0;
 +
            overflow: hidden;
 +
        }
 +
    </style>
 +
</head>
 +
<body>
 +
 +
<div id="Stats-output">
 +
</div>
 +
<!-- 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 stats = initStats();
 +
 +
        // create a scene, that will hold all our elements such as objects, cameras and lights.
 +
        var scene = new THREE.Scene();
 +
        scene.fog = new THREE.Fog(0xaaaaaa, 0.010, 200);
 +
 +
        // 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(0xaaaaff, 1.0));
 +
        renderer.setSize(window.innerWidth, window.innerHeight);
 +
        renderer.shadowMapEnabled = true;
 +
 +
 +
        // create the ground plane
 +
        var planeGeometry = new THREE.PlaneGeometry(80,7.5);
 +
        var planeMaterial = new THREE.MeshBasicMaterial({color: 0x228b22});
 +
        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=15
 +
        plane.position.y=-1.55
 +
        plane.position.z=-1.1
 +
 +
        // add the plane to the scene
 +
        scene.add(plane);
 +
 +
 +
var postGeometry = new THREE.CubeGeometry(1.5,15,1.5);
 +
var postMaterial = new THREE.MeshLambertMaterial({color: 0xb22222});
 +
post = new THREE.Mesh(postGeometry,postMaterial);
 +
post.castShadow = true;
 +
post.receiveShadow = true;
 +
post.position.x = 5.5;
 +
post.position.y = plane.position.y + 7.5;
 +
post.position.z = 0;
 +
scene.add(post);
 +
 +
// create a truck
 +
        var truckGeometry = new THREE.CubeGeometry(10,2.5,5);
 +
        var truckMaterial = new THREE.MeshLambertMaterial({color: 0xdaa520});
 +
        var truck = new THREE.Mesh(truckGeometry, truckMaterial);
 +
        truck.castShadow = true;
 +
 +
        // position the truck
 +
        truck.position.x=-5;
 +
        truck.position.y=1.25;
 +
        truck.position.z=0;
 +
 +
        // add the cube to the scene
 +
        scene.add(truck);
 +
 +
//wheels
 +
var wheelGeometry = new THREE.TorusGeometry(1, 0.55, 32, 32);
 +
var wheelMaterial = new THREE.MeshLambertMaterial({color: 0xd2691e});
 +
var wheel1 = new THREE.Mesh(wheelGeometry, wheelMaterial);
 +
wheel1.castShadow = true;
 +
wheel1.position.x=-1.5;
 +
wheel1.position.y=plane.position.y + 1.25;
 +
wheel1.position.z=2.25;
 +
scene.add(wheel1);
 +
 +
var wheel2 = new THREE.Mesh(wheelGeometry, wheelMaterial);
 +
wheel2.castShadow = true;
 +
wheel2.position.x=-1.5;
 +
wheel2.position.y=plane.position.y + 1.25;
 +
wheel2.position.z=-2.25;
 +
scene.add(wheel2);
 +
 +
var wheel3 = new THREE.Mesh(wheelGeometry, wheelMaterial);
 +
wheel3.castShadow = true;
 +
wheel3.position.x=-8.5;
 +
wheel3.position.y=plane.position.y + 1.25;
 +
wheel3.position.z=2.25;
 +
scene.add(wheel3);
 +
 +
var wheel4 = new THREE.Mesh(wheelGeometry, wheelMaterial);
 +
wheel4.castShadow = true;
 +
wheel4.position.x=-8.5;
 +
wheel4.position.y=plane.position.y + 1.25;
 +
wheel4.position.z=-2.25;
 +
scene.add(wheel4);
 +
 +
var pendGeometry = new THREE.SphereGeometry(1,32,20);
 +
var pendMaterial = new THREE.MeshLambertMaterial({color: 0xb0c4de});
 +
var pend = new THREE.Mesh(pendGeometry,pendMaterial);
 +
pend.position.x= - 5;
 +
pend.position.y= - 6.75;
 +
pend.position.z= 2.5;
 +
scene.add(pend);
 +
 +
var stickGeometry = new THREE.CylinderGeometry(0.1, 0.1, 8.25, 32);
 +
var stickMaterial= new THREE.MeshLambertMaterial({color: 0x778899});
 +
var stick = new THREE.Mesh(stickGeometry,stickMaterial);
 +
stick.position.x= pend.position.x;
 +
stick.position.y= 0.5*(truck.position.y + pend.position.y);
 +
stick.position.z= pend.position.z;
 +
scene.add(stick);
 +
 +
 +
// position and point the camera to the center of the scene
 +
        camera.position.x = -20;
 +
        camera.position.y = 15;
 +
        camera.position.z = 45;
 +
        camera.lookAt(new THREE.Vector3(10, 0, 0));
 +
 +
 +
        // add spotlight for a bit of light
 +
        var spotLight0 = new THREE.SpotLight(0xcccccc);
 +
        spotLight0.position.set(-40, 60, -10);
 +
        spotLight0.lookAt(plane);
 +
        scene.add(spotLight0);
 +
 +
 +
        var target = new THREE.Object3D();
 +
        target.position = new THREE.Vector3(5, 0, 0);
 +
 +
 +
 +
        var pointColor = "#ffffff";
 +
//    var spotLight = new THREE.SpotLight( pointColor);
 +
        var spotLight = new THREE.DirectionalLight(pointColor);
 +
        spotLight.position.set(30, 10, -50);
 +
        spotLight.castShadow = true;
 +
        spotLight.shadowCameraNear = 0.1;
 +
        spotLight.shadowCameraFar = 100;
 +
        spotLight.shadowCameraFov = 50;
 +
        spotLight.target = plane;
 +
        spotLight.distance = 0;
 +
        spotLight.shadowCameraNear = 2;
 +
        spotLight.shadowCameraFar = 200;
 +
        spotLight.shadowCameraLeft = -100;
 +
        spotLight.shadowCameraRight = 100;
 +
        spotLight.shadowCameraTop = 100;
 +
        spotLight.shadowCameraBottom = -100;
 +
        spotLight.shadowMapWidth = 2048;
 +
        spotLight.shadowMapHeight = 2048;
 +
 +
 +
        scene.add(spotLight);
 +
 +
var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6);
 +
hemiLight.position.set(0, 500, 0);
 +
hemiLight.visible = true;
 +
scene.add(hemiLight);
 +
 +
 +
        // add the output of the renderer to the html element
 +
        $("#WebGL-output").append(renderer.domElement);
 +
 +
// call the render function
 +
        var step = 0;
 +
var phi = 0;
 +
var l=truck.position.y - pend.position.y;
 +
 +
        // used to determine the switch point for the light animation
 +
        var invert = 1;
 +
        var phase = 0;
 +
var T1 = 0;
 +
 +
     
 +
        var controls = new function () {
 +
            this.l=8.25;
 +
this.m1=175;
 +
this.m2=90;
 +
this.k=5;
 +
 +
this.redraw = function() {
 +
 +
scene.remove(pend);
 +
pend = new THREE.Mesh(pendGeometry,pendMaterial);
 +
scene.add(pend);
 +
 +
scene.remove(stick);
 +
stickGeometry1 = new THREE.CylinderGeometry(0.1, 0.1, controls.l, 32);
 +
stick = new THREE.Mesh(stickGeometry1,stickMaterial);
 +
scene.add(stick)
 +
 +
 +
};
 +
 +
        }
 +
 +
solution = new function(){
 +
this.T='0';}
 +
 +
var gui = new dat.GUI();
 +
        gui.add(controls, 'l', 7.75, 9.25).onChange(controls.redraw);
 +
gui.add(controls, 'm1', 150, 250).onChange();
 +
gui.add(controls, 'm2', 80, 120).onChange();
 +
gui.add(controls, 'k', 1, 10).onChange();
 +
gui.add(solution, 'T').listen();
 +
 +
        render();
 +
 +
 +
        function render() {
 +
            stats.update();
 +
           
 +
            step += (controls.k)/(2*controls.m1);
 +
            truck.position.x = -7.5 + ( 2.5 * (Math.cos(step)));
 +
wheel1.position.x = -4 + ( 2.5 * (Math.cos(step)));
 +
wheel2.position.x = -4 + ( 2.5 * (Math.cos(step)));
 +
wheel3.position.x = -11 + ( 2.5 * (Math.cos(step)));
 +
wheel4.position.x = -11 + ( 2.5 * (Math.cos(step)));
 +
 +
 +
phi = - (1/5)*((controls.k*(truck.position.x)*(truck.position.x)*(truck.position.x)/6 + (controls.m1+controls.m2)*truck.position.x)/(controls.m2*controls.l) + Math.PI);
 +
pend.position.x = -7.5 + ( 2.5 * (Math.cos(step)))+controls.l*(Math.sin(phi));
 +
pend.position.y = -controls.l*(Math.cos(phi))+0.25;
 +
pend.position.z=2.5;
 +
stick.position.x = -7.5 + ( 2.5 * (Math.cos(step)))+(controls.l/2)*(Math.sin(phi));
 +
stick.position.y = -(controls.l/2)*(Math.cos(phi))+0.25;
 +
stick.position.z=2.5;
 +
stick.rotation.z = phi;
 +
T1 = 2*(Math.PI)*(Math.sqrt((controls.m1)*controls.l/(9.8*(controls.m1+controls.m2))));
 +
solution.T = T1;
 +
 +
            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;
 +
        }
 +
    });
 +
 +
 +
</script>
 +
</body>
 +
</html>

Версия 21:48, 23 декабря 2017

Задача №48.36 из сборника задач Мещерского. Требуется смоделировать систему, состоящую из тележки и прикреплённого к ней стержня с грузом с помощью языка программирования JavaScript.

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

При наезде тележки {A} на упругий упор [math]{B}[/math] начинаются колебания подвешенного на стержне груза [math]{D}[/math]. Составить дифференциальные уравнения движения материальной системы, если [math]{m_1}[/math] - масса тележки, [math]{m_2}[/math] - масса груза, [math]{l}[/math] длина стержня, [math]{c}[/math] - коэффициент жёсткости пружины упора [math]{B}[/math]. Массой колёс и всеми силами сопротивления пренебречь. Начало отсчёта оси [math]{x}[/math] взять в левом конце недеформированной пружины. Определить период малых колебаний груза при отсутствии упора [math]{B}[/math]. Массой стержня пренебречь. Указание. Пренебречь членом, содержащим множитель [math]\dot\varphi^2[/math], считать [math]c=0[/math], [math]\sin\varphi\approx\varphi[/math], [math]\cos\varphi\approx1[/math].

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

Дифференциальные уравнения движения системы можно найти, воспользовавшись уравнениями Лагранжа 2-го рода

[math]\frac{d}{dt}\left(\frac{\partial E_k}{\partial\dot q_i}\right) - \frac{\partial E_k}{\partial q_i} = Q_i[/math], где

[math]{E_k}[/math] - кинетическая энергия системы,

[math]{q_i}[/math] - обобщённые координаты,

[math]{Q_i}[/math] - обобщённые силы.

Начнём с определения кинетической энергии:

[math]{E_\text{k}} = {E_\text{kA}} + {E_\text{kD}}[/math] (здесь и далее индексами "А", "D" обозначаются величины, относящиеся к тележке и грузу соответственно).

[math]{E_\text{kA}} = \frac{m_1v^2}{2} = \frac{m_1\dot x^2}{2} \left(1\right)[/math]

[math]{E_\text{kD}} = \frac{m_2\dot x^2}{2} + \frac{m_2l^2\dot\varphi^2}{2} + m_2l\dot x\dot\varphi\cos\varphi \left(2\right)[/math]

Из (1) и (2) имеем:

[math]\frac{d}{dt}\left(\frac{\partial E_k}{\partial\dot x}\right) = \frac{d}{dt}\left(\left(m_1 + m_2\right)\dot x + m_2l\dot\varphi\cos\varphi\right) = \left(m_1 + m_2\right)\ddot x + m_2l\ddot \varphi\cos\varphi - m_2l\dot \varphi^2\sin\varphi \left(3\right)[/math]

[math]\frac{d}{dt}\left(\frac{\partial E_k}{\partial\dot\varphi}\right) = m_2l^2\ddot\varphi + m_2l\ddot x\cos\varphi - m_2l\dot x\dot\varphi\sin\varphi \left(4\right)[/math]

[math]\frac{\partial E_k}{\partial\varphi} = - m_2l\dot x\dot\varphi\sin\varphi \left(5\right)[/math]


2. Найдём потенциальную энергию системы:

[math]{E_\text{p}} = {E_\text{pA}} + {E_\text{pD}}[/math]

[math]{E_\text{pA}} = \frac{cx^2}{2}[/math]

[math]{E_\text{pD}} = m_2gl\left(1 - \cos\varphi\right)[/math]

Из последних трёх равенств получим

[math] - \frac{\partial E_p}{\partial x} = - cx \left(6\right)[/math]

[math] - \frac{\partial E_p}{\partial\varphi} = - m_2gl\sin\varphi \left(7\right)[/math]

3. Имея в виду, что

[math] - \frac{\partial E_p}{\partial q_i} = Q_i[/math] и

[math]\frac{\partial E_k}{\partial x} = 0[/math],

подставим равенства (3) - (7) в уравнения Лагранжа 2-го рода:

[math]\left(m_1 + m_2\right)\ddot x + m_2l\ddot \varphi\cos\varphi - m_2l\dot \varphi^2\sin\varphi = - cx (8)[/math]

[math]m_2l^2\ddot\varphi + m_2l\ddot x\cos\varphi = - m_2gl\sin\varphi \left(9\right)[/math]

(8), (9) и есть искомые уравнения движения.

4. Теперь найдём период колебаний груза T. В условиях малых колебаний дифференциальные уравнения движения примут следующий вид:

[math](m_1 + m_2)\ddot x + m_2l\ddot\varphi = 0[/math]

[math]\ddot x + l\ddot\varphi = - g\varphi[/math]

Путём несложных алгебраических образований отсюда можно получить такое дифференциальное уравнение:

[math]\ddot\varphi - \frac{g\left(m_1 + m_2\right)}{lm_1}\varphi = 0 \left(10\right)[/math]

(10) - уравнение гармонических колебаний. Следовательно,

[math]T = 2\pi\sqrt{\frac{lm_1}{g(m_1 + m_2)}}[/math]

Реализация на языке JavaScript

Код программы на языке JavaScript:

Файл "48_36.html" <syntaxhighlight lang="javascript" line start="1" enclose="div">

<!DOCTYPE html> <html>

<head>

   <title>№48.36</title>
  <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/libs/three.min.js"></script>
   <script type="text/javascript" src="http://tm.spbstu.ru/htmlets/Zhukova_Yu_V/48.24/lib/jquery-1.9.0.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>

   <style>
       body {
           /* set margin to 0 and overflow to hidden, to go fullscreen */
           margin: 0;
           overflow: hidden;
       }
   </style>

</head> <body>

<script type="text/javascript">

   // once everything is loaded, we run our Three.js stuff.
   $(function () {
       var stats = initStats();
       // create a scene, that will hold all our elements such as objects, cameras and lights.
       var scene = new THREE.Scene();
       scene.fog = new THREE.Fog(0xaaaaaa, 0.010, 200);
       // 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(0xaaaaff, 1.0));
       renderer.setSize(window.innerWidth, window.innerHeight);
       renderer.shadowMapEnabled = true;


       // create the ground plane
       var planeGeometry = new THREE.PlaneGeometry(80,7.5);
       var planeMaterial = new THREE.MeshBasicMaterial({color: 0x228b22});
       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=15
       plane.position.y=-1.55
       plane.position.z=-1.1
       // add the plane to the scene
       scene.add(plane);


var postGeometry = new THREE.CubeGeometry(1.5,15,1.5); var postMaterial = new THREE.MeshLambertMaterial({color: 0xb22222}); post = new THREE.Mesh(postGeometry,postMaterial); post.castShadow = true; post.receiveShadow = true; post.position.x = 5.5; post.position.y = plane.position.y + 7.5; post.position.z = 0; scene.add(post);

// create a truck

       var truckGeometry = new THREE.CubeGeometry(10,2.5,5);
       var truckMaterial = new THREE.MeshLambertMaterial({color: 0xdaa520});
       var truck = new THREE.Mesh(truckGeometry, truckMaterial);
       truck.castShadow = true;
       // position the truck
       truck.position.x=-5;
       truck.position.y=1.25;
       truck.position.z=0;
       // add the cube to the scene
       scene.add(truck);

//wheels var wheelGeometry = new THREE.TorusGeometry(1, 0.55, 32, 32); var wheelMaterial = new THREE.MeshLambertMaterial({color: 0xd2691e}); var wheel1 = new THREE.Mesh(wheelGeometry, wheelMaterial); wheel1.castShadow = true; wheel1.position.x=-1.5; wheel1.position.y=plane.position.y + 1.25; wheel1.position.z=2.25; scene.add(wheel1);

var wheel2 = new THREE.Mesh(wheelGeometry, wheelMaterial); wheel2.castShadow = true; wheel2.position.x=-1.5; wheel2.position.y=plane.position.y + 1.25; wheel2.position.z=-2.25; scene.add(wheel2);

var wheel3 = new THREE.Mesh(wheelGeometry, wheelMaterial); wheel3.castShadow = true; wheel3.position.x=-8.5; wheel3.position.y=plane.position.y + 1.25; wheel3.position.z=2.25; scene.add(wheel3);

var wheel4 = new THREE.Mesh(wheelGeometry, wheelMaterial); wheel4.castShadow = true; wheel4.position.x=-8.5; wheel4.position.y=plane.position.y + 1.25; wheel4.position.z=-2.25; scene.add(wheel4);

var pendGeometry = new THREE.SphereGeometry(1,32,20); var pendMaterial = new THREE.MeshLambertMaterial({color: 0xb0c4de}); var pend = new THREE.Mesh(pendGeometry,pendMaterial); pend.position.x= - 5; pend.position.y= - 6.75; pend.position.z= 2.5; scene.add(pend);

var stickGeometry = new THREE.CylinderGeometry(0.1, 0.1, 8.25, 32); var stickMaterial= new THREE.MeshLambertMaterial({color: 0x778899}); var stick = new THREE.Mesh(stickGeometry,stickMaterial); stick.position.x= pend.position.x; stick.position.y= 0.5*(truck.position.y + pend.position.y); stick.position.z= pend.position.z; scene.add(stick);


// position and point the camera to the center of the scene

       camera.position.x = -20;
       camera.position.y = 15;
       camera.position.z = 45;
       camera.lookAt(new THREE.Vector3(10, 0, 0));


       // add spotlight for a bit of light
       var spotLight0 = new THREE.SpotLight(0xcccccc);
       spotLight0.position.set(-40, 60, -10);
       spotLight0.lookAt(plane);
       scene.add(spotLight0);


       var target = new THREE.Object3D();
       target.position = new THREE.Vector3(5, 0, 0);


       var pointColor = "#ffffff";

// var spotLight = new THREE.SpotLight( pointColor);

       var spotLight = new THREE.DirectionalLight(pointColor);
       spotLight.position.set(30, 10, -50);
       spotLight.castShadow = true;
       spotLight.shadowCameraNear = 0.1;
       spotLight.shadowCameraFar = 100;
       spotLight.shadowCameraFov = 50;
       spotLight.target = plane;
       spotLight.distance = 0;
       spotLight.shadowCameraNear = 2;
       spotLight.shadowCameraFar = 200;
       spotLight.shadowCameraLeft = -100;
       spotLight.shadowCameraRight = 100;
       spotLight.shadowCameraTop = 100;
       spotLight.shadowCameraBottom = -100;
       spotLight.shadowMapWidth = 2048;
       spotLight.shadowMapHeight = 2048;


       scene.add(spotLight);

var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6); hemiLight.position.set(0, 500, 0); hemiLight.visible = true; scene.add(hemiLight);


       // add the output of the renderer to the html element
       $("#WebGL-output").append(renderer.domElement);

// call the render function

       var step = 0;

var phi = 0; var l=truck.position.y - pend.position.y;

       // used to determine the switch point for the light animation
       var invert = 1;
       var phase = 0;

var T1 = 0;


       var controls = new function () {
           this.l=8.25;

this.m1=175; this.m2=90; this.k=5;

this.redraw = function() {

scene.remove(pend); pend = new THREE.Mesh(pendGeometry,pendMaterial); scene.add(pend);

scene.remove(stick); stickGeometry1 = new THREE.CylinderGeometry(0.1, 0.1, controls.l, 32); stick = new THREE.Mesh(stickGeometry1,stickMaterial); scene.add(stick)


};

       }

solution = new function(){ this.T='0';}

var gui = new dat.GUI();

       gui.add(controls, 'l', 7.75, 9.25).onChange(controls.redraw);

gui.add(controls, 'm1', 150, 250).onChange(); gui.add(controls, 'm2', 80, 120).onChange(); gui.add(controls, 'k', 1, 10).onChange(); gui.add(solution, 'T').listen();

       render();


       function render() {
           stats.update();
           
           step += (controls.k)/(2*controls.m1);
           truck.position.x = -7.5 + ( 2.5 * (Math.cos(step)));

wheel1.position.x = -4 + ( 2.5 * (Math.cos(step))); wheel2.position.x = -4 + ( 2.5 * (Math.cos(step))); wheel3.position.x = -11 + ( 2.5 * (Math.cos(step))); wheel4.position.x = -11 + ( 2.5 * (Math.cos(step)));


phi = - (1/5)*((controls.k*(truck.position.x)*(truck.position.x)*(truck.position.x)/6 + (controls.m1+controls.m2)*truck.position.x)/(controls.m2*controls.l) + Math.PI); pend.position.x = -7.5 + ( 2.5 * (Math.cos(step)))+controls.l*(Math.sin(phi)); pend.position.y = -controls.l*(Math.cos(phi))+0.25; pend.position.z=2.5; stick.position.x = -7.5 + ( 2.5 * (Math.cos(step)))+(controls.l/2)*(Math.sin(phi)); stick.position.y = -(controls.l/2)*(Math.cos(phi))+0.25; stick.position.z=2.5; stick.rotation.z = phi; T1 = 2*(Math.PI)*(Math.sqrt((controls.m1)*controls.l/(9.8*(controls.m1+controls.m2)))); solution.T = T1;

           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;
       }
   });


</script> </body>

</html>