[OKG/P07] Solved exercises from 7th practicum

6 files changed, 414 insertions, 0 deletions

diff --git a/Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/01.js b/Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/01.js
new file mode 100644
index 0000000..75741a4
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/01.js
@@ -0,0 +1,99 @@
+// Задача: Създадени са два пилона на случайни

+// места и случайни височини. Направете обекта

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

+// единия пилон, до върха на другия пилон. Като

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

+

+

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

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

+renderer.setAnimationLoop( drawFrame );

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

+

+// включваме генерирането на меки сенки

+renderer.shadowMap.enabled = true;

+renderer.shadowMap.type = THREE.PCFSoftShadowMap;

+

+var scene = new THREE.Scene();

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

+

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

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

+camera.position.set( 0, 80, 250 );

+camera.lookAt( new THREE.Vector3( 0, 20, 0 ));

+

+

+// координати на началната точка на движението

+var x1 = 10+60*Math.random();

+var y1 = 10+40*Math.random();

+var z1 = 40-80*Math.random();

+

+// координати на крайната точка на движението

+var x2 = -10-60*Math.random();

+var y2 = 10+40*Math.random();

+var z2 = 40-80*Math.random();

+

+

+// създаване на подвижната сфера

+var ball = new THREE.Mesh(

+	new THREE.SphereGeometry( 6, 32, 32 ),

+	new THREE.MeshPhongMaterial( {color: 'goldenrod', shininess: 60, specular: 'white'} )

+);

+ball.position.set( (x1+x2)/2, (y1+y2)/2, (z1+z2)/2 );

+ball.castShadow = true;

+scene.add( ball );

+

+

+// създаване на земята

+var ground = new THREE.Mesh(

+	new THREE.BoxGeometry( 200, 2, 140 ),

+	new THREE.MeshPhongMaterial( {color: 'slateblue', shininess: 0, specular: 'white'} )

+);

+ground.position.y = -1;

+ground.receiveShadow = true;

+scene.add( ground );

+		

+// създаване на двата пилона

+var material = new THREE.MeshPhongMaterial( {color: 'slateblue', shininess: 0, specular: 'white'} )

+scene.add( futuristicPillar( x1, z1, y1, material ) );

+scene.add( futuristicPillar( x2, z2, y2, material ) );

+

+// светлина

+var light = new THREE.PointLight();

+light.position.set( (x1+x2)/2, y1+y2, (z1+z2)/2 );

+light.castShadow = true;

+scene.add( light );

+

+scene.add( new THREE.AmbientLight( 'gold' ) );

+

+var ballPos = ball.position.clone();

+var pillar1Pos = { x: x1, y: y1, z: z1 };

+var pillar2Pos = { x: x2, y: y2, z: z2 };

+function interpolate(pos1, pos2, per) {

+	console.log(per);

+	return new THREE.Vector3(

+		pos1.x * (1.0 - per) + pos2.x * per,

+		pos1.y * (1.0 - per) + pos2.y * per,

+		pos1.z * (1.0 - per) + pos2.z * per);

+}

+

+var framesToFirst = 200;

+var framesToSecond = 200;

+

+var frameCount = 0;

+// във функцията drawFrame реализирайте исканото

+// движение и спиране на топката

+function drawFrame()

+{

+	if (framesToFirst > frameCount) {

+		ball.position.copy(interpolate(ballPos, pillar1Pos, frameCount / framesToFirst));

+	}

+	else if (framesToSecond + framesToFirst > frameCount) {

+		ball.position.copy(interpolate(pillar1Pos, pillar2Pos, (frameCount - framesToFirst) / framesToSecond));

+	}

+

+	scene.rotation.y += 0.001;

+	

+	renderer.render( scene, camera );

+	frameCount++;

+}

diff --git a/Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/02.js b/Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/02.js
new file mode 100644
index 0000000..cecdbe8
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/02.js
@@ -0,0 +1,96 @@
+// Задача: Създадени са два пилона на случайни

+// места и случайни височини. Направете обекта

+// ball да се движи напред-назад по права линия

+// между върховете на пилоните, но не от открай

+// до край.

+

+

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

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

+renderer.setAnimationLoop( drawFrame );

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

+

+// включваме генерирането на меки сенки

+renderer.shadowMap.enabled = true;

+renderer.shadowMap.type = THREE.PCFSoftShadowMap;

+

+var scene = new THREE.Scene();

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

+

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

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

+camera.position.set( 0, 80, 250 );

+camera.lookAt( new THREE.Vector3( 0, 20, 0 ));

+

+

+// координати на началната точка на движението

+var x1 = 10+60*Math.random();

+var y1 = 10+40*Math.random();

+var z1 = 40-80*Math.random();

+

+// координати на крайната точка на движението

+var x2 = -10-60*Math.random();

+var y2 = 10+40*Math.random();

+var z2 = 40-80*Math.random();

+

+

+// създаване на подвижната сфера

