From 904a52f952a8a5604c24ea8d525bf88a55bb8cee Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 26 Nov 2022 15:16:06 +0200 Subject: [OKG/P07] Solved exercises from 7th practicum --- .../07-Practice-21.11.2022/01.js | 99 ++++++++++++++++++++++ .../07-Practice-21.11.2022/02.js | 96 +++++++++++++++++++++ .../07-Practice-21.11.2022/03.js | 76 +++++++++++++++++ .../07-Practice-21.11.2022/04.js | 83 ++++++++++++++++++ .../07-Practice-21.11.2022/futuristicPillar.js | 38 +++++++++ .../07-Practice-21.11.2022/practicum-template.html | 22 +++++ 6 files changed, 414 insertions(+) create mode 100644 Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/01.js create mode 100644 Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/02.js create mode 100644 Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/03.js create mode 100644 Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/04.js create mode 100644 Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/futuristicPillar.js create mode 100644 Year 2/Computer Graphics Fundamentals/07-Practice-21.11.2022/practicum-template.html 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 @@ + + + + Practicum + + + + + + + + + -- cgit v1.3.1-23-gd82d