[OKG/P05] Added work from practicum

5 files changed, 236 insertions, 0 deletions

diff --git a/Year 2/Computer Graphics Fundamentals/05-Practice-31.10.2022/01.js b/Year 2/Computer Graphics Fundamentals/05-Practice-31.10.2022/01.js
new file mode 100644
index 0000000..74eb16b
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/05-Practice-31.10.2022/01.js
@@ -0,0 +1,47 @@
+// Задача: конструирайте цилиндрична тръба като
+// стената ѝ има дебелина
+
+
+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( 'lavenderblush' );
+
+var aspect = window.innerWidth/window.innerHeight;
+camera = new THREE.PerspectiveCamera( 30, aspect );
+camera.position.set( 0, 0, 16 );
+camera.lookAt( new THREE.Vector3() );
+
+
+var radius = 2;
+var width = 0.5;
+var length = 6;
+
+var a = new THREE.Mesh( new THREE.CylinderGeometry( radius, radius, length, 32 ) );
+var b = new THREE.Mesh( new THREE.CylinderGeometry( radius - width, radius - width, length, 32 ) );
+
+var csg = new CSG();
+csg.subtract( [a, b] );
+
+var c = csg.toMesh();
+c.material = new THREE.MeshLambertMaterial( {color:'crimson'} );
+scene.add(c);
+
+
+var light = new THREE.PointLight();
+light.position.set( 0, 5, 10 );
+scene.add( light );
+
+
+function drawFrame()
+{
+	// въртим тръбата
+	c.rotation.x += 0.005;
+	c.rotation.y += 0.003;
+	c.rotation.z += 0.010;
+	
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/05-Practice-31.10.2022/02.js b/Year 2/Computer Graphics Fundamentals/05-Practice-31.10.2022/02.js
new file mode 100644
index 0000000..2c3632c
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/05-Practice-31.10.2022/02.js
@@ -0,0 +1,57 @@
+// Задача: конструирайте златен осмоъгълен
+// пепелник-сувенир за четирима. 
+
+
+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( 'midnightblue' );
+
+var aspect = window.innerWidth/window.innerHeight;
+camera = new THREE.PerspectiveCamera( 30, aspect );
+camera.position.set( 0, 0, 8 );
+camera.lookAt( new THREE.Vector3() );
+
+		
+// Пепелник (за момента е цилиндър,
+// но вие ще го оформите на пепелник)
+var innerRad = 1.3;
+
+var outsideShape = new THREE.Mesh(new THREE.CylinderGeometry( 1.6, 2, 0.8, 8 ));
+var innerShape = new THREE.Mesh(new THREE.CylinderGeometry( innerRad, innerRad, 1, 8 ));
+innerShape.position.y = 0.2;
+
+var holes = new THREE.Mesh(new THREE.CylinderGeometry(0.3, 0.3, 4, 32));
+holes.rotation.x = Math.PI / 2;
+holes.rotation.z = Math.PI / 8;
+holes.position.y = 0.5;
+
+var holes2 = new THREE.Mesh(new THREE.CylinderGeometry(0.3, 0.3, 4, 32));
+holes2.rotation.x = Math.PI / 2;
+holes2.rotation.z = 5 * Math.PI / 8;
+holes2.position.y = 0.5;
+
+var csg = new CSG();
+csg.subtract([outsideShape, innerShape, holes, holes2]);
+
+var ashTray = csg.toMesh();
+ashTray.material = new THREE.MeshPhongMaterial( {color: 'gold',specular: 'white'} );
+scene.add( ashTray );
+
+
+var light = new THREE.PointLight();
+light.position.set( 0, 5, 10 );
+scene.add( light );
+
+
+function drawFrame()
+{
+	// въртим пепелника
+	ashTray.rotation.x = 0.3+0.2*Math.sin(ashTray.rotation.y);
+	ashTray.rotation.y += 0.010;
+	
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/05-Practice-31.10.2022/03.js b/Year 2/Computer Graphics Fundamentals/05-Practice-31.10.2022/03.js
new file mode 100644
index 0000000..c24aec4
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/05-Practice-31.10.2022/03.js
@@ -0,0 +1,63 @@
+// Задача: конструирайте порцеланова чаша със
+// загладени ръбове. 
+
+
+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( 'pink' );
+
+var aspect = window.innerWidth/window.innerHeight;
+camera = new THREE.PerspectiveCamera( 30, aspect );
+camera.position.set( 0, 0, 10 );
+camera.lookAt( new THREE.Vector3() );
+
+	
+// начален стадий на чаша
+var material = new THREE.MeshPhongMaterial( {color: 'purple',shininess: 100, specular: 'white'} );
+
+var outsideShape = new THREE.Mesh( new THREE.CylinderGeometry( 1.2, 1.2, 2.5, 40 ), material );
+
+var innerHole = new THREE.Mesh(new THREE.CylinderGeometry(1, 1, 2.5, 40));
+innerHole.position.y = 0.2;
+
+var csg = new CSG();
+csg.subtract([outsideShape, innerHole]);
+var mug = csg.toMesh();
+mug.material = material;
+
+var topLip = new THREE.Mesh(new THREE.TorusGeometry(1.1, 0.1, 16, 64), material);
+topLip.rotation.x = Math.PI / 2;
+topLip.position.y = 2.5 / 2;
+mug.add(topLip);
+
+var bottomLip = new THREE.Mesh(new THREE.TorusGeometry(1.1, 0.1, 16, 64), material);
+bottomLip.rotation.x = Math.PI / 2;
+bottomLip.position.y = -2.5 / 2 + 0.1 / 2;
+mug.add(bottomLip);
+
+var handle = new THREE.Mesh(new THREE.TorusGeometry(1, 0.2, 16, 64, Math.PI), material);
+handle.rotation.z = Math.PI / 2;
+handle.position.x = -1.1;
+mug.add(handle);
+
+scene.add( mug );
+		
+
+var light = new THREE.PointLight();
+light.position.set( 0, 5, 10 );
+scene.add( light );
+
+
+function drawFrame()
+{
+	// въртим чашата
+	mug.rotation.x += 0.005;
+	mug.rotation.z = Math.sin(2*mug.rotation.x)/2;
+	mug.rotation.y += 0.003;
+	
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/05-Practice-31.10.2022/04.js b/Year 2/Computer Graphics Fundamentals/05-Practice-31.10.2022/04.js
new file mode 100644
index 0000000..f06ceb1
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/05-Practice-31.10.2022/04.js
@@ -0,0 +1,48 @@
+// Задача: конструирайте ... хипербола
+
+
+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;
+camera = new THREE.PerspectiveCamera( 30, aspect );
+camera.position.set( 0, 0, 100 );
+camera.lookAt( new THREE.Vector3() );
+
+// За момента имаме само окръжност
+var material = new THREE.MeshPhongMaterial();
+
+var circle = new THREE.Mesh(new THREE.CylinderGeometry( 20, 20, 1/2, 80 ), material);
+
+var cone1 = new THREE.Mesh(new THREE.CylinderGeometry(0.1, 10, 10, 64, 16), material);
+cone1.rotation.z = Math.PI / 2;
+var cone2 = new THREE.Mesh(new THREE.CylinderGeometry(0.1, 10, 10, 64, 16), material);
+cone2.position.x = -10;
+cone2.rotation.z = Math.PI / 2;
+
+var csg = new CSG();
+csg.union([cone1, cone2]);
+
+var hype = csg.toMesh();
+hype.material = material;
+
+scene.add( hype );
+
+// Добавяме светлина
+light = new THREE.PointLight( 'lightblue' );
+light.position.set( 0, 0, 100 );
+scene.add( light );
+
+function drawFrame()
+{
+	// въртим окръжността
+	hype.rotation.x += 0.005;
+	hype.rotation.y += 0.004;
+	hype.rotation.z += 0.003;
+	
+	renderer.render( scene, camera );
+}
diff --git a/Year 2/Computer Graphics Fundamentals/05-Practice-31.10.2022/practicum-template.html b/Year 2/Computer Graphics Fundamentals/05-Practice-31.10.2022/practicum-template.html
new file mode 100644
index 0000000..0f611c6
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/05-Practice-31.10.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="https://e55.syndamia.com/three.min.js"></script>
+		<script src="../CSG.js"></script>
+		<script src="../okg-prac-helper.js"></script>
+	</body>
+</html>