[OKG] Solved practice 02 exercises

7 files changed, 375 insertions, 0 deletions

diff --git a/Year 2/Computer Graphics Fundamentals/02-Practice-10.10.2022/01.js b/Year 2/Computer Graphics Fundamentals/02-Practice-10.10.2022/01.js
new file mode 100644
index 0000000..cdd92a3
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/02-Practice-10.10.2022/01.js
@@ -0,0 +1,53 @@
+// Задача: махнете големия куб и сложете 8 малки
+// кубчета във върховете на въображаем голям куб
+
+var renderer = new THREE.WebGLRenderer();
+renderer.setSize( window.innerWidth, window.innerHeight );
+renderer.setAnimationLoop( drawFrame );
+document.body.appendChild( renderer.domElement );
+
+var scene = new THREE.Scene();
+
+var aspect = window.innerWidth/window.innerHeight;
+var camera = new THREE.PerspectiveCamera( 30, aspect );
+camera.position.set( 3, 3, 8 );
+camera.lookAt( new THREE.Vector3() );
+
+
+
+function createCube(l, x, y, z) {
+	var geometry = new THREE.BoxGeometry( l, l, l );
+	var material = new THREE.MeshPhongMaterial();
+	var cube = new THREE.Mesh( geometry, material );
+	scene.add( cube );
+	cube.position.set(x, y, z);
+}
+
+// createCube(2, 0, 0, 0);
+createCube(0.25,  1,  1,  1);
+createCube(0.25,  1,  1, -1);
+createCube(0.25,  1, -1,  1);
+createCube(0.25,  1, -1, -1);
+createCube(0.25, -1,  1,  1);
+createCube(0.25, -1,  1, -1);
+createCube(0.25, -1, -1,  1);
+createCube(0.25, -1, -1, -1);
+
+
+
+// две светлини - отпред и отзад на сцената
+var light = new THREE.PointLight( );
+light.position.set( 3, 4, 5 );
+scene.add( light );
+
+light = new THREE.PointLight( );
+light.position.set( -3, 4, -5 );
+scene.add( light );
+
+// въртене на сцената като в микровълнова фурна
+function drawFrame()
+{
+	scene.rotation.y += 0.005;
+	renderer.render( scene, camera );
+}
+
diff --git a/Year 2/Computer Graphics Fundamentals/02-Practice-10.10.2022/02.js b/Year 2/Computer Graphics Fundamentals/02-Practice-10.10.2022/02.js
new file mode 100644
index 0000000..08640d3
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/02-Practice-10.10.2022/02.js
@@ -0,0 +1,83 @@
+// Задача: свържете кубовете с гради по ръбовете
+// на въображаемият голям куб
+
+var renderer = new THREE.WebGLRenderer();
+renderer.setSize( window.innerWidth, window.innerHeight );
+renderer.setAnimationLoop( drawFrame() );
+document.body.appendChild( renderer.domElement );
+
+var scene = new THREE.Scene();
+
+var aspect = window.innerWidth/window.innerHeight;
+var camera = new THREE.PerspectiveCamera( 30, aspect );
+camera.position.set( 3, 3, 8 );
+camera.lookAt( new THREE.Vector3() );
+
+// кубове във върховете
+var geometry = new THREE.BoxGeometry( 1/3, 1/3, 1/3 );
+var material = new THREE.MeshPhongMaterial();
+
+for( var x=-1; x<2; x+=2 )
+for( var y=-1; y<2; y+=2 )
+for( var z=-1; z<2; z+=2 )
+{
+	var cube = new THREE.Mesh( geometry, material );
+	cube.position.set( x, y, z );
+	scene.add( cube );
+}
+
+
+
+// златни греди по ръбовете
+var barMaterial = new THREE.MeshPhongMaterial({ color: 0xFFFF00 });
+
+function newBar(barGeometry, x, y, z) {
+	var bar = new THREE.Mesh(barGeometry, barMaterial);
+	bar.position.set( x, y, z );
+	scene.add(bar);
+}
+
+// Each coordinate is either 1, 0 or -1, and because we're working with edges, always two
+// coordinates will be nonzero.
+// So, we have three main triplets: (0, 1, 1), (1, 0, 1) and (1, 1, 0) with four variations
+// each, for the combinations of positive and negative 1s. Example:
+// (0, 1, 1), (0, 1, -1), (0, -1, 1), (0, -1, -1)
+// Finally we notice that the wide side is the one with the zero coordinate (or in another sense,
+// we stretch a square in that axis).
+// For the main triplets, because it's simpler, we generate their inverse via binary representation
+// of numbers, so we generate the numbers 100, 010 and 001, which are then turned into the triplets.
+for (var i = 1; i < 5; i <<= 1) {
+	var fir = +!(i & 1), sec = +!(i & 2), thr = +!(i & 4); // number to main triplet
+	var barGeometry = new THREE.BoxGeometry( 1/8 + !fir * 15/8, 1/8 + !sec * 15/8, 1/8 + !thr * 15/8 );
+	newBar(barGeometry, fir, sec, thr);
+	
+	// Combinations for positive and negative 1s
+	for (var m = -1; m < 2; m += 2) {
+		newBar(barGeometry, m * fir, m * sec, m * thr);
+
+		if (fir === 1)
+			newBar(barGeometry, fir, m * sec, m * thr);
+		if (sec === 1)
+			newBar(barGeometry, m * fir, sec, m * thr);
+		if (thr === 1)
+			newBar(barGeometry, m * fir, m * sec, thr);
+	}
+}
+
+
+
+var light = new THREE.PointLight( );
+light.position.set( 3, 4, 5 );
+scene.add( light );
+
+light = new THREE.PointLight( );
+light.position.set( -3, 4, -5 );
+scene.add( light );
+
+
+function drawFrame()
+{
+	scene.rotation.y += 0.005;
+	renderer.render( scene, camera );
+}
+
diff --git a/Year 2/Computer Graphics Fundamentals/02-Practice-10.10.2022/03.js b/Year 2/Computer Graphics Fundamentals/02-Practice-10.10.2022/03.js
new file mode 100644
index 0000000..cd16d31
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/02-Practice-10.10.2022/03.js
@@ -0,0 +1,54 @@
+// Задача: създайте равнина от кубове - те са
+// NxN, разположени са равномерно в квадрат и
+// не се допират помежду си
+
+var N = 10; // примерно да пробваме с 10x10 куба
+
+var renderer = new THREE.WebGLRenderer();
+renderer.setSize( window.innerWidth, window.innerHeight );
+renderer.setAnimationLoop( drawFrame );
+document.body.appendChild( renderer.domElement );
+
+var scene = new THREE.Scene();
+
+var aspect = window.innerWidth/window.innerHeight;
+var camera = new THREE.PerspectiveCamera( 30, aspect );
+camera.position.set( 6, 7, 20 );
+camera.lookAt( new THREE.Vector3() );
+
+
+// кубове - форма и размер
+var geometry = new THREE.BoxGeometry( 0.9, 0.9, 0.9 );
+var material = new THREE.MeshPhongMaterial();
+
+
+
+function newCube(x, z) {
+	var cube = new THREE.Mesh( geometry, material );
+	cube.position.set(x, 0, z);
+	scene.add( cube );
+}
+
+for (var x = (1 - N) / 2; x < N / 2; x++) {
+	for (var z = (1 - N) / 2; z < N / 2; z++) {
+		newCube(x, z);
+	}
+}
+
+
+
+var light = new THREE.PointLight( );
+light.position.set( 3, 2, 5 );
+scene.add( light );
+
+light = new THREE.PointLight( );
+light.position.set( -3, 2, -5 );
+scene.add( light );
+
+
+function drawFrame()
+{
+	scene.rotation.y += 0.005;
+	renderer.render( scene, camera );
+}
+
diff --git a/Year 2/Computer Graphics Fundamentals/02-Practice-10.10.2022/04.js b/Year 2/Computer Graphics Fundamentals/02-Practice-10.10.2022/04.js
new file mode 100644
index 0000000..0c7a3f8
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/02-Practice-10.10.2022/04.js
@@ -0,0 +1,56 @@
+// Задача: създайте N на брой малки кубчета,
+// пръснати случайно във вътрешността на
+// въображаем куб
+
+var N = 1000; // 1000 кубчета
+
+var renderer = new THREE.WebGLRenderer();
+renderer.setSize( window.innerWidth, window.innerHeight );
+renderer.setAnimationLoop( drawFrame );
+document.body.appendChild( renderer.domElement );
+
+var scene = new THREE.Scene();
+
+var aspect = window.innerWidth/window.innerHeight;
+var camera = new THREE.PerspectiveCamera( 30, aspect );
+camera.position.set( 6, 7, 20 );
+camera.lookAt( new THREE.Vector3() );
+
+
+// цикъл за създаване на кубчетата
+var geometry = new THREE.BoxGeometry( 0.4, 0.4, 0.4 );
+var material = new THREE.MeshPhongMaterial();
+
+// засега едно кубче, колкото да има нещо
+
+
+
+const cubeSize = 5;
+
+function rndCoord(absMax) {
+	return ((Math.random() < 0.5) ? -1 : 1) * Math.random() * absMax;
+}
+
+for (var i = 0; i < N; i++) {
+	var cube = new THREE.Mesh( geometry, material );
+	cube.position.set ( rndCoord(cubeSize), rndCoord(cubeSize), rndCoord(cubeSize) );
+	scene.add( cube );
+}
+
+
+
+
+var light = new THREE.PointLight( );
+light.position.set( 7, 5, 10 );
+scene.add( light );
+
+light = new THREE.PointLight( );
+light.position.set( -7, 5, -10 );
+scene.add( light );
+
+
+function drawFrame()
+{
+	scene.rotation.y += 0.005;
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/02-Practice-10.10.2022/05.js b/Year 2/Computer Graphics Fundamentals/02-Practice-10.10.2022/05.js
new file mode 100644
index 0000000..ea3474c
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/02-Practice-10.10.2022/05.js
@@ -0,0 +1,59 @@
+// Задача: създайте град в равнината - постройките
+// да са вертикални паралелепипеди със случайна
+// височина
+
+var N = 20; // 10x10 брой "карета" в града
+
+var renderer = new THREE.WebGLRenderer();
+renderer.setSize( window.innerWidth, window.innerHeight );
+renderer.setAnimationLoop( drawFrame );
+document.body.appendChild( renderer.domElement );
+
+var scene = new THREE.Scene();
+
+var aspect = window.innerWidth/window.innerHeight;
+var camera = new THREE.PerspectiveCamera( 30, aspect );
+camera.position.set( 6, 7, 20 );
+camera.lookAt( new THREE.Vector3() );
+
+
+
+function rndSize(min, max) {
+	return min + Math.random() * (max - min)
+}
+
+var buildingMaterial = new THREE.MeshPhongMaterial();
+
+function createBuilding(x, z) {
+	var width = rndSize(0.25, 0.9);
+	var height = rndSize(0.25, width * 3.1);
+	var depth = rndSize(0.25, 0.9);
+
+	var geometry = new THREE.BoxGeometry( width, height, depth );
+	var building = new THREE.Mesh(geometry, buildingMaterial);
+	building.position.set(x, height / 2, z);
+	scene.add(building);
+}
+
+for (var x = -N / 2; x < N / 2; x++) {
+	for (var z = -N / 2; z < N / 2; z++) {
+		createBuilding(x, z);
+	}
+}
+
+
+
+var light = new THREE.PointLight( );
+light.position.set( 3, 7, 9 );
+scene.add( light );
+
+light = new THREE.PointLight( );
+light.position.set( 3, 7, -9 );
+scene.add( light );
+
+
+function drawFrame()
+{
+	scene.rotation.y += 0.005;
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/02-Practice-10.10.2022/06.js b/Year 2/Computer Graphics Fundamentals/02-Practice-10.10.2022/06.js
new file mode 100644
index 0000000..2cf5d8f
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/02-Practice-10.10.2022/06.js
@@ -0,0 +1,50 @@
+// Задача: направете конструкция, която изглежда
+// като голям куб, от върховете на който са
+// изрязани кубчета във вътрешните върхове на
+// които пък са добавени още по-малки кубчета.
+// Броят геометрични обекти да е под 10.
+
+var renderer = new THREE.WebGLRenderer();
+renderer.setSize( window.innerWidth, window.innerHeight );
+renderer.setAnimationLoop( drawFrame );
+document.body.appendChild( renderer.domElement );
+
+var scene = new THREE.Scene();
+
+var aspect = window.innerWidth/window.innerHeight;
+var camera = new THREE.PerspectiveCamera( 30, aspect );
+camera.position.set( 12, 14, 28 );
+camera.lookAt( new THREE.Vector3() );
+
+
+
+var material = new THREE.MeshPhongMaterial( );
+
+function newBox(w, h, d) {
+	var geometry = new THREE.BoxGeometry( w, h, d );
+	var obj = new THREE.Mesh( geometry, material );
+	scene.add( obj );
+}
+
+newBox(9, 9, 9);
+newBox(10, 10, 8);
+newBox(8, 10, 10);
+newBox(10, 8, 10);
+
+
+
+var light = new THREE.PointLight( );
+light.position.set( 17, 14, 11 );
+scene.add( light );
+
+light = new THREE.PointLight( );
+light.position.set( -17, -14, -11 );
+scene.add( light );
+
+
+function drawFrame()
+{
+	scene.rotation.x += 0.005;
+	scene.rotation.y += 0.005;
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/02-Practice-10.10.2022/prac.html b/Year 2/Computer Graphics Fundamentals/02-Practice-10.10.2022/prac.html
new file mode 100644
index 0000000..1c87048
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/02-Practice-10.10.2022/prac.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Practicum</title>
+	</head>
+	<body>
+		<script>
+			const scripts = [
+				[ "S02 E01", "01.js" ],
+				[ "S02 E02", "02.js" ],
+				[ "S02 E03", "03.js" ],
+				[ "S02 E04", "04.js" ],
+				[ "S02 E05", "05.js" ],
+				[ "S02 E06", "06.js" ],
+			];
+		</script>
+		<script src="https://e55.syndamia.com/three.min.js"></script>
+		<script src="https://e55.syndamia.com/okg-prac-helper.js"></script>
+	</body>
+</html>