Задача Д.24, вариант 20 из Задачника Яблонского — различия между версиями

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
Строка 1: Строка 1:
 +
== Условие задачи==
 +
Определить частоты малых свободных колебаний и формы главных колебаний системы с двумя степенями свободы, пренебрегая силами сопротивления, массами пружин и моментами инерции скручиваемых валов.
 +
 +
<math>m_1=8 кг;</math>
 +
<math>m_2=10 кг;</math>
 +
<math>c_1=40  Н⁄см;</math>
 +
<math>c_2=60  Н⁄см;</math>
 +
<math>l=0,5 м</math>
 +
 
== Программа ==
 
== Программа ==
  
 
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/KaloevaDiana/D24_20/Project.html |width=1200 |height=800 |border=0 }}
 
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/KaloevaDiana/D24_20/Project.html |width=1200 |height=800 |border=0 }}
 +
 +
== Код программы ==
 +
<div class="mw-collapsible mw-collapsed">
 +
'''Текст программы:''' <div class="mw-collapsible-content">
 +
<syntaxhighlight lang="javascript" line start="1" enclose="div">
 +
<!DOCTYPE html>
 +
 +
<html>
 +
 +
<head>
 +
    <title> D24_13</title>
 +
   
 +
   
 +
    <script type="text/javascript" src="three.js"></script>
 +
    <script type="text/javascript" src="stats.min.js"></script>
 +
    <script type="text/javascript" src="dat.gui.js"></script>
 +
<script type="text/javascript" src="CurveExtras1.js"></script>
 +
<script type="text/javascript" src="OrbitControls.js"></script>
 +
    <style>
 +
        body {
 +
            /* set margin to 0 and overflow to hidden, to go fullscreen */
 +
            margin: 0;
 +
/*            overflow: hidden; */
 +
        }
 +
    </style>
 +
</head>
 +
<body>
 +
<canvas id="canvas_example" width = 100 height = 200></canvas>
 +
<canvas id="canvas_example2" width = 1000 height = 200></canvas><br>
 +
<div id="Stats-output">
 +
</div>
 +
<!-- Div which will hold the Output -->
 +
<div id="WebGL-output">
 +
</div>
 +
 +
<script type="text/javascript">
 +
 +
    function init() {
 +
 +
        var stats = initStats();
 +
 +
        // create a scene, that will hold all our elements such as objects, cameras and lights.
 +
        var scene = new THREE.Scene();
 +
 +
        // 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(0xEEEEEE));
 +
        renderer.setSize(window.innerWidth, window.innerHeight);
 +
 +
var orbitControls = new THREE.OrbitControls(camera);
 +
        orbitControls.autoRotate = true;
 +
       
 +
var planeGeometry = new THREE.PlaneGeometry(10,20,1,1);
 +
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
 +
        var plane1 = new THREE.Mesh(planeGeometry,planeMaterial);
 +
var plane2 = new THREE.Mesh(planeGeometry,planeMaterial);
 +
 +
plane1.rotation.y = -0.5*Math.PI;
 +
        plane1.position.x = -10;
 +
scene.add(plane1);
 +
plane1.receiveShadow = true;
 +
 +
        plane2.rotation.y = -0.5*Math.PI;
 +
plane2.position.x = 10;
 +
scene.add(plane2);
 +
plane2.receiveShadow = true;
 +
 +
var cubeGeometry1 = new THREE.CubeGeometry(18,7,5);
 +
        var cubeMaterial1 = new THREE.MeshLambertMaterial({color: 0xffff00});
 +
        var cube1 = new THREE.Mesh(cubeGeometry1, cubeMaterial1);
 +
        cube1.castShadow = true;
 +
 +
var cubeGeometry2 = new THREE.CubeGeometry(17.5,1,2);
 +
        var cubeMaterial2 = new THREE.MeshLambertMaterial({color: 0x00ffff});
 +
var cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2);
 +
        cube2.castShadow = true;
 +
cube2.position.x = 3.75;
 +