+var ball = new THREE.Mesh(

+	new THREE.SphereGeometry( 6, 32, 32 ),

+	new THREE.MeshPhongMaterial( {color: 'goldenrod', shininess: 60, specular: 'white'} )

+);

+ball.position.set( (x1+x2)/2, (y1+y2)/2, (z1+z2)/2 );

+ball.castShadow = true;

+scene.add( ball );

+

+

+// създаване на земята

+var ground = new THREE.Mesh(

+	new THREE.BoxGeometry( 200, 2, 140 ),

+	new THREE.MeshPhongMaterial( {color: 'green', shininess: 0, specular: 'white'} )

+);

+ground.position.y = -1;

+ground.receiveShadow = true;

+scene.add( ground );

+		

+// създаване на двата пилона

+var material = new THREE.MeshPhongMaterial( {color: 'green', shininess: 0, specular: 'white'} )

+scene.add( futuristicPillar( x1, z1, y1, material ) );

+scene.add( futuristicPillar( x2, z2, y2, material ) );

+

+// светлина

+var light = new THREE.PointLight();

+light.position.set( (x1+x2)/2, y1+y2, (z1+z2)/2 );

+light.castShadow = true;

+scene.add( light );

+

+scene.add( new THREE.AmbientLight( 'deeppink' ) );

+

+var ballPos = ball.position.clone();

+var pillar1Pos = { x: x1, y: y1, z: z1 };

+var pillar2Pos = { x: x2, y: y2, z: z2 };

+function interpolate(pos1, pos2, per) {

+	return new THREE.Vector3(

+		pos1.x * (1.0 - per) + pos2.x * per,

+		pos1.y * (1.0 - per) + pos2.y * per,

+		pos1.z * (1.0 - per) + pos2.z * per);

+}

+

+var framesPerCycle = 300;

+

+var frameCount = 0;

+// във функцията drawFrame реализирайте исканото

+// движение с линейна комбинация

+function drawFrame()

+{

+	if (frameCount % framesPerCycle < framesPerCycle / 2) {

+		ball.position.copy(interpolate(pillar1Pos, pillar2Pos, (frameCount % framesPerCycle) / framesPerCycle * 2));

+	} else {

+		ball.position.copy(interpolate(pillar2Pos, pillar1Pos, ((frameCount - framesPerCycle / 2) % framesPerCycle) / framesPerCycle * 2));

+	}

+

+	scene.rotation.y += 0.001;

+	

+	renderer.render( scene, camera );

+	frameCount++;

+}

diff --git a/Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/03.js b/Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/03.js
new file mode 100644
index 0000000..4a7272b
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/07-Practice-21.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 );

+

+// включваме генерирането на меки сенки

+renderer.shadowMap.enabled = true;

+renderer.shadowMap.type = THREE.PCFSoftShadowMap;

+

+var scene = new THREE.Scene();

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

+

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

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

+camera.position.set( 0, 80, 250 );

+camera.lookAt( new THREE.Vector3( 0, 20, 0 ));

+

+

+// координати на пилон

+var xp = 40*Math.random();

+var yp = 20+40*Math.random();

+var zp = 40*Math.random();

+

+

+// създаване на топка

+var ball = new THREE.Mesh(

+	new THREE.SphereGeometry( 6, 32, 32 ),

+	new THREE.MeshPhongMaterial( {color: 'goldenrod', shininess: 60, specular: 'white'} )

+);

+ball.castShadow = true;

+scene.add( ball );

+

+

+// създаване на земята

+var ground = new THREE.Mesh(

+	new THREE.BoxGeometry( 200, 2, 140 ),

+	new THREE.MeshPhongMaterial( {color: 'steelblue', shininess: 60, specular: 'white'} )

+);

+ground.position.y = -1;

+ground.receiveShadow = true;

+scene.add( ground );

+		

+// създаване на пилон

+var material = new THREE.MeshPhongMaterial( {color: 'steelblue', shininess: 100, specular: 'white'} );

+scene.add( futuristicPillar( xp, zp, yp, material ) );

+

+

+// светлина

+var light = new THREE.PointLight();

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

+light.castShadow = true;

+scene.add( light );

+

+scene.add( new THREE.AmbientLight( 'white', 0.7 ) );

+

+var clock = new THREE.Clock();

+

+var rotationTime = 5;

+var rotationDiam = 20;

+function drawFrame()

+{

+	var t = clock.getElapsedTime();

+	

+	// движение в кръг - може би тук да се допише?

+	ball.position.x = Math.sin(Math.PI * 2 * (t % rotationTime) / rotationTime) * rotationDiam + xp;

+	ball.position.z = Math.cos(Math.PI * 2 * (t % rotationTime) / rotationTime) * rotationDiam + zp;

+	ball.position.y = Math.sin(Math.PI * 2 * (t % rotationTime) / rotationTime + Math.PI / 4) * rotationDiam + yp;

+

+	scene.rotation.y += 0.002;

+	

+	renderer.render( scene, camera );

+}

