[OKG/P04] Added work from practicum

7 files changed, 365 insertions, 0 deletions

diff --git a/Year 2/Computer Graphics Fundamentals/04-Practice-24.10.2022/ex01.js b/Year 2/Computer Graphics Fundamentals/04-Practice-24.10.2022/ex01.js
new file mode 100644
index 0000000..74f0cae
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/04-Practice-24.10.2022/ex01.js
@@ -0,0 +1,63 @@
+// Задача: задайте цвета на фона и на четирите
+// куба по четири различни начина:
+// 		- чрез име на цвят
+// 		- чрез числа от 0 до 1
+// 		- чрез число в шестнадесетична бройна система
+// 		- чрез стринг от RGB байтове
+// 		- чрез стринг от RGB проценти
+
+
+var renderer = new THREE.WebGLRenderer();
+renderer.setSize( window.innerWidth, window.innerHeight );
+renderer.setAnimationLoop( drawFrame );
+document.body.appendChild( renderer.domElement );
+
+// цвят на фона - чрез име на цвят
+var scene = new THREE.Scene();
+scene.background = new THREE.Color("gold");
+
+var aspect = window.innerWidth/window.innerHeight;
+var camera = new THREE.PerspectiveCamera( 30, aspect );
+camera.position.set( 0, 0, 16 );
+camera.lookAt( new THREE.Vector3() );
+
+		
+var group = new THREE.Group();
+scene.add( group );
+
+// Цвят на куб 1 - чрез три числови компоненти от 0 до 1
+var geometry = new THREE.BoxGeometry( 3, 3, 3 );
+var material = new THREE.MeshPhongMaterial({ color: new THREE.Color(0.5, 0, 0.9) });
+var cube = new THREE.Mesh( geometry, material );
+cube.position.set( 2, 0, 2 );
+group.add( cube );
+
+// Цвят на куб 2 - чрез число в шестнадесетична бройна система
+material = new THREE.MeshPhongMaterial({ color: 0xA30801 });
+cube = new THREE.Mesh( geometry, material );
+cube.position.set( 2, 0, -2 );
+group.add( cube );
+
+// Цвят на куб 3 - чрез стринг от RGB байтове
+material = new THREE.MeshPhongMaterial({ color: "rgb(12, 255, 180)" });
+cube = new THREE.Mesh( geometry, material );
+cube.position.set( -2, 0, -2 );
+group.add( cube );
+
+// Цвят на куб 4 - чрез стринг от RGB проценти
+material = new THREE.MeshPhongMaterial({ color: "rgb(80%, 90%, 40%)" });
+cube = new THREE.Mesh( geometry, material );
+cube.position.set( -2, 0, 2 );
+group.add(cube);
+
+
+var light = new THREE.PointLight();
+light.position.set( 0, 5, 10 );
+scene.add( light );
+
+function drawFrame()
+{
+	group.rotation.x += 0.005;
+	group.rotation.y += 0.005;
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/04-Practice-24.10.2022/ex02.js b/Year 2/Computer Graphics Fundamentals/04-Practice-24.10.2022/ex02.js
new file mode 100644
index 0000000..9f43258
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/04-Practice-24.10.2022/ex02.js
@@ -0,0 +1,52 @@
+// Задача: оцветете сферите плавно, минавайки по
+// целия видим спектър
+
+var renderer = new THREE.WebGLRenderer();
+renderer.setSize( window.innerWidth, window.innerHeight );
+renderer.setAnimationLoop( drawFrame );
+document.body.appendChild( renderer.domElement );
+
+var scene = new THREE.Scene();
+scene.background = new THREE.Color( 'gainsboro' );
+
+var aspect = window.innerWidth/window.innerHeight;
+var camera = new THREE.PerspectiveCamera( 30, aspect );
+camera.position.set( 0, 0, 16 );
+camera.lookAt( new THREE.Vector3() );
+
+		
+var group = new THREE.Group();
+scene.add( group );
+	
+var geometry = new THREE.SphereGeometry( 0.4, 8, 16 );
+
+// Генериране на кръг от N сфери
+var N = 40;
+for (var i=0; i<N; i++)
+{
+	// всяка сфера е на ъгъл alpha
+	var alpha = 2*Math.PI*i/N;
+	
+	// разстоянието до центъра е ту 3.0, ту 3.7
+	var r = 3+0.7*(i%2);
+	
+	var material = new THREE.MeshPhongMaterial({ color: 'hsl(' + i / N * 100 + '%, 100%, 100%)' });
+	var sphere = new THREE.Mesh( geometry, material );
+	
+	// сферата е разположена на ъгъл alpha по
+	// окръжност с радиус r 
+	sphere.position.set( r*Math.cos(alpha), r*Math.sin(alpha), 0 );
+	
+	group.add( sphere );
+}
+
+
+var light = new THREE.PointLight();
+light.position.set( 0, 0, 20 );
+scene.add( light );
+
+function drawFrame()
+{
+	group.rotation.z += 0.002;
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/04-Practice-24.10.2022/ex03.js b/Year 2/Computer Graphics Fundamentals/04-Practice-24.10.2022/ex03.js
new file mode 100644
index 0000000..b32bf38
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/04-Practice-24.10.2022/ex03.js
@@ -0,0 +1,56 @@
+// Задача: оцветете на всяка от стените на куб
+// в отделен цвят, без да композирате куба от
+// няколко отделни обекта
+
+
+var renderer = new THREE.WebGLRenderer();
+renderer.setSize( window.innerWidth, window.innerHeight );
+renderer.setAnimationLoop( drawFrame );
+document.body.appendChild( renderer.domElement );
+
+var scene = new THREE.Scene();
+scene.background = new THREE.Color( 'gainsboro' );
+
+var aspect = window.innerWidth/window.innerHeight;
+var camera = new THREE.PerspectiveCamera( 30, aspect );
+camera.position.set( 0, 0, 16 );
+camera.lookAt( new THREE.Vector3() );
+
+
+// първият куб
+var geometry = new THREE.BoxGeometry( 3, 3, 3 );
+// var material = new THREE.MeshPhongMaterial();
+
+var colors = [ 0x0050C5, 0xE01200, 0x00A500, 0x00A500, 0x00A500, 0x00A500, 0x00A500, 0x00A500 ];
+var material = [];
+for (var i = 0; i < 8; i++)
+	material.push(new THREE.MeshPhongMaterial({ color: colors[i] }));
+
+var cube1 = new THREE.Mesh( geometry, material );
+cube1.position.set( -3, 0, 0 );
+scene.add( cube1 );
+
+// правим още един куб, да е със същото оцветяване
+var cube2 = new THREE.Mesh( geometry, material );
+cube2.position.set( 3, 0, 0 );
+scene.add( cube2 );
+
+
+var light = new THREE.PointLight();
+light.position.set( 0, 0, 20 );
+scene.add( light );
+
+// кубовете се въртят с различни ъгли, за да
+// не се въртят синхронно на екрана
+function drawFrame()
+{
+	cube1.rotation.x += 0.005;
+	cube1.rotation.y += 0.004;
+	cube1.rotation.z -= 0.003;
+
+	cube2.rotation.x -= 0.006;
+	cube2.rotation.y -= 0.004;
+	cube2.rotation.z += 0.005;
+	
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/04-Practice-24.10.2022/ex04.js b/Year 2/Computer Graphics Fundamentals/04-Practice-24.10.2022/ex04.js
new file mode 100644
index 0000000..c016e76
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/04-Practice-24.10.2022/ex04.js
@@ -0,0 +1,72 @@
+// Задача: направете движещите се сфери да са
+// малки лампи (точкови източници на светлина),
+// като светят със съответния цвят на сферата
+
+
+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, 30 );
+camera.lookAt( new THREE.Vector3() );
+
+// широка платформа-зема, която ще бъде осветявана
+var geometry = new THREE.BoxGeometry( 20, 1, 20 );
+var material = new THREE.MeshPhongMaterial();
+scene.add( new THREE.Mesh( geometry, material ) );
+
+// списък с цветове
+var colors = ['red','blue','yellow'];
+
+// създаване на сфери 
+var balls=[];
+var geometry = new THREE.SphereGeometry( 1, 16, 16 );
+for (var i=0; i<3; i++)
+{
+	// създаване на 3 сфери със съответен цвят
+	var material = new THREE.MeshPhongMaterial( {color: colors[i]} );
+	balls[i] = new THREE.Mesh( geometry, material );
+	scene.add( balls[i] );
+}
+
+// обща светлина отгоре - да бъде премахната,
+// но да се сложат три цветни светлини от
+// трите сфери
+// var light = new THREE.PointLight();
+// light.position.set( 0, 10, 0 );
+// scene.add( light );
+
+for (var i = 0; i < balls.length; i++)
+	balls[i].add(new THREE.PointLight(colors[i]));
+
+var t=0;
+function drawFrame()
+{
+	// въртене на сцената, за да не е скучно
+	scene.rotation.y += 0.001;
+
+	// псевдотаймер за движение на сферите
+	t += 0.005;
+
+	// движение на едната сфера
+	balls[0].position.x = 10*Math.cos(2.5*t);
+	balls[0].position.y = 2.5+1*Math.sin(2.4*t);
+	balls[0].position.z = 10*Math.cos(1.9*t);;
+
+	// движение на другата
+	balls[1].position.x = 10*Math.cos(2.1*t);
+	balls[1].position.y = 2.5+1*Math.cos(2.5*t);
+	balls[1].position.z = 10*Math.sin(2.2*t);;
+
+	// движение и на третата
+	balls[2].position.x = 10*Math.sin(1.8*t);
+	balls[2].position.y = 2.5+1*Math.sin(2.6*t);
+	balls[2].position.z = 10*Math.cos(2.6*t);;
+
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/04-Practice-24.10.2022/ex05.js b/Year 2/Computer Graphics Fundamentals/04-Practice-24.10.2022/ex05.js
new file mode 100644
index 0000000..c81309c
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/04-Practice-24.10.2022/ex05.js
@@ -0,0 +1,64 @@
+// Задача: направете сянка на тора
+
+
+var renderer = new THREE.WebGLRenderer();
+renderer.setSize( window.innerWidth, window.innerHeight );
+renderer.setAnimationLoop( drawFrame );
+document.body.appendChild( renderer.domElement );
+renderer.shadowMap.enabled = true;
+
+var scene = new THREE.Scene();
+
+var aspect = window.innerWidth/window.innerHeight;
+var camera = new THREE.PerspectiveCamera( 30, aspect );
+camera.position.set( 12, 14, 30 );
+camera.lookAt( new THREE.Vector3() );
+
+// широка платформа, която ще бъде осветявана
+var geometry = new THREE.BoxGeometry( 100, 1, 100)
+var material = new THREE.MeshPhongMaterial();
+platform = new THREE.Mesh( geometry, material );
+platform.position.set( 0, -2, 0 );
+platform.receiveShadow = true;
+scene.add( platform );
+
+// лъскав тор, който ще хвърля сянка
+var geometry = new THREE.TorusGeometry( 2, 0.7, 16, 100 );
+var material = new THREE.MeshPhongMaterial( {color:'red', shininess:100} );
+var torus = new THREE.Mesh( geometry, material );
+torus.position.set( 0, 2, 0 );
+torus.castShadow = true;
+scene.add( torus );
+
+// създаване на сферa
+var geometry = new THREE.SphereGeometry( 0.2 );
+var material = new THREE.MeshBasicMaterial();
+var ball = new THREE.Mesh( geometry, material );
+scene.add( ball );
+
+// създаване на светлина - сега не е точкова,
+// а е насочена е към конкретно място (нещо като
+// светлинен конус). По подразбиране е насочена
+// към (0,0,0) - устройва ни, затова не го променяме.
+light = new THREE.SpotLight();
+light.penumbra = 0.9; // мекост на контура на светлинния конус
+light.castShadow = true;
+ball.add( light );
+
+
+var t=0;
+function drawFrame()
+{
+	// въртене на тора
+	torus.rotation.x += 0.045;
+	torus.rotation.y += 0.015;
+	torus.rotation.z += 0.038;
+	
+	// движение на сферата
+	t += 0.01;
+	ball.position.x = 7*Math.cos(1.2*t);
+	ball.position.y = 7;
+	ball.position.z = 7*Math.sin(0.9*t);
+	
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/04-Practice-24.10.2022/ex06.js b/Year 2/Computer Graphics Fundamentals/04-Practice-24.10.2022/ex06.js
new file mode 100644
index 0000000..f82d72f
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/04-Practice-24.10.2022/ex06.js
@@ -0,0 +1,38 @@
+// Задача: направете полет над кристална планета
+// с големи, ръбести, лъскави кристали
+
+
+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( 0, 0, 100 );
+camera.lookAt( new THREE.Vector3() );
+
+// Планета - за момента е сфера, решете как да
+// я кристализирате цялата (подсказка - не чрез сфера)
+var geometry = new THREE.SphereGeometry( 20, 16, 16 );
+var material = new THREE.MeshPhongMaterial({
+	flatShading: true, // плоско осветяване - всяка стена е едноцветна
+	shininess: 50, // степен на лъскавост
+	specular: 'white' // цвят на лъскавината
+});
+var solid = new THREE.Mesh( geometry, material );
+scene.add( solid );
+
+
+var light = new THREE.PointLight();
+light.position.set( 0, 0, 50 );
+scene.add( light );
+
+
+function drawFrame()
+{
+	solid.rotation.x += 0.01;
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/04-Practice-24.10.2022/practicum-template.html b/Year 2/Computer Graphics Fundamentals/04-Practice-24.10.2022/practicum-template.html
new file mode 100644
index 0000000..30d6408
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/04-Practice-24.10.2022/practicum-template.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Practicum</title>
+	</head>
+	<body>
+		<script>
+			const scripts = [
+				[ "Exercise S04 E01", "ex01.js" ],
+				[ "Exercise S04 E02", "ex02.js" ],
+				[ "Exercise S04 E03", "ex03.js" ],
+				[ "Exercise S04 E04", "ex04.js" ],
+				[ "Exercise S04 E05", "ex05.js" ],
+				[ "Exercise S04 E06", "ex06.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>