cube2.position.y = 20;
 +
cube2.geometry.translate(-3.75,0,0);
 +
        scene.add(cube2);
 +
 +
        var cylinderGeometry = new THREE.CylinderGeometry(0.5, 0.5, 3, 30, 30);
 +
        var cylinderMaterial = new THREE.MeshLambertMaterial({color: 0xffff00});
 +
var cylinder1 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
 +
cylinder1.rotation.x = -0.5*Math.PI;
 +
cylinder1.position.x = -9.5;
 +
cylinder1.position.y = -2.5;
 +
cylinder1.castShadow = true;
 +
 +
var cylinder2 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
 +
cylinder2.rotation.x = -0.5*Math.PI;
 +
cylinder2.position.x = -9.5;
 +
cylinder2.position.y = 2.5;
 +
cylinder2.castShadow = true;
 +
 +
var cylinder3 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
 +
cylinder3.rotation.x = -0.5*Math.PI;
 +
cylinder3.position.x = 9.5;
 +
cylinder3.position.y = -2.5;
 +
cylinder3.castShadow = true;
 +
//scene.add(cylinder3);
 +
 +
var cylinder4 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
 +
cylinder4.rotation.x = -0.5*Math.PI;
 +
cylinder4.position.x = 9.5;
 +
cylinder4.position.y = 2.5;
 +
cylinder4.castShadow = true;
 +
//scene.add(cylinder4);
 +
       
 +
var cylinderGeometry1 = new THREE.CylinderGeometry(0.5, 1.5, 2, 4, 4);
 +
var cylinder5 = new THREE.Mesh(cylinderGeometry1, cylinderMaterial);
 +
cylinder5.rotation.y = -1.25*Math.PI;
 +
cylinder5.position.x = 3.75;
 +
cylinder5.position.y = 18.5;
 +
cylinder5.castShadow = true;
 +
scene.add(cylinder5);
 +
       
 +
var material = new THREE.MeshLambertMaterial( { color: 0xff00ff } );
 +
    var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0xf00000, opacity: 0.3, wireframe: true, transparent: true } );
 +
        var HelixCurve = new THREE.Curves.HelixCurve(10);
 +
        var springMaterial = new THREE.MeshBasicMaterial( { color: 0xff00ff } );
 +
        var tubeGeometry = new THREE.TubeBufferGeometry(HelixCurve, 100, 0.5, 3, false);
 +
        var spring1 = THREE.SceneUtils.createMultiMaterialObject( tubeGeometry, [ material, wireframeMaterial] );
 +
        var spring2 = THREE.SceneUtils.createMultiMaterialObject( tubeGeometry, [ material, wireframeMaterial] );
 +
 +
spring1.scale.x = 0.02;
 +
spring1.scale.y = 0.02;
 +
spring1.scale.z = 0.1;
 +
        spring1.rotation.x = -0.5 * Math.PI;
 +
        spring1.position.x = 8;
 +
        //spring1.position.y = 20;
 +
        spring1.castShadow = true;
 +
        //scene.add( spring1 );
 +
 +
spring2.scale.x = 0.02;
 +
spring2.scale.y = 0.02;
 +
spring2.scale.z = 0.1;
 +
        spring2.rotation.x = -0.5 * Math.PI;
 +
        spring2.position.x = -7.5;
 +
        //spring2.position.y = 20;
 +
        spring2.castShadow = true;
 +
        //scene.add( spring2 );
 +
 +
var group1 = new THREE.Object3D();
 +
group1.add(cube1);
 +
group1.add(cylinder1);
 +
group1.add(cylinder2);
 +
group1.add(cylinder3);
 +
group1.add(cylinder4);
 +
group1.add(spring1);
 +
group1.add(spring2);
 +
//group1.position.y = 22;
 +
scene.add(group1);
 +
 +
camera.position.x = -20;
 +
