[OKG/P06] Solved exercises

6 files changed, 336 insertions, 0 deletions

diff --git a/Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/01.js b/Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/01.js
new file mode 100644
index 0000000..64d2ae2
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/01.js
@@ -0,0 +1,79 @@
+// Задача: Създайте четиъгълна пирамида с един

+// вертикален ръб

+

+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( 'lavender' );

+

+var aspect = window.innerWidth/window.innerHeight;

+var camera = new THREE.PerspectiveCamera( 30, aspect );

+camera.position.set( 0, 30, 60 );

+camera.lookAt( new THREE.Vector3() );

+

+// създаваме най-обща форма (геометрия)

+var geometry = new THREE.BufferGeometry();

+

+// в масива vertices[] слагаме координати на върховете

+// на триъгълници

+var vertices = new Float32Array([

+	 5, 0, 5, // bottom right

+	-5, 0, 5, // bottom left

+	-5, 0, -5, // top left

+

+	-5, 0, -5, // top left

+	 5, 0, -5, // top right

+	 5, 0, 5, // bottom right

+

+

+	-5, 0, -5, // top left

+	 5, 0, -5, // top right

+	 0, 10,  0, // peak

+

+	-5, 0, -5, // top left

+	-5, 0, 5, // bottom left

+	 0, 10,  0, // peak

+

+	 5, 0, -5, // top right

+	 5, 0, 5, // bottom right

+	 0, 10,  0, // peak

+

+	-5, 0, 5, // bottom left

+	 5, 0, 5, // bottom right

+	 0, 10,  0, // peak

+]);

+

+// записваме данните за върховете в геометрията

+// числото 3 означава, че три последователни

+// стойности определят един връх

+geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );

+

+// за правилно оцветяване молим Three.js

+// да изчисли нормалните вектори

+geometry.computeVertexNormals();

+

+// общия обект

+var object = new THREE.Group();

+scene.add( object );

+

+// ползваме една и съща форма за три различни

+// обекта - един със стени, един с ръбове и

+// един само с върхове

+object.add( new THREE.Mesh( geometry, new THREE.MeshPhongMaterial({side:THREE.DoubleSide}) ));

+object.add( new THREE.Mesh( geometry, new THREE.MeshBasicMaterial({color:'red', wireframe:true}) ));

+object.add( new THREE.Points( geometry, new THREE.PointsMaterial({color:'black', size:1}) ));

+

+

+scene.add( new THREE.HemisphereLight( 'yellow', 'lightsalmon' ) );

+

+function drawFrame()

+{

+	object.rotation.x += 0.005;

+	object.rotation.y += 0.004;

+	object.rotation.z += 0.003;

+

+	renderer.render( scene, camera );

+}

diff --git a/Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/02.js b/Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/02.js
new file mode 100644
index 0000000..1b704d6
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/02.js
@@ -0,0 +1,49 @@
+// Задача: изградете къща чрез плъзгане на профил

+

+

+var renderer = new THREE.WebGLRenderer({antialias:true});

+renderer.setSize( window.innerWidth, window.innerHeight );

+renderer.setAnimationLoop( drawFrame );

+document.body.appendChild( renderer.domElement );

+

+var scene = new THREE.Scene();

+scene.background = new THREE.Color( 'lightsteelblue' );

+

+var aspect = window.innerWidth/window.innerHeight;

+var camera = new THREE.PerspectiveCamera( 30, aspect );

+camera.position.set( 0, 4, 20 );

+camera.lookAt( new THREE.Vector3() );

+

+

+// профил (равнобедренотриъгълен)

+var shape = new THREE.Shape();

+shape.moveTo(  0,  2 );

+shape.lineTo(  2, -0.5 );

+shape.lineTo( 1.5, -0.5);

+shape.lineTo( 1.5, -3);

+shape.lineTo( -1.5, -3);

+shape.lineTo( -1.5, -0.5);

+shape.lineTo( -2, -0.5 );

+shape.lineTo( 0, 2);

+

+// създаване на формата на къщата чрез плъзгане