diff --git a/Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/04.js b/Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/04.js
new file mode 100644
index 0000000..f074dfc
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/04.js
@@ -0,0 +1,83 @@
+// Задача: Направете топка да се движи на зигзаг

+// около пилони по екватора на сфера

+

+

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

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

+renderer.setAnimationLoop( drawFrame );

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

+

+// включваме генерирането на меки сенки

+renderer.shadowMap.enabled = true;

+renderer.shadowMap.type = THREE.PCFSoftShadowMap;

+

+var scene = new THREE.Scene();

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

+

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

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

+camera.position.set( 250, 80, 0 );

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

+

+

+// създаване на пилони

+var n = 6;

+var material = new THREE.MeshPhongMaterial( {color: 'plum', shininess: 0, specular: 'white'} );

+for( a=0; a<2*Math.PI; a+=2*Math.PI/n)

+{

+	var pillar = futuristicPillar( 0, 0, 50, material );

+	pillar.position.set( 42*Math.sin(a+Math.PI/2), 0, 42*Math.cos(a+Math.PI/2) );

+	pillar.rotation.z = -Math.PI/2;

+	pillar.rotation.y = a;

+	scene.add( pillar );

+}

+	

+

+// създаване на топка

+var ball = new THREE.Mesh(

+	new THREE.SphereGeometry( 6, 32, 32 ),

+	new THREE.MeshPhongMaterial( {color: 'red', shininess: 50, specular: 'white'} )

+);

+ball.position.set( 0, 0, 70 );

+ball.castShadow = true;

+scene.add( ball );

+

+

+// създаване на земята

+var ground = new THREE.Mesh(

+	new THREE.SphereGeometry( 50, 64, 64 ),

+	new THREE.MeshPhongMaterial( {color: 'plum', shininess: 0, specular: 'white'} )

+);

+ground.receiveShadow = true;

+scene.add( ground );

+		

+

+// светлина

+var light = new THREE.PointLight();

+light.castShadow = true;

+scene.add( light );

+

+scene.add( new THREE.AmbientLight( 'white', 0.2 ) );

+

+var clock = new THREE.Clock();

+

+var phiSec = -10;

+var thetaSec = 3;

+var radius = 70;

+var verticalDivergence = Math.PI / 16;

+function drawFrame()

+{

+	var t = clock.getElapsedTime();

+	

+	var phi = 2 * Math.PI * (t % phiSec) / phiSec;

+	var theta = verticalDivergence * Math.sin(2 * Math.PI * (t % thetaSec) / thetaSec) + Math.PI / 2 - verticalDivergence / 2;

+

+	ball.position.x = radius * Math.sin(theta) * Math.cos(phi);

+	ball.position.z = radius * Math.sin(theta) * Math.sin(phi);

+	ball.position.y = radius * Math.cos(theta);

+

+	scene.rotation.y += 0.01;

+	light.position.set( 100*Math.cos(scene.rotation.y-0.5), 30, 100*Math.sin(scene.rotation.y-0.5) );

+	

+	renderer.render( scene, camera );

+}

diff --git a/Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/futuristicPillar.js b/Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/futuristicPillar.js
new file mode 100644
index 0000000..ebd132a
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/futuristicPillar.js
@@ -0,0 +1,38 @@
+// Примерен обект-пилон
+
+function futuristicPillar(x,z, height, material)
+{
+	var pillar = new THREE.Group();
+
+	var obj = new THREE.Mesh(
+		new THREE.SphereGeometry( 4, 32, 32 ),
+		material
+	);
+	obj.position.set( 0, height, 0 );
+	obj.receiveShadow = true;
+	obj.castShadow = true;
+	pillar.add( obj );
+
+	var spline = new THREE.QuadraticBezierCurve( 
+		new THREE.Vector3( Math.max(1+height/2,10), 0, 0 ),
+		new THREE.Vector3( -3, 0, 0 ),
+		new THREE.Vector3( 2, height-1, 0 ) );
+	var points = [];
+	for ( var i = 0; i <= 30; i ++ )
+	{
+		var p = spline.getPoint(i/30);
+		points.push( new THREE.Vector2( p.x, p.y ) );
+	}
+
+	obj = new THREE.Mesh(
+		new THREE.LatheGeometry( points, 40 ),
+		material
+	);
+
+	obj.receiveShadow = true;
+	obj.castShadow = true;
+	pillar.add( obj );
+	pillar.position.set( x, 0, z );	
+	
+	return pillar;
+}
\ No newline at end of file
diff --git a/Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/practicum-template.html b/Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/practicum-template.html
new file mode 100644
index 0000000..94a144e
--- /dev/null
+++ b/Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/practicum-template.html
@@ -0,0 +1,22 @@
+<!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>
+		<script src="./futuristicPillar.js"></script>
+	</body>
+</html>