[OKG/P03] Solved practicum exercises

7 files changed, 311 insertions, 0 deletions

diff --git a/Year 2/Computer Graphics Fundamentals/03-Practice-17.10.2022/01.js b/Year 2/Computer Graphics Fundamentals/03-Practice-17.10.2022/01.js
new file mode 100644
index 0000000..b23e975
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/03-Practice-17.10.2022/01.js
@@ -0,0 +1,28 @@
+// Задача: опитайте се да замените куба със сфера,
+// която да е с гладка повърхност
+
+var renderer = new THREE.WebGLRenderer();
+renderer.setSize( window.innerWidth, window.innerHeight );
+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.SphereGeometry( 2, 32, 32 );
+var material = new THREE.MeshPhongMaterial();
+var sphere = new THREE.Mesh( geometry, material );
+scene.add( sphere );
+
+
+
+var light = new THREE.PointLight( );
+light.position.set( 3, 3, 8 );
+scene.add( light );
+
+renderer.render( scene, camera );
diff --git a/Year 2/Computer Graphics Fundamentals/03-Practice-17.10.2022/02.js b/Year 2/Computer Graphics Fundamentals/03-Practice-17.10.2022/02.js
new file mode 100644
index 0000000..8e536f8
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/03-Practice-17.10.2022/02.js
@@ -0,0 +1,50 @@
+// Задача: нарисувайте плажна топка, всяка
+// половина да е от 4 цветни парчета
+
+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 pi2 = Math.PI/2;	// пи/2 - ще ви трябва най-вероятно
+
+function createSpherePart(phiStart, phiLength, thetaStart, thetaLength, color) {
+	// Бяла сфера без осветяване - цветовете са еднако ярки
+	// Тази сфера трябва да се разцепи на 8 цветни парчета
+	var geometry = new THREE.SphereGeometry( 1.5, 16, 16, phiStart, phiLength, thetaStart, thetaLength );
+	var material = new THREE.MeshBasicMaterial({ color: color });
+	scene.add( new THREE.Mesh( geometry, material ) );
+}
+
+createSpherePart(0      , pi2 * 4, 0          , pi2 / 4    , 0xffffff);
+createSpherePart(0      , pi2    , pi2 / 4    , 3 * pi2 / 4, 0xff0000);
+createSpherePart(pi2    , pi2    , pi2 / 4    , 3 * pi2 / 4, 0x00ff00);
+createSpherePart(pi2 * 2, pi2    , pi2 / 4    , 3 * pi2 / 4, 0x0000ff);
+createSpherePart(pi2 * 3, pi2    , pi2 / 4    , 3 * pi2 / 4, 0xffff00);
+createSpherePart(0      , pi2 * 4, 7 * pi2 / 4, pi2 / 4    , 0xffffff);
+createSpherePart(0      , pi2    , pi2        , 3 * pi2 / 4, 0x0000ff);
+createSpherePart(pi2    , pi2    , pi2        , 3 * pi2 / 4, 0xffff00);
+createSpherePart(pi2 * 2, pi2    , pi2        , 3 * pi2 / 4, 0xff0000);
+createSpherePart(pi2 * 3, pi2    , pi2        , 3 * pi2 / 4, 0x00ff00);
+
+
+
+
+// въртене на сцената
+function drawFrame()
+{
+	scene.rotation.x += 0.005;
+	scene.rotation.y += 0.005;
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/03-Practice-17.10.2022/03.js b/Year 2/Computer Graphics Fundamentals/03-Practice-17.10.2022/03.js
new file mode 100644
index 0000000..c7a5228
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/03-Practice-17.10.2022/03.js
@@ -0,0 +1,67 @@
+// Задача: нарисувайте цветно хапче-капсула,
+// с издължено тяло, със заоблени краища, като
+// се върти хапчето, а не цялата сцена, за да
+// не се движи и камерата
+
+
+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, 20 );
+camera.lookAt( new THREE.Vector3() );
+
+
+
+
+
+// Хапчето като един обект
+var pill = new THREE.Group();
+
+var redMaterial = new THREE.MeshPhongMaterial( {color:'red'} );
+var yellowMaterial = new THREE.MeshPhongMaterial( {color:'yellow'} );
+
+var topCapGeometry = new THREE.SphereGeometry(1, 16, 16, 0, Math.PI * 2, 0, Math.PI / 2);
+var topCap = new THREE.Mesh(topCapGeometry, redMaterial);
+topCap.position.set(0, 2.5, 0);
+pill.add(topCap);
+
+var topCylinderGeometry = new THREE.CylinderGeometry( 1, 1, 2.5, 16 );
+var topCylinder = new THREE.Mesh( topCylinderGeometry, redMaterial );
+topCylinder.position.set(0, 1.25, 0);
+pill.add(topCylinder);
+
+var botCylinderGeometry = new THREE.CylinderGeometry( 1, 1, 2.5, 16 );
+var botCylinder = new THREE.Mesh( botCylinderGeometry, yellowMaterial );
+botCylinder.position.set(0, -1.25, 0);
+pill.add(botCylinder);
+
+var botCapGeometry = new THREE.SphereGeometry(1, 16, 16, 0, Math.PI * 2, Math.PI / 2, Math.PI / 2);
+var botCap = new THREE.Mesh(botCapGeometry, yellowMaterial);
+botCap.position.set(0, -2.5, 0);
+pill.add(botCap);
+
+scene.add( pill );
+
+
+
+
+
+// Светлина
+var light = new THREE.PointLight();
+light.position.set( 0, 0, 20 );
+scene.add(light);
+
+// Въртене на сцената - в решението трябва да се
+// върти хапчето, а не сцената
+function drawFrame()
+{
+	pill.rotation.x += 0.005;
+	pill.rotation.z += 0.005;
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/03-Practice-17.10.2022/04.js b/Year 2/Computer Graphics Fundamentals/03-Practice-17.10.2022/04.js
new file mode 100644
index 0000000..9c83216
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/03-Practice-17.10.2022/04.js
@@ -0,0 +1,48 @@
+// Задача: измислете как да представите обекта
+// от условието на задачата, чрез използване на
+// готови обекти от Three.js.
+
+
+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, 30 );
+camera.lookAt( new THREE.Vector3() );
+
+var object = new THREE.Group();
+scene.add( object );
+
+
+
+
+var material = new THREE.MeshPhongMaterial();
+
+var sphere = new THREE.SphereGeometry( 3, 32, 32 );
+object.add( new THREE.Mesh( sphere, material ) );
+
+var ring1 = new THREE.TorusGeometry(4, 1, 16, 32);
+object.add(new THREE.Mesh(ring1, material));
+
+var ring2 = new THREE.TorusGeometry(5.5, 0.5, 16, 32);
+object.add(new THREE.Mesh(ring2, material));
+
+
+
+
+// Светлини
+var light = new THREE.PointLight();
+light.position.set( 0, 0, 20 );
+scene.add( light );
+
+function drawFrame()
+{
+	object.rotation.x += 0.005;
+	object.rotation.y += 0.005;
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/03-Practice-17.10.2022/05.js b/Year 2/Computer Graphics Fundamentals/03-Practice-17.10.2022/05.js
new file mode 100644
index 0000000..c5a4bb0
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/03-Practice-17.10.2022/05.js
@@ -0,0 +1,49 @@
+// Задача: чрез използването на ParametricGeometry
+// създайте вълнообразна повърхност.
+
+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, 3 );
+camera.lookAt( new THREE.Vector3() );
+
+// Тази функция е дефинирана в диапазона u=[0,1] и v=[0,1]
+// като изчислява координатите (x,y,z) на повърхност в
+// точка, определена от (u,v). Т.е. функцията реализира
+// функциите x(u,v), y(u,v) и z(u,v).
+function myFunc( u, v, point )
+{
+	// В този пример се генерира равна повърхност z=0 за
+	// x=[-0.5,0.5] и y=[-0.5,0.5] - това е квадрат от (-0.5,-0.5,0) до (0.5,0.5,0)
+	// Вместо равната повърхност трябва да сложите вълнообразна
+	point.set( u-0.5, v-0.5, Math.sin(Math.sqrt((u - 0.5)*(u - 0.5) + (v - 0.5)*(v - 0.5)) * 32) / 32);
+}
+
+// Създаваме параметрична форма, която е квадрат, разделен
+// на 100х100 квадратчета. Колкото са повече на брой тези
+// квадратчета, толкова по-гладка ще е формата, но и по-тежка
+// за работа.
+var waves = new THREE.ParametricGeometry( myFunc, 100, 100 );
+// Three.js оптимизира повърхнините, като не рисува обратната
+// им страна. Но на нашата повърхности искаме да я гледаме от
+// двете страни, затова казваме, че искаме да е DoubleSide
+var material = new THREE.MeshPhongMaterial( {side:THREE.DoubleSide} );
+var surface = new THREE.Mesh( waves, material );
+scene.add( surface );
+
+// Светлини
+var light = new THREE.PointLight();
+light.position.set( 0, 0, 20 );
+scene.add( light );
+
+function drawFrame()
+{
+	surface.rotation.y += 0.005;
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/03-Practice-17.10.2022/06.js b/Year 2/Computer Graphics Fundamentals/03-Practice-17.10.2022/06.js
new file mode 100644
index 0000000..394fedb
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/03-Practice-17.10.2022/06.js
@@ -0,0 +1,49 @@
+// Задача: направете реотан. По-долу има код,
+// който демонстрира как се дефинира собствена
+// крива, която може да се използва за направа
+// на намотките на реотана.
+
+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, 30 );
+camera.lookAt( new THREE.Vector3() );
+
+
+// Създаваме клас MyCurve, който ще дефинира кривата
+// на реотана. Функцията getPoint изчислява точка от кривата.
+class MyCurve extends THREE.Curve
+{
+	getPoint( t )
+	{ // метод, който изчислява точка от кривата в позиция t, като t=[0,1]
+
+		return new THREE.Vector3( Math.sin(t), 0, 0 );
+	}
+}
+// Естествено, трябва да смените това отгоре, 
+// в момента то генерира обикновена кръгова дъга
+
+// Създаваме тръбовидна форма, използвайки инстанция 
+// на нашата крива MyCurve.
+var geometry = new THREE.TubeGeometry( new MyCurve(), 60, 2, 16 );
+var material = new THREE.MeshPhongMaterial();
+var surface = new THREE.Mesh( geometry, material );
+scene.add( surface );
+
+
+var light = new THREE.PointLight();
+light.position.set( 0, 0, 20 );
+scene.add( light );
+
+function drawFrame()
+{
+	surface.rotation.x += 0.005;
+	surface.rotation.y += 0.005;
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/03-Practice-17.10.2022/practicum-template.html b/Year 2/Computer Graphics Fundamentals/03-Practice-17.10.2022/practicum-template.html
new file mode 100644
index 0000000..e096c32
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/03-Practice-17.10.2022/practicum-template.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Practicum</title>
+	</head>
+	<body>
+		<script>
+			const scripts = [
+				[ "Problem S03 E01", "01.js" ],
+				[ "Problem S03 E02", "02.js" ],
+				[ "Problem S03 E03", "03.js" ],
+				[ "Problem S03 E04", "04.js" ],
+				[ "Problem S03 E05", "05.js" ],
+				[ "Problem S03 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>