+var extrudeSettings = { depth: 3, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 0.1, bevelThickness: 0.1 };

+var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );

+

+// построяване на самия обект

+var object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial({shininess: 140, specular: 'white'}) );

+scene.add( object );

+

+

+var light = new THREE.PointLight( 'white', 0.4 );

+light.position.set( 0, 0, 30 );

+scene.add( light );

+

+function drawFrame()

+{

+	// въртим обекта

+	object.rotation.y += 0.002;

+	object.rotation.z = 0.3*Math.sin(10*object.rotation.y);

+	

+	renderer.render( scene, camera );

+}

diff --git a/Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/03.js b/Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/03.js
new file mode 100644
index 0000000..c5bf09e
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/03.js
@@ -0,0 +1,76 @@
+// Задача: изградете селище с различни по размер

+// къщи, ориентирани в една от две перпендикулярни

+// посоки, като добавете и мъгла, така че да са

+// замъглени най-отдалечените къщи

+

+

+var renderer = new THREE.WebGLRenderer( {antialias: true} );

+renderer.setSize( window.innerWidth, window.innerHeight );

+renderer.setAnimationLoop( drawFrame );

+document.body.appendChild( renderer.domElement );

+

+var scene = new THREE.Scene();

+scene.background = new THREE.Color( 'tan' );

+

+var aspect = window.innerWidth/window.innerHeight;

+var camera = new THREE.PerspectiveCamera( 30, aspect );

+camera.position.set( 0, 15, 100 );

+camera.lookAt( new THREE.Vector3() );

+

+const N = 200;

+const MAXX = 120;

+const MAXZ = 120;

+const MINSCALE = 0.5;

+const MAXSCALE = 2.0;

+

+function randBetween(a, b) {

+	return Math.random() * (b - a) + a;

+} 

+

+scene.fog = new THREE.FogExp2('tan', 0.008);

+

+// профил на къща

+var shape = new THREE.Shape();

+shape.moveTo(   2, 0 );

+shape.lineTo(   2, 4 );

+shape.lineTo( 2.5, 4 );

+shape.lineTo(   0, 6 );

+shape.lineTo(-2.5, 4 );

+shape.lineTo(  -2, 4 );

+shape.lineTo(  -2, 0 );

+shape.lineTo(   2, 0 );

+

+// създаване на къщата като изтòчен обект

+var extrudeSettings = { depth: 6, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 0.1, bevelThickness: 0.1 };

+var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );

+

+// къща

+var house = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );

+

+for (var i = 0; i < N; i++) {

+	house.rotation.y = (Math.random() > 0.5) ? 0 : Math.PI / 2;

+	house.position.x = randBetween(-MAXX, MAXX);

+	house.position.z = randBetween(-MAXZ, MAXZ);

+	house.scale.set(randBetween(MINSCALE, MAXSCALE), randBetween(MINSCALE, MAXSCALE), randBetween(MINSCALE, MAXSCALE))

+	scene.add( house.clone() );

+}

+

+// светлини

+light1 = new THREE.PointLight( 'orange', 0.5 );

+light1.position.set( 20, 40, 0 );

+scene.add( light1 );

+

+light3 = new THREE.PointLight( 'red', 0.5 );

+light3.position.set( -20, 40, 0 );

+scene.add( light3 );

+

+light2 = new THREE.PointLight();

+light2.position.set( 0, -50, 100 );

+scene.add( light2 );

+

+function drawFrame()

+{

+	scene.rotation.y += 0.003;

+	

+	renderer.render( scene, camera );

+}

diff --git a/Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/04.js b/Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/04.js
new file mode 100644
index 0000000..6f51b99
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/04.js
@@ -0,0 +1,61 @@
+// Задача: направете геомаркер чрез плъзгане на

+// форма. Геомаркерът да има кръгъл отвор.

+

+

+var renderer = new THREE.WebGLRenderer({antialias:true});

+renderer.setSize( window.innerWidth, window.innerHeight );

+renderer.setAnimationLoop( drawFrame );

+document.body.appendChild( renderer.domElement );