camera.position.y = 10;
 +
        camera.position.z = 80;
 +
        camera.lookAt(new THREE.Vector3(10, 5, 1));
 +
 +
 +
        var ambientLight = new THREE.AmbientLight(0x0c0c0c);
 +
        scene.add(ambientLight);
 +
 +
        var spotLight = new THREE.SpotLight(0xffffff);
 +
        spotLight.position.set(-20,10,80);
 +
 +
        scene.add(spotLight);
 +
 +
        document.getElementById("WebGL-output").appendChild(renderer.domElement);
 +
       
 +
var step = 0;
 +
        var scalingStep = 0;
 +
         
 +
        var controls = new function () {
 +
        this.t = 1;
 +
       
 +
        this.c1 = 40*100;
 +
        this.c2 = 60*100;
 +
        this.l = 0.5;
 +
 +
            this.m1 = 8;
 +
            this.m2 = 10;
 +
           
 +
           
 +
            this.a11 = this.m2;
 +
            this.a22 = 19/12 * this.m1 * this.l * this.l;
 +
            this.c11 = this.c1 + this.c2;
 +
            this.c22 = 6.25 * this.c1 * this.l * this.l + this.c2* this.l * this.l;
 +
            this.c12 = (2 * this.c2 * this.l - 5 * this.c1 * this.l)/2;
 +
this.D = Math.sqrt((this.a11 * this.c22 + this.a22 * this.c11)*(this.a11 * this.c22 + this.a22 * this.c11) -4*this.a11 * this.a22*(this.c11 * this.c22 - this.c12 * this.c12));
 +
            this.k1 = '' + Math.sqrt((this.a11 * this.c22 + this.a22 * this.c11 + this.D)/(2*this.a11*this.a22));
 +
            this.k2 = '' + Math.sqrt((this.a11 * this.c22 + this.a22 * this.c11 - this.D)/(2*this.a11*this.a22));
 +
                       
 +
                       
 +
            this.redraw = function() {
 +
step = 0;   
 +
};
 +
        };
 +
           
 +
       
 +
        var gui = new dat.GUI();
 +
 
 +
        gui.add(controls, 'm1',5,20).onChange(controls.redraw)  ;
 +
        gui.add(controls, 'm2',5,20).onChange(controls.redraw) ;
 +
        gui.add(controls, 'c1',0*100,100*100).onChange(controls.redraw) ;
 +
        gui.add(controls, 'c2',0*100,100*100).onChange(controls.redraw) ;
 +
 +
        gui.add(controls, 'k1').listen() ;
 +
        gui.add(controls, 'k2').listen() ;
 +
gui.add(controls, 'redraw');
 +
controls.redraw();
 +
       
 +
        render();
 +
       
 +
