Редактирование: Задача Д.24, вариант 20 из Задачника Яблонского
Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.
Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы изменения вступили в силу.
Текущая версия | Ваш текст | ||
Строка 16: | Строка 16: | ||
'''Текст программы:''' <div class="mw-collapsible-content"> | '''Текст программы:''' <div class="mw-collapsible-content"> | ||
<syntaxhighlight lang="javascript" line start="1" enclose="div"> | <syntaxhighlight lang="javascript" line start="1" enclose="div"> | ||
− | + | <!DOCTYPE html> | |
− | + | <html> | |
− | + | <head> | |
+ | <title> D24_20</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(); | ||
− | + | var scene = new THREE.Scene(); | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); | |
− | |||
− | + | 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; | ||
+ | |||
+ | 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; | ||
− | + | 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.castShadow = true; | ||
+ | |||
+ | 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.castShadow = true; | ||
+ | |||
+ | 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); | ||
+ | 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> | </syntaxhighlight> | ||
</div> | </div> |