+

+var scene = new THREE.Scene();

+scene.background = new THREE.Color( 'white' );

+		

+var aspect = window.innerWidth/window.innerHeight;

+var camera = new THREE.PerspectiveCamera( 30, aspect );

+camera.position.set( 0, 3, 30 );

+camera.lookAt( new THREE.Vector3() );

+

+

+// пример с квадратична крива, а как се прави

+// отвор ще трябва сами да разберете (има пример

+// на сайта на Three.js точно за това)

+var shape = new THREE.Shape();

+shape.moveTo(  0, -3 );

+shape.quadraticCurveTo( -3, 3, 0, 3 );

+shape.quadraticCurveTo( 3, 3, 0, -3 );

+

+var hole = new THREE.Path();

+hole.ellipse(0, 1.5, 1, 1);

+shape.holes = [hole];

+

+// създаване на 3D формата на геомаркера

+var extrudeSettings = { depth: 1, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 0.1, bevelThickness: 0.1, curveSegments: 60 };

+var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );

+

+var object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( {specular: 'white'} ) );

+scene.add( object );

+

+

+// светлини

+var light = new THREE.PointLight( 'dodgerblue', 0.75 ); // интензитет 0.75

+light.position.set( 200, 50, 0 );

+scene.add( light );

+

+light = new THREE.PointLight( 'dodgerblue', 0.75 ); // интензитет 0.75

+light.position.set( -200, 50, 0 );

+scene.add( light );

+

+light = new THREE.PointLight( 'hotpink', 0.75 ); // интензитет 0.75

+light.position.set( 0, 50, 200 );

+scene.add( light );

+

+light = new THREE.PointLight( 'fuchsia', 0.75 ); // интензитет 0.75

+light.position.set( 0, 50, -200 );

+scene.add( light );

+

+function drawFrame()

+{

+	scene.rotation.y += 0.005;

+	

+	renderer.render( scene, camera );

+}

diff --git a/Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/05.js b/Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/05.js
new file mode 100644
index 0000000..b99c736
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/05.js
@@ -0,0 +1,50 @@
+// Задача: направете ... биберон от синусоида.

+// Заготовката по-долу, ако я пуснете, трябва

+// само да покаже зелен екран, нищо повече

+

+

+var renderer = new THREE.WebGLRenderer({antialias:true});

+renderer.setSize( window.innerWidth, window.innerHeight );

+renderer.setAnimationLoop( drawFrame );

+document.body.appendChild( renderer.domElement );

+

+var scene = new THREE.Scene();

+scene.background = new THREE.Color( 'seagreen' );

+

+var aspect = window.innerWidth/window.innerHeight;

+var camera = new THREE.PerspectiveCamera( 30, aspect );

+camera.position.set( 0, 10, 40 );

+camera.lookAt( new THREE.Vector3() );

+

+

+// профил на биберона

+var profile = [];

+

+const points = 30;

+const height = 10;

+for (var y = 0; y < height; y += height / points) {

+	profile.push(new THREE.Vector2( Math.sin(2 * Math.PI * y / height * 2 + Math.PI) + 4.3, y - height / 2 ).rotateAround(new THREE.Vector2(), Math.PI / 4));

+}

+

+// създаване на 3D формата на биберона

+var geometry = new THREE.LatheGeometry(profile, 32);

+var pacifier = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( {specular: 'linen'} ) );

+scene.add(pacifier);

+

+// светлини

+var light = new THREE.PointLight( 'white' );

+light.position.set( 100, 50, 0 );

+scene.add( light );

+

+light = new THREE.PointLight( 'white' );

+light.position.set( -100, 50, 0 );

+scene.add( light );

+

+function drawFrame()

+{

+	pacifier.rotation.x += 0.003;

+	pacifier.rotation.y += 0.003;

+	pacifier.rotation.z += 0.003;

+	

+	renderer.render( scene, camera );

+}

diff --git a/Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/practicum-template.html b/Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/practicum-template.html
new file mode 100644
index 0000000..c7882e9
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/06-Practice-07.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>