function render() {
 +
            stats.update();
 +
           
 +
controls.a11 = controls.m2;
 +
            controls.a22 = 19/12 * controls.m1 * controls.l * controls.l;
 +
            controls.c11 = controls.c1 + controls.c2;
 +
            controls.c22 = 6.25 * controls.c1 * controls.l * controls.l + controls.c2* controls.l * controls.l;
 +
            controls.c12 = (2 * controls.c2 * controls.l - 5 * controls.c1 * controls.l)/2;
 +
controls.D = Math.sqrt((controls.a11 * controls.c22 + controls.a22 * controls.c11)*(controls.a11 * controls.c22 + controls.a22 * controls.c11)
 +
-4*controls.a11 * controls.a22*(controls.c11 * controls.c22 - controls.c12 * controls.c12));
 +
            controls.k1 = '' + Math.sqrt((controls.a11 * controls.c22 + controls.a22 * controls.c11 + controls.D)/(2*controls.a11*controls.a22));
 +
            controls.k2 = '' + Math.sqrt((controls.a11 * controls.c22 + controls.a22 * controls.c11 - controls.D)/(2*controls.a11*controls.a22));
 +
 +
 +
var cty = canvas_example2.getContext("2d");
 +
var w = canvas_example2.width;
 +
var h = canvas_example2.height;
 +
 +
cty.lineWidth = "0.04";
 +
cty.moveTo(0, h/2);
 +
cty.lineTo(w, h/2);
 +
cty.moveTo(0, 0);
 +
cty.lineTo(0,h);
 +
cty.stroke();
 +
//cty.strokeRect(0,0,w,h);
 +
 +
if (step == 0) {
 +
cty.clearRect(0, 0, w, h);
 +
}
 +
 +
var x = 100-5*(3.5 * Math.sin(controls.k1*step*0.0003) -3.74 * Math.sin(controls.k2*step*0.0003));
 +
cty.lineWidth="2";
 +
cty.beginPath();
 +
if (step == 0) {
 +
cty.moveTo(0, h/2); }
 +
else {
 +
cty.moveTo((step -1)/4, x);
 +
}
 +
cty.lineTo(step/4, x);
 +
cty.stroke();
 +
 +
step += controls.t;
 +
 +
cube2.rotation.z = 0.2*Math.sin(controls.k1*step*0.0003) - 0.2*Math.sin(controls.k2*step*0.0003);
 +
            group1.position.y = 0.75*(3.5 * Math.sin(controls.k1*step*0.0003) -3.74 * Math.sin(controls.k2*step*0.0003));
 +
            spring1.scale.z = 0.1 - 0.008*( 0.75*controls.l*(3.5 * Math.sin(controls.k1*step*0.0003) - 3.74 * Math.sin(controls.k2*step*0.0003)));
 +
            spring2.scale.z = 0.1 - 0.02*( 0.75*controls.l*(3.5 * Math.sin(controls.k1*step*0.0003) - 3.74 * Math.sin(controls.k2*step*0.0003)));
 +
 +
            requestAnimationFrame(render);
 +
            renderer.render(scene, camera);
 +
        }
 +
       
 +
        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';
 +
 +
            document.getElementById("Stats-output").appendChild(stats.domElement);
 +
            return stats;
 +
        }
 +
    }
 +
window.onload = init
 +
</script>
 +
</body>
 +
</html>
 +
</syntaxhighlight>
 +
</div>
 +
 +
== Используемые библиотеки ==
 +
 +
* three.js
 +
* jquery-1.9.0.js
 +
* stats.js
 +
* dat.gui.js
 +
* OrbitControls.js

Версия 21:46, 31 мая 2018

Условие задачи

Определить частоты малых свободных колебаний и формы главных колебаний системы с двумя степенями свободы, пренебрегая силами сопротивления, массами пружин и моментами инерции скручиваемых валов.

[math]m_1=8 кг;[/math] [math]m_2=10 кг;[/math] [math]c_1=40 Н⁄см;[/math] [math]c_2=60 Н⁄см;[/math] [math]l=0,5 м[/math]

Программа

Код программы

