|
|
| Строка 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>
| |
Дифференциальные уравнения движения системы можно найти, воспользовавшись уравнениями Лагранжа 2-го рода
3. Имея в виду, что
4. Теперь найдём период колебаний груза T. В условиях малых колебаний дифференциальные уравнения движения примут следующий вид:
Путём несложных алгебраических образований отсюда можно получить такое дифференциальное уравнение:
(10) - уравнение гармонических колебаний. Следовательно,
