Редактирование: Система блоков

'''''Задача:''''' С помощью языка программирования JavaScript смоделировать систему блоков с грузом.
[[Файл:Blocks.png|thumb|Система блоков с грузом (1 - подвижный блок, 2 - неподвижный блок, 3 - груз.)]]

== Решение ==

{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Shvarev/5.html |width=800 |height=600 |border=0 }}

Программа: [[Медиа: Blocks.zip|скачать]]

<div class="mw-collapsible mw-collapsed">
'''Текст программы на языке JavaScript:''' <div class="mw-collapsible-content">
Файл '''"5.js"'''
<syntaxhighlight lang="javascript" line start="1" enclose="div">
function main()
{
	var scene = new THREE.Scene();
	var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
	var render = new THREE.WebGLRenderer();
	render.setClearColor(0xEEEEEE, 1);
	render.setSize(window.innerWidth, window.innerHeight);
	
	
	var axes = new THREE.AxisHelper(20);
	scene.add(axes);
	
	
	var planeGeometry = new THREE.PlaneGeometry(60,40,50,1);
	var planeMaterial = new THREE.MeshLambertMaterial({color:0x6699FF});
	var plane = new THREE.Mesh(planeGeometry, planeMaterial);
	plane.rotation.x = -0.5*Math.PI;
	plane.position.x=15;
	plane.position.y=0;
	plane.position.z=14;
	scene.add(plane);
	
	
	var planeGeometry = new THREE.PlaneGeometry(20,60,50,1);
	var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff});
	var plane1 = new THREE.Mesh(planeGeometry, planeMaterial);
	plane1.rotation.z = -0.5*Math.PI;
	plane1.position.x=15;
	plane1.position.y=10;
	plane1.position.z=-6;
	scene.add(plane1);
	
	
	var boxGeometry1 = new THREE.BoxGeometry(0.1,4,16);
	var boxMaterial1 = new THREE.MeshLambertMaterial({color:0xE5DD06, wireframe:false});
	var cube1 = new THREE.Mesh(boxGeometry1, boxMaterial1);
	cube1.position.x=8;
	cube1.position.y=10;
	cube1.position.z=2;
	scene.add(cube1);
	
	var boxGeometry2 = new THREE.BoxGeometry(0.1,4,10);
	var boxMaterial2 = new THREE.MeshLambertMaterial({color:0xE5DD06, wireframe:false});
	var cube2 = new THREE.Mesh(boxGeometry2, boxMaterial2);
	cube2.position.x=16;
	cube2.position.y=10;
	cube2.position.z=5;
	scene.add(cube2);
	
	var boxGeometry3 = new THREE.BoxGeometry(0.1,4,8);
	var boxMaterial3 = new THREE.MeshLambertMaterial({color:0xE5DD06, wireframe:false});
	var cube3 = new THREE.Mesh(boxGeometry3, boxMaterial3);
	cube3.position.x=24;
	cube3.position.y=10;
	cube3.position.z=4;
	scene.add(cube3);
	
	
	
	
	/**
	var cubeGeometry = new THREE.CubeGeometry(4,4,4);
	var cubeMesh = new THREE.MeshLambertMaterial({color:0xff0000, wireframe:false});
	var cube = new THREE.Mesh(cubeGeometry, cubeMesh);
	cube.position.x=-4;
	cube.position.y=3;
	cube.position.z=0;
	scene.add(cube);
	

	var cylinderGeometry = new THREE.CylinderGeometry(4,4,5,16);
	var cylinderMaterial = new THREE.MeshLambertMaterial({color:0xaaee00});
	var cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial)
	cylinder.position.x=10;
	cylinder.position.y=10;
	cylinder.position.z=0;
	
	scene.add(cylinder);
	*/
	
	
	var cylinderGeometry = new THREE.CylinderGeometry(4,4,4,32);
	var cylinderMaterial = new THREE.MeshLambertMaterial({color:0xff0000, wireframe: false});
	
	var cylinder1 = new THREE.Mesh(cylinderGeometry, cylinderMaterial)
	cylinder1.position.x=12;
	cylinder1.position.y=10;
	cylinder1.position.z=10;
	scene.add(cylinder1);
	
	var cylinder2 = new THREE.Mesh(cylinderGeometry, cylinderMaterial)
	cylinder2.position.x=20;
	cylinder2.position.y=10;
	cylinder2.position.z=0;
	scene.add(cylinder2);
	
	var semiCylinderGeometry1 = new THREE.CylinderGeometry(4,4,4,32, 1,true, -Math.PI/2, Math.PI);
	var semiCylinderGeometry2 = new THREE.CylinderGeometry(4,4,4,32, 1,true, Math.PI/2, Math.PI);
	var semiCylinderMaterial = new THREE.MeshLambertMaterial({color:0xE5DD06, wireframe: false});
	var semiCylinder1 = new THREE.Mesh(semiCylinderGeometry1, semiCylinderMaterial)
	var semiCylinder2 = new THREE.Mesh(semiCylinderGeometry2, semiCylinderMaterial)
	
	semiCylinder1.position.x=12;
	semiCylinder1.position.y=10;
	semiCylinder1.position.z=10;
	scene.add(semiCylinder1);
	
	semiCylinder2.position.x=20;
	semiCylinder2.position.y=10;
	semiCylinder2.position.z=0;
	scene.add(semiCylinder2);
	
	
	var pyrGeometry = new THREE.CylinderGeometry(4,4,4,3);
	var pyrMaterial = new THREE.MeshLambertMaterial({color:0xff8800, wireframe:false});
	var pyr = new THREE.Mesh(pyrGeometry, pyrMaterial)
	pyr.position.x=20;
	pyr.position.y=10;
	pyr.position.z=-4;
	scene.add(pyr);
	
	
	var cubeGeometry = new THREE.CubeGeometry(4,4,2);
	var cubeMesh = new THREE.MeshLambertMaterial({color:0xff0000, wireframe:false});
	var cube = new THREE.Mesh(cubeGeometry, cubeMesh);
	cube.position.x=24;
	cube.position.y=10;
	cube.position.z=9;
	scene.add(cube);
	
	
	/**
	var line_geometry = new THREE.Geometry();
	line_geometry.vertices.push(new THREE.Vector3(16,10,0));
    line_geometry.vertices.push(new THREE.Vector3(16,10,10));
	var   material_line = new THREE.LineBasicMaterial({ color: 0x6699FF, linewidth: 5000, fog:false});
	var line1 = new THREE.Line(line_geometry,material_line);	
    scene.add( line1);

		
	var line_geometry = new THREE.Geometry();
    line_geometry.vertices.push(new THREE.Vector3(8,10,10));
    line_geometry.vertices.push(new THREE.Vector3(8,10,-6));
	var   material_line = new THREE.LineBasicMaterial({ color: 0x6699FF, linewidth: 5000, fog:false});
	var line2 = new THREE.Line(line_geometry,material_line);	
    scene.add(line2);

	var line_geometry = new THREE.Geometry();
    line_geometry.vertices.push(new THREE.Vector3(24,10,0));
    line_geometry.vertices.push(new THREE.Vector3(24,10,8));
	var   material_line = new THREE.LineBasicMaterial({ color: 0x6699FF, linewidth: 5000, fog:false});
	var line3 = new THREE.Line(line_geometry,material_line);	
    scene.add(line3);

	*/
	
	var  spotLight = new THREE.SpotLight(0xffffff);
	spotLight.position.set(0,100,0);
	scene.add(spotLight);
	
	var  spotLight1 = new THREE.SpotLight(0xffffff);
	spotLight1.position.set(50,100,30);
	scene.add(spotLight1);
	
	
	
	render.shadowMapEnabled = true;
	plane.receiveShadow = true;
	
	/**
	cube.castShadow = true;
	cylinder.castShadow = true;
	*/
	spotLight.castShadow = true;

	
	
	
	
	camera.position.x= 0;
	camera.position.y= 100;
	camera.position.z= 0;
	camera.lookAt(scene.position);
	$("#webGL").append(render.domElement);
	
	
	
	var controls = new function() {
		this.bouncingSpeed = 0.03;
		this.r1 = 2;
	}
	var gui = new dat.GUI();
	gui.add(controls, 'bouncingSpeed',0,0.5);
	gui.add(controls, 'r1',1,2.5);
		
	contr = new THREE.OrbitControls(camera);
	contr.dumping = 0.2;
	

	
	/**contr = new THREE.TrackballControls(camera);
	contr.rotateSpeed = 1.0;
	contr.zoomSpeed = 1.2;
	contr.panSpeed = 0.8;
	contr.noZoom = false;
	contr.noPan = false;
	contr.staticMoving = true;
	contr.dynamicDampingFactor = 0.3;
	contr.keys = [65,83,68];
	*/
	
	
	window.addEventListener('resize',onWindowResize,false);
	function onWindowResize()
	{
		camera.aspect = window.innerWidth/window.innerHeight;
		camera.updateProjectionMatrix();
		render.setSize(window.innerWidth,window.innerHeight);
	
		renderer();
	}
	
	var stats = initStats();
	var step = 0;
	
	var z1 =16;
	var z2 = 10;
	var z3 = 8;
	
	var r2 = 2;

	var r1 = 2;
	
	
	function renderer()
	{
		/**
		cube.rotation.x+=controls.rotationSpeed;
		cube.rotation.y+=controls.rotationSpeed;
		cube.rotation.z+=controls.rotationSpeed;
		
		cylinder.position.x = 20+(10*(Math.cos(step)));
		cylinder.position.y = 2+(10*(Math.abs(Math.sin(step))));
		
		
		*/
		
		
		step+=controls.bouncingSpeed;
		step1 = step/100;
		step2 = step/200;

		r1 = controls.r1;
		r2 = 4 - r1;
		
		var geometryCylinder2 = new THREE.CylinderGeometry(2*r1,2*r1,4,32);
		var geometryCylinder1 = new THREE.CylinderGeometry(2*r2,2*r2,4,32);
	
		cylinder2.geometry = geometryCylinder2;
		cylinder1.geometry = geometryCylinder1;
		
		
		
		var semiGeometryCylinder2 = new THREE.CylinderGeometry(2*r1,2*r1,4,32, 1,true, Math.PI/2, Math.PI);
		var semiGeometryCylinder1 = new THREE.CylinderGeometry(2*r2,2*r2,4,32, 1,true, -Math.PI/2, Math.PI);
	
		semiCylinder2.geometry = semiGeometryCylinder2;
		semiCylinder1.geometry = semiGeometryCylinder1;
		
		
		z1 -=step2;
		z2 -=step2;
		z3 +=step1;
		var geometry1 = new THREE.BoxGeometry( 0.01, 4, z1 );
		var geometry2 = new THREE.BoxGeometry( 0.01, 4, z2 );
		var geometry3 = new THREE.BoxGeometry( 0.01, 4, z3 );
		cube1.position.x =12 - 2*r2;
		cube2.position.x = 12 + 2*r2;
		cube3.position.x = 20 + 2*r1;
		if ( cube2.position.z >= cylinder2.position.z)
		{	
		

		
		cube1.geometry = geometry1;
		cube1.position.z -= step2/2;
		
		
		
		cube2.geometry = geometry2;
		cube2.position.z -= step2/2;
		
		cube3.geometry = geometry3;
		cube3.position.z += step1/2;
		
				
			
		cylinder1.rotation.y+=step2/2;
		cylinder2.rotation.y-=step1/2;
		
		
		
		/**
		line3.geometry.vertices[1].z += step1 ;
		line3.geometry.verticesNeedUpdate = true;
		
		line2.geometry.vertices[0].z -= step2 ;

		line2.geometry.verticesNeedUpdate = true;
		
		
		line1.geometry.vertices[1].z -= step2 ;
		line1.geometry.verticesNeedUpdate = true;
		
		*/
		
		cylinder1.position.z -= step2; 
		
		
		
		
		
		semiCylinder1.position.z -=step2;
		
		cube.position.z += step1;
		}
		
			
		document.getElementById("td1").innerHTML = cube2.position.z ;
		
		requestAnimationFrame(renderer);
		
		contr.update();
		
		render.render(scene,camera);
		
		
		
		
	}
	this.start = renderer;
	
	
}
function initStats()
{
	var stats = new Stats();
	stats.setMode(0);
	stats.domElement.style.position='absolute';
	stats.domElement.style.left = '0px';
	stats.domElement.style.top = '0px';
	$("#Stats").append(stats.domElement);
	return stats;
}