Текст программы: 
  1 <!DOCTYPE html>
  2 
  3 <html>
  4 
  5 <head>
  6     <title> D24_13</title>
  7     
  8     
  9     <script type="text/javascript" src="three.js"></script>
 10     <script type="text/javascript" src="stats.min.js"></script>
 11     <script type="text/javascript" src="dat.gui.js"></script>
 12 	<script type="text/javascript" src="CurveExtras1.js"></script>
 13 	<script type="text/javascript" src="OrbitControls.js"></script>
 14     <style>
 15         body {
 16             /* set margin to 0 and overflow to hidden, to go fullscreen */
 17             margin: 0;
 18 /*             overflow: hidden; */
 19         }
 20     </style>
 21 </head>
 22 <body>
 23 <canvas id="canvas_example" width = 100 height = 200></canvas>
 24 <canvas id="canvas_example2" width = 1000 height = 200></canvas><br>
 25 <div id="Stats-output">
 26 </div>
 27 <!-- Div which will hold the Output -->
 28 <div id="WebGL-output">
 29 </div>
 30 
 31 <script type="text/javascript">
 32 
 33     function init() {
 34 
 35         var stats = initStats();
 36 
 37         // create a scene, that will hold all our elements such as objects, cameras and lights.
 38         var scene = new THREE.Scene();
 39 
 40         // create a camera, which defines where we're looking at.
 41         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 42 
 43         // create a render and set the size
 44         var renderer = new THREE.WebGLRenderer();
 45 
 46         renderer.setClearColor(new THREE.Color(0xEEEEEE));
 47         renderer.setSize(window.innerWidth, window.innerHeight);
 48 		
 49 		var orbitControls = new THREE.OrbitControls(camera);
 50         orbitControls.autoRotate = true;
 51         
 52 		var planeGeometry = new THREE.PlaneGeometry(10,20,1,1);
 53         var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
 54         var plane1 = new THREE.Mesh(planeGeometry,planeMaterial);
 55 		var plane2 = new THREE.Mesh(planeGeometry,planeMaterial);
 56 		
 57 		plane1.rotation.y = -0.5*Math.PI;
 58         plane1.position.x = -10;
 59 		scene.add(plane1);
 60 		plane1.receiveShadow = true;
 61 		
 62         plane2.rotation.y = -0.5*Math.PI;
 63 		plane2.position.x = 10;
 64 		scene.add(plane2);
 65 		plane2.receiveShadow = true;
 66 		
 67 		var cubeGeometry1 = new THREE.CubeGeometry(18,7,5);
 68         var cubeMaterial1 = new THREE.MeshLambertMaterial({color: 0xffff00});
 69         var cube1 = new THREE.Mesh(cubeGeometry1, cubeMaterial1);
 70         cube1.castShadow = true;
 71 
 72 		var cubeGeometry2 = new THREE.CubeGeometry(17.5,1,2);
 73         var cubeMaterial2 = new THREE.MeshLambertMaterial({color: 0x00ffff});		
 74 		var cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2);
 75         cube2.castShadow = true;
 76 		cube2.position.x = 3.75;
 77 		cube2.position.y = 20;
 78 		cube2.geometry.translate(-3.75,0,0);
 79         scene.add(cube2);
 80 
 81         var cylinderGeometry = new THREE.CylinderGeometry(0.5, 0.5, 3, 30, 30);
 82         var cylinderMaterial = new THREE.MeshLambertMaterial({color: 0xffff00});		
 83 		var cylinder1 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
 84 		cylinder1.rotation.x = -0.5*Math.PI;
 85 		cylinder1.position.x = -9.5;
 86 		cylinder1.position.y = -2.5;
 87 		cylinder1.castShadow = true;
 88 		
 89 		var cylinder2 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
 90 		cylinder2.rotation.x = -0.5*Math.PI;
 91 		cylinder2.position.x = -9.5;
 92 		cylinder2.position.y = 2.5;
 93 		cylinder2.castShadow = true;
 94 		
 95 		var cylinder3 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
 96 		cylinder3.rotation.x = -0.5*Math.PI;
 97 		cylinder3.position.x = 9.5;
 98 		cylinder3.position.y = -2.5;
 99 		cylinder3.castShadow = true;
