Мещерский 48.36 — различия между версиями
(→Реализация на языке 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} на упругий упор
начинаются колебания подвешенного на стержне груза . Составить дифференциальные уравнения движения материальной системы, если - масса тележки, - масса груза, длина стержня, - коэффициент жёсткости пружины упора . Массой колёс и всеми силами сопротивления пренебречь. Начало отсчёта оси взять в левом конце недеформированной пружины. Определить период малых колебаний груза при отсутствии упора . Массой стержня пренебречь. Указание. Пренебречь членом, содержащим множитель , считать , , .Решение задачи
Дифференциальные уравнения движения системы можно найти, воспользовавшись уравнениями Лагранжа 2-го рода
, где
- кинетическая энергия системы,
- обобщённые координаты,
- обобщённые силы.
Начнём с определения кинетической энергии:
(здесь и далее индексами "А", "D" обозначаются величины, относящиеся к тележке и грузу соответственно).
Из (1) и (2) имеем:
2. Найдём потенциальную энергию системы:
Из последних трёх равенств получим
3. Имея в виду, что
и
,
подставим равенства (3) - (7) в уравнения Лагранжа 2-го рода:
(8), (9) и есть искомые уравнения движения.
4. Теперь найдём период колебаний груза T. В условиях малых колебаний дифференциальные уравнения движения примут следующий вид:
Путём несложных алгебраических образований отсюда можно получить такое дифференциальное уравнение:
(10) - уравнение гармонических колебаний. Следовательно,
Реализация на языке 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>