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

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

== Решение ==

{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/drepin/ |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 init() {
	const g=1/2;
	var ctxp = canvas_plot.getContext("2d");
	var wp = canvas_plot.width;
	var hp = canvas_plot.height;
	var Yt = [];
	var M1=25;
	var M2=1;
	var M3=1;
	var Y=0;
	var X=0;
	var line;
	var t=0;
	var angle = 0;
	var moving = false;
	var stats = initStats();
	// create a scene, that will hold all our elements such as objects, cameras and lights.
	var scene = new THREE.Scene();
	var clock = new THREE.Clock();
	// create a camera, which defines where we're looking at.
	var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
		camera.position.x = -15;
		camera.position.y = 45;
		camera.position.z = 50;
	// call the render function
	// create a render and set the size
	var webGLRenderer = new THREE.WebGLRenderer();
		webGLRenderer.setClearColor(new THREE.Color(0xaaabfe, 1.0));
		webGLRenderer.setSize(window.innerWidth, window.innerHeight);
		webGLRenderer.shadowMapEnabled = true;
	// create the ground plane
	var textureGrass = THREE.ImageUtils.loadTexture("../assets/textures/ground/grasslight-big.jpg");
		textureGrass.wrapS = THREE.RepeatWrapping;
        textureGrass.wrapT = THREE.RepeatWrapping;
        textureGrass.repeat.set(4, 4);
    var planeGeometry = new THREE.PlaneGeometry(1500, 400, 20, 20);
    var planeMaterial = new THREE.MeshLambertMaterial({map: textureGrass});
    var plane0 = new THREE.Mesh(planeGeometry, planeMaterial);
        plane0.receiveShadow = true;
        plane0.rotation.x = -0.5 * Math.PI;
        plane0.position.x = -25;
        plane0.position.y = -50;
        plane0.position.z = 0;
        scene.add(plane0);	
	var cylinder1 = createMesh(new THREE.CylinderGeometry(5, 5, 2, 18), "plaster.jpg");
		cylinder1.rotation.x = 1.57;
		cylinder1.position.x = -15;
		cylinder1.position.y = Y/2+7;
	var cylinder2 = createMesh(new THREE.CylinderGeometry(5, 5, 2, 18), "plaster.jpg");
		cylinder2.rotation.x = 1.57;
		cylinder2.position.x = 0;
		cylinder2.position.y = 18;
	var plane1 = createMesh(new THREE.PlaneGeometry(10, 15, 4, 4), "cat.jpg");
		plane1.rotation.x = -1.57;
		plane1.position.x = -30;
		plane1.position.y = 25;
	var plane2 = createMesh(new THREE.PlaneGeometry(10, 15, 4, 4), "dog.jpg");
		plane2.rotation.x = -1.57;
		plane2.position.x = 0;
		plane2.position.y = 26;	
	var box1 = createMesh(new THREE.BoxGeometry(8, 6, 8), "brick-wall.jpg");
		box1.position.x = 5;
		box1.position.y = -Y;
	var box2 = createMesh(new THREE.BoxGeometry(8, 9, 8), "darker_wood.jpg");
		box2.position.x = -15;
		box2.position.y = Y/2-11;
		box2.position.z = 0;
	var box3 = createMesh(new THREE.BoxGeometry(3, 8, 4), "metal-rust.jpg");
		box3.position.x = -15;
		box3.position.y = Y/2+4;
		box3.position.z = 0;
	var box4 = createMesh(new THREE.BoxGeometry(1, 4, 1), "metal-rust.jpg");
		box4.position.x = -14;
		box4.position.y = Y/2-2;
		box4.position.z = 0;
	var box5 = createMesh(new THREE.BoxGeometry(2, 1, 1), "metal-rust.jpg");
		box5.position.x = -15;
		box5.position.y = Y/2-4;
		box5.position.z = 0;
	var box6 = createMesh(new THREE.BoxGeometry(1, 1, 1), "metal-rust.jpg");
		box6.position.x = -16;
		box6.position.y = Y/2-3;
		box6.position.z = 0;
	var box7 = createMesh(new THREE.BoxGeometry(2, 8, 4), "metal-rust.jpg");
		box7.position.x = 0;
		box7.position.y = 21.99;	
	var points = [];
		points.push({x: -30, y: 25, z: 0});
		points.push({x: -20, y: Y/2+7, z: 0});
		points.push({x: -10, y: Y/2+7, z: 0});
		points.push({x: -5, y: 18, z: 0});
		points.push({x: 5, y: 18, z: 0});
		points.push({x: 5, y: -Y, z: 0});								
	var lines = new THREE.Geometry();
	var colors = [];
	var i = 0;
	points.forEach(function (e) {
		lines.vertices.push(new THREE.Vector3(e.x, e.y, e.z));
		colors[i] = new THREE.Color(0x5757bb);
		i++;
	});
	lines.colors = colors;
	var materialLine = new THREE.LineBasicMaterial({
		opacity: 1.0,
		linewidth: 1,
		vertexColors: THREE.VertexColors
	});

	line = new THREE.Line(lines, materialLine);
	line.position.set(0, 0, 0);
	
	// add everything to the scene
	scene.add(plane1, plane2, cylinder1, cylinder2, box1, box2, box3, box4,box5,box6,box7);
	
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        scene.add( spotLight );
        scene.add(new THREE.AmbientLight("#999999"));

		
	// add the output of the renderer to the html element
	webGLRenderer.domElement.style.width='100%';
	document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
	var controls = new function () {
			this.КИРПИЧИ = 25;
			this.БЛОКИ = 1;
			this.ДЕРЕВО = 1;
			this.ВРАЩЕНИЕ = false;
            this.redraw = function () {
				M1=controls.КИРПИЧИ;
				M2=controls.БЛОКИ;
				M3=controls.ДЕРЕВО;
				moving=controls.ВРАЩЕНИЕ;
            };
        };

        var gui = new dat.GUI();
		gui.add(controls, 'КИРПИЧИ', 1, 50).onChange(controls.redraw);
		gui.add(controls, 'БЛОКИ', 1, 50).onChange(controls.redraw);
		gui.add(controls, 'ДЕРЕВО', 1, 50).onChange(controls.redraw);
        gui.add(controls, 'ВРАЩЕНИЕ', 0, 1).onChange(controls.redraw);
		gui.domElement.style.position = 'absolute';
        gui.domElement.style.left = '0px';
		document.getElementsByClassName('dg main a')[0].style.height= '400px' ;
		document.getElementsByClassName('dg main a')[0].style.top= '400px' ;
        //controls.redraw();
		
		var trackballControls = new THREE.TrackballControls(camera, webGLRenderer.domElement);
		trackballControls.rotateSpeed = 1.0;
        trackballControls.zoomSpeed = 1.0;
        trackballControls.panSpeed = 1.0;
        trackballControls.staticMoving = true;
        render();
	function createMesh(geom, imageFile) {
		var texture = THREE.ImageUtils.loadTexture("../assets/textures/general/" + imageFile);
		var mat = new THREE.MeshPhongMaterial();
		if(geom.type=='PlaneGeometry') mat.side = THREE.DoubleSide;
		mat.map = texture;
		var mesh = new THREE.Mesh(geom, mat);
		return mesh;
	}
	function physics(delta) {
		scene.remove(line);
		t+=1/60;
		Y=t*t*(2*g*(2*M1-M2-M3)/(8*M1+2*M2+7*M3));
		X=2*(-1)*Math.sqrt(2*g*Y*(2*M1-M2-M3)/(8*M1+2*M2+7*M3))*((cylinder1.position.x-2.5-plane1.position.x)/Math.sqrt(Math.pow((plane1.position.x-cylinder1.position.x-2.5),2)+Math.pow((plane1.position.y-Y/2),2)));
		
		cylinder2.rotation.y =-Y/5;
		cylinder1.rotation.y =Y/5;
		cylinder1.position.y = Y/2+7
		box1.position.y = -Y;
		box2.position.y = Y/2-11;
		box3.position.y = Y/2+4;
		box4.position.y = Y/2-2;
		box5.position.y = Y/2-4;
		box6.position.y = Y/2-3;
		
		cylinder1.position.x = X-15;
		box2.position.x = X-15;
		box3.position.x = X-15;
		box4.position.x = X-14;
		box5.position.x = X-15;
		box6.position.x = X-16;
	
	var points = new Array(6);
		points.push({x: -30, y: 25, z: 0});
		points.push({x: X-20, y: Y/2+7, z: 0});
		points.push({x: X-10, y: Y/2+7, z: 0});
		points.push({x: -4, y: 20, z: 0});
		points.push({x: 5, y: 18, z: 0});
		points.push({x: 5, y: -Y, z: 0});								
	var lines = new THREE.Geometry();
	var colors = [];
	var i = 0;
	points.forEach(function (e) {
		lines.vertices.push(new THREE.Vector3(e.x, e.y, e.z));
		colors[i] = new THREE.Color(0x5757bb);
		i++;
	});
	lines.colors = colors;
	var materialLine = new THREE.LineBasicMaterial({
		opacity: 1.0,
		linewidth: 1,
		vertexColors: THREE.VertexColors
	});
	line = new THREE.Line(lines, materialLine);
	line.position.set(0, 0, 0);
	scene.add(line);
	
	ctxp.clearRect(0, 0, wp, hp);
	ctxp.strokeRect(0, 0, wp, hp);
		y = 2*Y^(1/2)
		Yt.push(y);
		if (Yt.length > 500) Yt.shift();
		var N = Yt.length;
		var max=Yt[0];
		var min=Yt[0];
		for (var i = 1; i < N; i++) {
			if (Yt[i] > max) max = Yt[i];
			if (Yt[i] < min) min = Yt[i];
		}	
		ctxp.beginPath();
		for (var i = 0; i < N; i++) {
			var xp = i/(N-1)*wp;
			var yp = hp-(Yt[i]-min)/(max - min)*hp;
			if (i == 0) {
				ctxp.moveTo(xp, yp);
			} else {
				ctxp.lineTo(xp, yp);
			}
		}
	ctxp.stroke();
		if (moving){
			angle += 1*delta ; // приращение угла
			camera.position.x = Math.cos(angle) * 70;
			camera.position.z = Math.sin(angle) * 70;
		}
	}
	
	function render() {
		stats.update();
		var delta = clock.getDelta();
        trackballControls.update(delta);
		webGLRenderer.render(scene, camera);
		if(Y/2+15<=25) physics(delta)
		else{
			Y=0;
			t=0;
		}	
		requestAnimationFrame(render);
	}
	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';
		document.getElementById("Stats-output").appendChild(stats.domElement);
		return stats;
    }
}
window.onload = init;
</syntaxhighlight>
</div>

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

*three.js
*stats.js
*dat.gui.js
*chroma.js
*TrackballControls.js

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


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

'''''Условия задачи:''''' 
[[Файл:mesher.jpg|thumb|Картинка к задаче.]]
Груз A массы M1, опускаясь вниз, при помощи троса, перекинутого через неподвижный блок D, поднимает вверх груз B массы M2, прикрепленный к оси подвижного блока C. Блоки C и D считать однородными сплошными дисками массы M3 каждый. Определить скорость груза A в момент, когда он опустится на высоту h. Массой троса, проскальзыванием по ободам блоков и силами сопротивления пренебречь. В начальный момент система находилась в покое.

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


== См. также ==
* [[Проектная деятельность по информатике]]
*[[Задачи по теоретической механике]]

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