100 		//scene.add(cylinder3);
101 		
102 		var cylinder4 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
103 		cylinder4.rotation.x = -0.5*Math.PI;
104 		cylinder4.position.x = 9.5;
105 		cylinder4.position.y = 2.5;
106 		cylinder4.castShadow = true;
107 		//scene.add(cylinder4);
108         
109 		var cylinderGeometry1 = new THREE.CylinderGeometry(0.5, 1.5, 2, 4, 4);		
110 		var cylinder5 = new THREE.Mesh(cylinderGeometry1, cylinderMaterial);
111 		cylinder5.rotation.y = -1.25*Math.PI;
112 		cylinder5.position.x = 3.75;
113 		cylinder5.position.y = 18.5;
114 		cylinder5.castShadow = true;
115 		scene.add(cylinder5);
116         
117 		var material = new THREE.MeshLambertMaterial( { color: 0xff00ff } );
118 	    var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0xf00000, opacity: 0.3, wireframe: true, transparent: true } );
119         var HelixCurve = new THREE.Curves.HelixCurve(10);
120         var springMaterial = new THREE.MeshBasicMaterial( { color: 0xff00ff } );
121         var tubeGeometry = new THREE.TubeBufferGeometry(HelixCurve, 100, 0.5, 3, false);
122         var spring1 = THREE.SceneUtils.createMultiMaterialObject( tubeGeometry, [ material, wireframeMaterial] );
123         var spring2 = THREE.SceneUtils.createMultiMaterialObject( tubeGeometry, [ material, wireframeMaterial] );
124 
125 		spring1.scale.x = 0.02;
126 		spring1.scale.y = 0.02;
127 		spring1.scale.z = 0.1;
128         spring1.rotation.x = -0.5 * Math.PI;
129         spring1.position.x = 8;
130         //spring1.position.y = 20;
131         spring1.castShadow = true;
132         //scene.add( spring1 );
133 		
134 		spring2.scale.x = 0.02;
135 		spring2.scale.y = 0.02;
136 		spring2.scale.z = 0.1;
137         spring2.rotation.x = -0.5 * Math.PI;
138         spring2.position.x = -7.5;
139         //spring2.position.y = 20;
140         spring2.castShadow = true;
141         //scene.add( spring2 );
142 		
143 		var group1 = new THREE.Object3D();
144 		group1.add(cube1);
145 		group1.add(cylinder1);
146 		group1.add(cylinder2);
147 		group1.add(cylinder3);
148 		group1.add(cylinder4);
149 		group1.add(spring1);
150 		group1.add(spring2);
151 		//group1.position.y = 22;
152 		scene.add(group1);
153 		
154 		camera.position.x = -20;
155 		camera.position.y = 10;
156         camera.position.z = 80;
157         camera.lookAt(new THREE.Vector3(10, 5, 1));
158 
159 
160         var ambientLight = new THREE.AmbientLight(0x0c0c0c);
161         scene.add(ambientLight);
162 
163         var spotLight = new THREE.SpotLight(0xffffff);
164         spotLight.position.set(-20,10,80);
165 
166         scene.add(spotLight);
167 
168         document.getElementById("WebGL-output").appendChild(renderer.domElement);
169         
170  		var step = 0;
171         var scalingStep = 0;
172           
173         var controls = new function () {
174         	this.t = 1;
175         	
176         	this.c1 = 40*100;
177         	this.c2 = 60*100;
178         	this.l = 0.5;
179 
180             this.m1 = 8;
181             this.m2 = 10;
182             
183             
184             this.a11 = this.m2;
185             this.a22 = 19/12 * this.m1 * this.l * this.l;
186             this.c11 = this.c1 + this.c2;
187             this.c22 = 6.25 * this.c1 * this.l * this.l + this.c2* this.l * this.l;
188             this.c12 = (2 * this.c2 * this.l - 5 * this.c1 * this.l)/2;
189 			this.D = Math.sqrt((this.a11 * this.c22 + this.a22 * this.c11)*(this.a11 * this.c22 + this.a22 * this.c11) -4*this.a11 * this.a22*(this.c11 * this.c22 - this.c12 * this.c12));
190             this.k1 = '' + Math.sqrt((this.a11 * this.c22 + this.a22 * this.c11 + this.D)/(2*this.a11*this.a22));
191             this.k2 = '' + Math.sqrt((this.a11 * this.c22 + this.a22 * this.c11 - this.D)/(2*this.a11*this.a22));
192                         
193                         
194             this.redraw = function() {
195 				step = 0;    
196 			};
197         }; 
198             
199         
200         var gui = new dat.GUI();
201   
202         gui.add(controls, 'm1',5,20).onChange(controls.redraw)  ;
203         gui.add(controls, 'm2',5,20).onChange(controls.redraw) ; 
204         gui.add(controls, 'c1',0*100,100*100).onChange(controls.redraw) ; 
205         gui.add(controls, 'c2',0*100,100*100).onChange(controls.redraw) ; 
206 
207         gui.add(controls, 'k1').listen() ; 
208         gui.add(controls, 'k2').listen() ;
209 		gui.add(controls, 'redraw');
210 		controls.redraw();
211         
212         render();
213         
214  		function render() {
215             stats.update();
216             
217 			controls.a11 = controls.m2;
218             controls.a22 = 19/12 * controls.m1 * controls.l * controls.l;
219             controls.c11 = controls.c1 + controls.c2;
220             controls.c22 = 6.25 * controls.c1 * controls.l * controls.l + controls.c2* controls.l * controls.l;
221             controls.c12 = (2 * controls.c2 * controls.l - 5 * controls.c1 * controls.l)/2;
222 			controls.D = Math.sqrt((controls.a11 * controls.c22 + controls.a22 * controls.c11)*(controls.a11 * controls.c22 + controls.a22 * controls.c11)
223 						-4*controls.a11 * controls.a22*(controls.c11 * controls.c22 - controls.c12 * controls.c12));
224             controls.k1 = '' + Math.sqrt((controls.a11 * controls.c22 + controls.a22 * controls.c11 + controls.D)/(2*controls.a11*controls.a22));
225             controls.k2 = '' + Math.sqrt((controls.a11 * controls.c22 + controls.a22 * controls.c11 - controls.D)/(2*controls.a11*controls.a22));
226 			
227 
228 			var cty = canvas_example2.getContext("2d");
229 			var w = canvas_example2.width;
230 			var h = canvas_example2.height;
231 			
232 			cty.lineWidth = "0.04";
233 			cty.moveTo(0, h/2);
234 			cty.lineTo(w, h/2);
235 			cty.moveTo(0, 0);
236 			cty.lineTo(0,h);
237 			cty.stroke();
238 			//cty.strokeRect(0,0,w,h);
239 	
240 			if (step == 0) {
241 				cty.clearRect(0, 0, w, h);
242 			} 
243 			
244 			var x = 100-5*(3.5 * Math.sin(controls.k1*step*0.0003) -3.74 * Math.sin(controls.k2*step*0.0003));
245 			cty.lineWidth="2";
246 			cty.beginPath();
247 			if (step == 0) {
248 				cty.moveTo(0, h/2); }
249 			else {
250 				cty.moveTo((step -1)/4, x);
251 			}
252 			cty.lineTo(step/4, x);
253 			cty.stroke();
254 		
255 			step += controls.t;
256 
257 			cube2.rotation.z = 0.2*Math.sin(controls.k1*step*0.0003) - 0.2*Math.sin(controls.k2*step*0.0003);
258             group1.position.y = 0.75*(3.5 * Math.sin(controls.k1*step*0.0003) -3.74 * Math.sin(controls.k2*step*0.0003));
259             spring1.scale.z = 0.1 - 0.008*( 0.75*controls.l*(3.5 * Math.sin(controls.k1*step*0.0003) - 3.74 * Math.sin(controls.k2*step*0.0003)));
260             spring2.scale.z = 0.1 - 0.02*( 0.75*controls.l*(3.5 * Math.sin(controls.k1*step*0.0003) - 3.74 * Math.sin(controls.k2*step*0.0003)));
261 
262             requestAnimationFrame(render);
263             renderer.render(scene, camera);
264         }
265         
266          function initStats() {
267             var stats = new Stats();
268             stats.setMode(0); // 0: fps, 1: ms
269             stats.domElement.style.position = 'absolute';
270             stats.domElement.style.left = '0px';
271             stats.domElement.style.top = '0px';
272 
273             document.getElementById("Stats-output").appendChild(stats.domElement);
274             return stats;
275         }
276     }
277 window.onload = init
278 </script>
279 </body>
280 </html>

Используемые библиотеки

  • three.js
  • jquery-1.9.0.js
  • stats.js
  • dat.gui.js
  • OrbitControls.js
Источник — «http://tm.spbstu.ru/?title=Задача_Д.24,_вариант_20_из_Задачника_Яблонского&oldid=50618»