[OKG/P08] Added work from todays practicum

6 files changed, 472 insertions, 0 deletions

diff --git a/Year 2/Computer Graphics Fundamentals/08-Practice-28.11.2022/01.js b/Year 2/Computer Graphics Fundamentals/08-Practice-28.11.2022/01.js
new file mode 100644
index 0000000..2a2f9d9
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/08-Practice-28.11.2022/01.js
@@ -0,0 +1,75 @@
+// Задача: Направете топката да се движи по
+// оста X, като рикошира от двата края
+
+
+var renderer = new THREE.WebGLRenderer({antialias:true});
+renderer.setSize( window.innerWidth, window.innerHeight );
+renderer.setAnimationLoop( drawFrame );
+document.body.appendChild( renderer.domElement );
+
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+
+var scene = new THREE.Scene();
+scene.background = new THREE.Color( 'skyblue' );
+
+var aspect = window.innerWidth/window.innerHeight;
+var camera = new THREE.PerspectiveCamera( 30, aspect );
+camera.position.set( 0, 120, 200 );
+camera.lookAt( new THREE.Vector3( 0, -10, 0 ) );
+
+
+// топчето за движене
+var ball = new THREE.Mesh(
+	new THREE.SphereGeometry( 5, 32, 32 ),
+	new THREE.MeshPhongMaterial( {color: 'orange', shininess: 10, specular: 'white', emissive: 'firebrick'} )
+);
+ball.castShadow = true;
+scene.add( ball );
+
+// платформата
+var ground = new THREE.Mesh(
+	new THREE.BoxGeometry( 160.2, 2.2, 10.2 ),
+	new THREE.MeshPhongMaterial( {color: 'slateblue', shininess: 2, specular: 'white'} )
+);
+ground.position.y = -6;
+ground.receiveShadow = true;
+scene.add( ground );
+		
+// стъкленият корпус
+var glass = new THREE.Mesh(
+	new THREE.BoxGeometry( 160, 10, 10 ),
+	new THREE.MeshPhongMaterial( {color: 'azure', opacity: 0.2, transparent: true, shininess: 50, specular: 0x8080ff, side:THREE.BackSide} )
+);
+glass.receiveShadow = true;
+scene.add( glass );
+
+// бялата рамка на стъкления корпус
+var frame = new THREE.BoxHelper( glass );
+frame.material.color.set( 'white' );
+scene.add( frame );
+		
+// светлина
+var light = new THREE.PointLight( 'white', 0.5 );
+light.position.set( 0, 100, 0 );
+light.castShadow = false;
+scene.add( light );
+
+// и още една
+var light = new THREE.PointLight();
+light.position.set( 0, 20, 0 );
+light.castShadow = true;
+scene.add( light );
+
+
+var movementV = new THREE.Vector3(1,0,0);
+
+function drawFrame()
+{
+	scene.rotation.y += 0.001;
+	if (Math.abs(ball.position.x) + 5 >= 80)
+		movementV.multiplyScalar(-1);
+	ball.position.add(movementV);
+
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/08-Practice-28.11.2022/02.js b/Year 2/Computer Graphics Fundamentals/08-Practice-28.11.2022/02.js
new file mode 100644
index 0000000..25d9a3d
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/08-Practice-28.11.2022/02.js
@@ -0,0 +1,80 @@
+// Задача: Направете топката да се движи в
+// равнината XZ, като рикошира от стените.
+
+
+var renderer = new THREE.WebGLRenderer({antialias:true});
+renderer.setSize( window.innerWidth, window.innerHeight );
+renderer.setAnimationLoop( drawFrame );
+document.body.appendChild( renderer.domElement );
+
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+
+var scene = new THREE.Scene();
+scene.background = new THREE.Color( 'skyblue' );
+
+var aspect = window.innerWidth/window.innerHeight;
+var camera = new THREE.PerspectiveCamera( 30, aspect );
+camera.position.set( 0, 120, 200 );
+camera.lookAt( new THREE.Vector3( 0, -10, 0 ) );
+
+
+// топчето за движене
+var ball = new THREE.Mesh(
+	new THREE.SphereGeometry( 5, 32, 32 ),
+	new THREE.MeshPhongMaterial( {color: 'orange', shininess: 10, specular: 'white', emissive: 'firebrick'} )
+);
+ball.castShadow = true;
+scene.add( ball );
+
+// платформата
+var ground = new THREE.Mesh(
+	new THREE.BoxGeometry( 160.2, 2.2, 100.2 ),
+	new THREE.MeshPhongMaterial( {color: 'slateblue', shininess: 2, specular: 'white'} )
+);
+ground.position.y = -6;
+ground.receiveShadow = true;
+scene.add( ground );
+		
+// стъкленият корпус
+var glass = new THREE.Mesh(
+	new THREE.BoxGeometry( 160, 10, 100 ),
+	new THREE.MeshPhongMaterial( {color: 'azure', opacity: 0.2, transparent: true, shininess: 50, specular: 0x8080ff, side:THREE.BackSide} )
+);
+glass.receiveShadow = true;
+scene.add( glass );
+
+// бялата рамка на стъкления корпус
+var frame = new THREE.BoxHelper( glass );
+frame.material.color.set( 'white' );
+scene.add( frame );
+		
+// светлина
+var light = new THREE.PointLight( 'white', 0.5 );
+light.position.set( 0, 100, 0 );
+light.castShadow = false;
+scene.add( light );
+
+// и още една
+var light = new THREE.PointLight();
+light.position.set( 0, 20, 0 );
+light.castShadow = true;
+scene.add( light );
+
+function absVec(v) {
+	return new THREE.Vector3(Math.abs(v.x), Math.abs(v.y), Math.abs(v.z));
+}
+function lessThanV(v1, v2) {
+	return new THREE.Vector3(-1+2*(v1.x < v2.x), -1+2*(v1.y < v2.y), -1+2*(v1.z < v2.z));
+}
+var movementV = new THREE.Vector3(1, 0, 0.5);
+var edgeV = new THREE.Vector3(80, 0, 50);
+	
+function drawFrame()
+{
+	scene.rotation.y += 0.001;
+	movementV.multiply(lessThanV(absVec(ball.position).addScalar(5), edgeV));
+	ball.position.add(movementV);
+
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/08-Practice-28.11.2022/03.js b/Year 2/Computer Graphics Fundamentals/08-Practice-28.11.2022/03.js
new file mode 100644
index 0000000..4f4d475
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/08-Practice-28.11.2022/03.js
@@ -0,0 +1,117 @@
+// Задача: Направете топките да се движат в
+// паралелепипед, като рикошират от стените и
+// са подвластни на гравитацията.
+
+
+var renderer = new THREE.WebGLRenderer({antialias:true});
+renderer.setSize( window.innerWidth, window.innerHeight );
+renderer.setAnimationLoop( drawFrame );
+document.body.appendChild( renderer.domElement );
+
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+
+var scene = new THREE.Scene();
+scene.background = new THREE.Color( 'skyblue' );
+
+var aspect = window.innerWidth/window.innerHeight;
+var camera = new THREE.PerspectiveCamera( 30, aspect );
+camera.position.set( 0, 60, 300 );
+camera.lookAt( new THREE.Vector3( 0, -10, 0 ) );
+
+
+// брой топчета
+var n = 10;
+var balls = [];
+
+// топчета за движене, случайната начална скорост
+// е вградена в топчето (това е полето v)
+for( var i=0; i<n; i++ )
+{
+	balls[i] = new THREE.Mesh(
+		new THREE.SphereGeometry( 5, 32, 32 ),
+		new THREE.MeshPhongMaterial( {shininess: 100} )
+	);
+	balls[i].castShadow = true;
+	balls[i].material.color.setRGB( 0.5+0.5*Math.random(), 0.5+0.5*Math.random(),0.5+0.5*Math.random() );
+	balls[i].material.emissive.setRGB( 0.5*Math.random(), 0.5*Math.random(), 0.5*Math.random() );
+	balls[i].position.set( 40-80*Math.random(), 40-80*Math.random(), 40-80*Math.random() );
+	balls[i].v = new THREE.Vector3( 1-2*Math.random(), 0, 1-2*Math.random() );
+	balls[i].v.setLength( 0.5 );
+	scene.add( balls[i] );
+}
+
+// платформата
+var ground = new THREE.Mesh(
+	new THREE.BoxGeometry( 160.2, 2.2, 100.2 ),
+	new THREE.MeshPhongMaterial( {color: 'slateblue', shininess: 2, specular: 'white'} )
+);
+ground.position.y = -51;
+ground.receiveShadow = true;
+scene.add( ground );
+		
+// стъкленият корпус
+var glass = new THREE.Mesh(
+	new THREE.BoxGeometry( 160, 100, 100 ),
+	new THREE.MeshPhongMaterial( {color: 'lightcyan', opacity: 0.3, transparent: true, shininess: 0, specular: 'white', side:THREE.BackSide} )
+);
+glass.receiveShadow = true;
+scene.add( glass );
+
+// бялата рамка на стъкления корпус
+var frame = new THREE.BoxHelper( glass );
+frame.material.color.set( 'white' );
+scene.add( frame );
+		
+// светлина
+var light = new THREE.PointLight( 'white', 0.5 );
+light.position.set( 0, 0, 0 );
+light.castShadow = false;
+scene.add( light );
+
+// и още една
+var light = new THREE.PointLight();
+light.position.set( 0, 100, 0 );
+light.castShadow = true;
+scene.add( light );
+
+
+// ограничения на движението по X, Y и Z
+var maxX = 160/2-5;
+var minX = -maxX;
+var maxZ = 100/2-5;
+var minZ = -maxZ;
+
+function absVec(v) {
+	return new THREE.Vector3(Math.abs(v.x), Math.abs(v.y), Math.abs(v.z));
+}
+function lessThanV(v1, v2) {
+	return new THREE.Vector3(-1+2*(v1.x < v2.x), -1+2*(v1.y < v2.y), -1+2*(v1.z < v2.z));
+}
+
+var edgeV = new THREE.Vector3(80, 50, 50);
+
+
+function drawFrame()
+{
+	scene.rotation.y += 0.001;
+
+	// преместване на топчето
+	for( var i=0; i<n; i++ )
+	{
+		var v = balls[i].v;
+		var p = balls[i].position;
+		
+		// p.add( v );
+		v.multiply(lessThanV(absVec(p).addScalar(5), edgeV));
+		p.add(v);
+		// // проверка за удар
+		// if( p.x >= maxX ) { v.x = -v.x; p.x = maxX-(p.x-maxX); }
+		// if( p.x <= minX ) { v.x = -v.x; p.x = minX-(p.x-minX); }
+		//
+		// if( p.z >= maxZ ) { v.z = -v.z; p.z = maxZ-(p.z-maxZ); }
+		// if( p.z <= minZ ) { v.z = -v.z; p.z = minZ-(p.z-minZ); }
+	}
+	
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/08-Practice-28.11.2022/04.js b/Year 2/Computer Graphics Fundamentals/08-Practice-28.11.2022/04.js
new file mode 100644
index 0000000..3627884
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/08-Practice-28.11.2022/04.js
@@ -0,0 +1,97 @@
+// Задача: Направете три вертикално топащи се
+// топки със симулирана гравитация (т.е. с |sin|),
+// като при удар в земята те се разпльокват.			
+
+var renderer = new THREE.WebGLRenderer({antialias:true});
+renderer.setSize( window.innerWidth, window.innerHeight );
+renderer.setAnimationLoop( drawFrame );
+document.body.appendChild( renderer.domElement );
+
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+
+var scene = new THREE.Scene();
+scene.background = new THREE.Color( 'skyblue' );
+
+var aspect = window.innerWidth/window.innerHeight;
+var camera = new THREE.PerspectiveCamera( 30, aspect );
+camera.position.set( 0, 60, 300 );
+camera.lookAt( new THREE.Vector3( 0, -10, 0 ) );
+
+
+var n = 3; // брой топки
+var r = 15; // радиус на топка
+var balls = [];
+var colors = [ 0x907000, 0x2040A0, 0xA02040 ]; // фиксирани цветове
+
+// създаване на трите топки
+for( var i=0; i<n; i++ )
+{
+	balls[i] = new THREE.Mesh(
+		new THREE.SphereGeometry( r, 32, 32 ),
+		new THREE.MeshPhongMaterial( {shininess: 100 } )
+	);
+	balls[i].castShadow = true;
+	balls[i].material.color.set( colors[i] );
+	balls[i].material.emissive.set( colors[i] );
+	balls[i].position.set( -50+50*i, 0, 0 );
+	balls[i].v = 1.5+1*Math.random(); // скорост
+	balls[i].o = 2*Math.PI*Math.random(); // отместване
+	scene.add( balls[i] );
+}
+
+// платформата
+var ground = new THREE.Mesh(
+	new THREE.BoxGeometry( 160.2, 2.2, 100.2 ),
+	new THREE.MeshPhongMaterial( {color: 'slateblue', shininess: 2, specular: 'white'} )
+);
+ground.position.y = -51;
+ground.receiveShadow = true;
+scene.add( ground );
+		
+// стъкленият корпус
+var glass = new THREE.Mesh(
+	new THREE.BoxGeometry( 160, 100, 100 ),
+	new THREE.MeshPhongMaterial( {color: 'lightcyan', opacity: 0.3, transparent: true, shininess: 0, specular: 'white', side:THREE.BackSide} )
+);
+glass.receiveShadow = true;
+scene.add( glass );
+
+// бялата рамка на стъкления корпус
+var frame = new THREE.BoxHelper( glass );
+frame.material.color.set( 'white' );
+scene.add( frame );
+		
+// светлина
+var light = new THREE.PointLight( 'white', 0.5 );
+light.position.set( 0, 0, 0 );
+light.castShadow = false;
+scene.add( light );
+
+// и още една
+var light = new THREE.PointLight();
+light.position.set( 0, 100, 0 );
+light.castShadow = true;
+scene.add( light );
+
+
+var clock = new THREE.Clock();
+
+var min = 0;
+function drawFrame()
+{
+	scene.rotation.y += 0.001;
+
+	var t = clock.getElapsedTime();
+	
+	// преместване на топка
+	for (var i=0; i<n; i++)
+	{
+		// позиция, ако нямаше удар в земята
+		var y = -55+90*Math.abs(Math.sin(balls[i].v*t+balls[i].o));
+		balls[i].position.setY( y );
+		balls[i].scale.set(1, (-55<y&&y<-40) ? 1/-55/y + 0.5 : 1, 1);
+	}
+	
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/08-Practice-28.11.2022/05.js b/Year 2/Computer Graphics Fundamentals/08-Practice-28.11.2022/05.js
new file mode 100644
index 0000000..db42302
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/08-Practice-28.11.2022/05.js
@@ -0,0 +1,82 @@
+
+// Задача: Направете топки да се пързалят напряко
+// по улей до затихване. Улеят също го направете.			
+
+var renderer = new THREE.WebGLRenderer({antialias:true});
+renderer.setSize( window.innerWidth, window.innerHeight );
+renderer.setAnimationLoop( drawFrame );
+document.body.appendChild( renderer.domElement );
+
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+
+var scene = new THREE.Scene();
+scene.background = new THREE.Color( 'skyblue' );
+
+var aspect = window.innerWidth/window.innerHeight;
+var camera = new THREE.PerspectiveCamera( 30, aspect );
+camera.position.set( 0, 120, 300 );
+camera.lookAt( new THREE.Vector3( 0, -10, 0 ) );
+
+
+var n = 3; // брой топки
+var r = 15; // радиус на топка
+var balls = [];
+var colors = [ 0x907000, 0x2040A0, 0xA02040 ]; // фиксирани цветове
+
+// създаване на трите топки
+for( var i=0; i<n; i++ )
+{
+	balls[i] = new THREE.Mesh(
+		new THREE.SphereGeometry( r, 32, 32 ),
+		new THREE.MeshPhongMaterial( {shininess: 100 } )
+	);
+	balls[i].castShadow = true;
+	balls[i].material.color.set( colors[i] );
+	balls[i].material.emissive.set( colors[i] );
+	balls[i].position.set( -50+50*i, 0, 0 );
+	balls[i].v = 1.5+1*Math.random(); // скорост
+	balls[i].o = 2*Math.PI*Math.random(); // отместване
+	scene.add( balls[i] );
+}
+
+// улей (не все още)
+var ground = new THREE.Mesh(
+	new THREE.BoxGeometry( 200, 50, 140 ),
+	new THREE.MeshPhongMaterial()
+);
+var hole = new THREE.Mesh(new THREE.CylinderGeometry(r * 2, r * 2, 200, 32));
+hole.rotation.z = Math.PI / 2;
+hole.position.y = r;
+var csg = new CSG();
+csg.subtract([ground, hole]);
+ground = csg.toMesh();
+ground.position.y = -r;
+ground.receiveShadow = true;
+scene.add( ground );
+
+// светлина
+var light = new THREE.PointLight( 'white', 0.5 );
+light.position.set( 0, 40, 0 );
+light.castShadow = false;
+scene.add( light );
+
+// и още една
+var light = new THREE.PointLight();
+light.position.set( 0, 100, 0 );
+light.castShadow = true;
+scene.add( light );
+
+scene.rotation.y = Math.PI / 2;
+var frame = 0;
+function drawFrame()
+{
+	// scene.rotation.y += 0.003;
+	for (var i = 0; i < n; i++) {
+		var coef = balls[i].v * 7 * Math.sin(frame/10) * Math.exp(-frame / 100);
+		balls[i].position.set(balls[i].position.x, r * Math.sin(coef / (8 * balls[i].v) * balls[i].o / 2 - Math.PI / 2), r * Math.cos(coef / (8 * balls[i].v) * balls[i].o / 2 - Math.PI / 2));
+	}
+	
+	renderer.render( scene, camera );
+	frame++;
+}
diff --git a/Year 2/Computer Graphics Fundamentals/08-Practice-28.11.2022/practicum-template.html b/Year 2/Computer Graphics Fundamentals/08-Practice-28.11.2022/practicum-template.html
new file mode 100644
index 0000000..c7882e9
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/08-Practice-28.11.2022/practicum-template.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Practicum</title>
+	</head>
+	<body>
+		<script>
+			const scripts = [
+				[ "Problem 01", "01.js" ],
+				[ "Problem 02", "02.js" ],
+				[ "Problem 03", "03.js" ],
+				[ "Problem 04", "04.js" ],
+				[ "Problem 05", "05.js" ],
+				[ "Problem 06", "06.js" ],
+			];
+		</script>
+		<script src="../three.min.js"></script>
+		<script src="../CSG.js"></script>
+		<script src="../okg-prac-helper.js"></script>
+	</body>
+</html>