</syntaxhighlight>
</div>

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

* cloudflare.js
* dat.gui.js
* googleapis.js
* orbitControls.js
* stats.js
* trackballControls.js

== Возможности программы ==

* задание радиусов блоков
* задание скорости вращения блоков
* запуск программы по кнопке
* получение координаты груза

== Решение частного случая ==

'''''Условия задачи:''''' 
[[Файл:Blocks2.png|thumb|Картинка к задаче.]]
Подвижный блок <math>1</math> и неподвижный блок <math>2</math> соединены нерастяжимой нитью. Груз <math>K</math>, прикрепленный к концу этой нити, опускается по закону <math> x = 2t^2 </math> м. Определить скорости точек <math>C, D,B и E</math>, лежащих на ободе подвижного блока, в момент времени <math>t = 1</math> с. в положении, указанном на рисунке, если радиус подвижного блока <math>1</math> равен <math>0.2</math> м., а <math>CD\perp BE</math>. Найти также угловую скорость блока <math>1</math>.

'''''Решение:'''''

<math>C</math> - мгновенный центр скоростей, <math>v_{C} = 0</math>;

<math>v_{K} = v_{D} = \dot{x} = 4</math> м/c;

<math>ω = \frac{v_{D}}{DC} = \frac{4}{0.4} = 10 c^{-1} </math>;

<math> v_{O} = ω*r = 10*0.2 = 2</math> м/c.

== См. также ==

* [[Справка:Содержание|Справочная информация]]
* [[Проектная деятельность по информатике]]


[[Category: Студенческие проекты]]