From 8608f2c0e0d02e58df9280eab03a6b7a96acd5f1 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sun, 27 Aug 2023 14:58:32 +0300 Subject: [WGL/P] Added a proper level management system, added more options to the menu --- .../Project/Project.html | 47 +++++++++++-------- .../Computer Graphics with WebGL/Project/level.js | 32 +++++++++++++ .../Computer Graphics with WebGL/Project/menu.js | 52 ++++++++++++++++++++++ .../Project/shaders.js | 8 +++- .../Project/spaceship.js | 7 ++- 5 files changed, 123 insertions(+), 23 deletions(-) create mode 100644 Year 2/Computer Graphics with WebGL/Project/level.js create mode 100644 Year 2/Computer Graphics with WebGL/Project/menu.js diff --git a/Year 2/Computer Graphics with WebGL/Project/Project.html b/Year 2/Computer Graphics with WebGL/Project/Project.html index 6133dba..1dc3ffe 100644 --- a/Year 2/Computer Graphics with WebGL/Project/Project.html +++ b/Year 2/Computer Graphics with WebGL/Project/Project.html @@ -11,7 +11,7 @@ body { padding: 0; margin: 0; - font: 21px sans-serif; + font: 18px sans-serif; } canvas { display: block; @@ -44,6 +44,7 @@ h2 { padding: 0.2em; border: 2px solid white; width: auto; + background-color: black; } #paused { left: 0; @@ -55,7 +56,8 @@ h2 { right: 0; top: 0; padding: 0.5em; - max-width: 15em; + max-width: 24em; + max-height: calc(100vh - 0.5em); } @@ -63,6 +65,7 @@ h2 { + diff --git a/Year 2/Computer Graphics with WebGL/Project/level.js b/Year 2/Computer Graphics with WebGL/Project/level.js new file mode 100644 index 0000000..65c3cc6 --- /dev/null +++ b/Year 2/Computer Graphics with WebGL/Project/level.js @@ -0,0 +1,32 @@ +stars = []; +blackHoles = []; +levels = []; + +Level = function(name, description, cameraCoords) { + this.name = name; + this.description = description; + this.cameraCoords = cameraCoords; + this.stars = []; + this.blackHoles = []; + levels.push(this); +} +Level.prototype.addStar = function(center, size) { + this.stars.push(new Star(center, size)); +} +Level.prototype.addBlackHole = function(center, size) { + this.blackHoles.push(new BlackHole(center, size)); +} +Level.prototype.load = function() { + stars = this.stars; + blackHoles = this.blackHoles; + pos = this.cameraCoords; +} + +function createLevels() { + var l1 = new Level( + "Star passing behind black hole", + "You can see how the black hole (correctly) warps the light of the star behind it when it passes", + [1000,0,650]); + l1.addStar([1100,0,1000], 10); + l1.addBlackHole([1000,0,900], 30); +} diff --git a/Year 2/Computer Graphics with WebGL/Project/menu.js b/Year 2/Computer Graphics with WebGL/Project/menu.js new file mode 100644 index 0000000..83a8e3c --- /dev/null +++ b/Year 2/Computer Graphics with WebGL/Project/menu.js @@ -0,0 +1,52 @@ +function initMenu() { + initLevels(); + debugChange.call(debugModeCB); +} + +const debugModeCB = document.getElementById('debug-mode'); +function debugChange() { + if(this.checked) { + gl.uniform4f(uBlack, 1,0,0,1); + gl.uniform4f(uBHBlack, 0,1,0,1); + } + else { + gl.uniform4f(uBlack, 0,0,0,1); + gl.uniform4f(uBHBlack, 0,0,0,1); + } +} +debugModeCB.addEventListener('change', debugChange); + +const onlyHorizontalCB = document.getElementById('only-horizontal'); +function horChange() { + onlyHorizontal = this.checked; +} +horChange.call(horChange); +onlyHorizontalCB.addEventListener('change', horChange); + +const onlyVerticalCB = document.getElementById('only-vertical'); +function verChange() { + onlyVertical = this.checked; +} +verChange.call(onlyVerticalCB); +onlyVerticalCB.addEventListener('change', verChange); + +/* Levels */ + +const levelSelect = document.getElementById('level-select'); +const levelDesc = document.getElementById('level-description'); + +function initLevels() { + for (var i = 0; i < levels.length; i++) { + var elem = document.createElement('option'); + elem.value = i; + elem.innerText = levels[i].name; + levelSelect.appendChild(elem); + } + levelChange.call(levelSelect); +} + +function levelChange() { + levelDesc.innerText = levels[this.value].description; + levels[this.value].load(); +} +levelSelect.addEventListener('change', levelChange); diff --git a/Year 2/Computer Graphics with WebGL/Project/shaders.js b/Year 2/Computer Graphics with WebGL/Project/shaders.js index 302ed50..4027c6d 100644 --- a/Year 2/Computer Graphics with WebGL/Project/shaders.js +++ b/Year 2/Computer Graphics with WebGL/Project/shaders.js @@ -44,6 +44,10 @@ var fShader = ` varying vec3 vColor; varying vec3 vXYZ; + // Settings + uniform vec4 uBlack; + uniform vec4 uBHBlack; + // For ray marching uniform vec4 uStars[` + STAR_MAX_COUNT + `]; uniform vec4 uBH[` + BLACKHOLE_MAX_COUNT + `]; @@ -146,7 +150,7 @@ var fShader = ` } if (bhStatus == 1) { - return vec4(0,1,0,1); + return uBHBlack; } // Does the ray hit a star @@ -156,7 +160,7 @@ var fShader = ` return calculateColor(bhStatus == 2, uStars[i], ray, step); } } - return vec4(1,0,0,1); + return uBlack; } void main() diff --git a/Year 2/Computer Graphics with WebGL/Project/spaceship.js b/Year 2/Computer Graphics with WebGL/Project/spaceship.js index cb3b548..654b451 100644 --- a/Year 2/Computer Graphics with WebGL/Project/spaceship.js +++ b/Year 2/Computer Graphics with WebGL/Project/spaceship.js @@ -112,11 +112,14 @@ document.addEventListener('keyup', (event) => { /* * Mouse movement */ + +var onlyHorizontal = false; +var onlyVertical = false; function updateLookingDirection(e) { if (isPaused) return; - var vertical = (e.movementY / canvas.offsetHeight) * ROTATION_SPEED; - var horizontal = (-e.movementX / canvas.offsetWidth) * ROTATION_SPEED; + var vertical = (1-onlyHorizontal) * (e.movementY / canvas.offsetHeight) * ROTATION_SPEED; + var horizontal = (1-onlyVertical) * (-e.movementX / canvas.offsetWidth) * ROTATION_SPEED; forward.addAngles(vertical, horizontal); up.addAngles(vertical, horizontal); -- cgit v1.3.1-23-gd82d