From de44ffda470905c350a1edb4bce4f0107f1d7742 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Tue, 8 Nov 2022 13:50:09 +0200 Subject: [OKG/P06] Solved exercises --- .../06-Practice-07.11.2022/01.js | 79 ++++++++++++++++++++++ .../06-Practice-07.11.2022/02.js | 49 ++++++++++++++ .../06-Practice-07.11.2022/03.js | 76 +++++++++++++++++++++ .../06-Practice-07.11.2022/04.js | 61 +++++++++++++++++ .../06-Practice-07.11.2022/05.js | 50 ++++++++++++++ .../06-Practice-07.11.2022/practicum-template.html | 21 ++++++ 6 files changed, 336 insertions(+) create mode 100644 Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/01.js create mode 100644 Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/02.js create mode 100644 Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/03.js create mode 100644 Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/04.js create mode 100644 Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/05.js create mode 100644 Year 2/Computer Graphics Fundamentals/06-Practice-07.11.2022/practicum-template.html 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 @@ + + + + Practicum + + + + + + + + -- cgit v1.3.1-26-gb76a