From d1a285e4f605d3bbe9afe2dbd094ff0b582f9cb1 Mon Sep 17 00:00:00 2001 From: Cars-n <104526149+Cars-n@users.noreply.github.com> Date: Thu, 21 Mar 2024 21:38:58 -0400 Subject: [PATCH 1/5] refactored 8-way flashlight --- src/js/Flashlight.js | 36 +++++++----------------------------- 1 file changed, 7 insertions(+), 29 deletions(-) diff --git a/src/js/Flashlight.js b/src/js/Flashlight.js index 8102c94..8dc6995 100644 --- a/src/js/Flashlight.js +++ b/src/js/Flashlight.js @@ -1,42 +1,20 @@ const DARKNESSLAYER = 2; -let darkness; -let flashlightRotation; +const ROTATION_SPEED = 60; +let darkness, targetRotation, clockwiseAmt, counterClockwiseAmt; + function darknessSetup() { darkness = new Sprite(width/2, height/2, 1920, 1080); // creates a sprite that is the size of the canvas and at the center of the canvas darkness.img = "assets/darkness.svg" - + darkness.opacity = 0.4; darkness.collider = 'none'; - darkness.layer = DARKNESSLAYER; //Layer needs to be higher than player and enviroment sprites + darkness.layer = DARKNESSLAYER; // layer needs to be higher than player and enviroment sprites } function darknessDraw(playerX, playerY, playerVelocityX, playerVelocityY) { darkness.y = playerY; darkness.x = playerX; - if(playerVelocityX != 0 && playerVelocityY != 0) { // if player is moving on the x and y axes - flashlightRotation = 0; // reset rotation - if (playerVelocityX > 0 && playerVelocityY < 0) // A and W - flashlightRotation = 45; - if (playerVelocityX > 0 && playerVelocityY > 0) // A and S - flashlightRotation = 135; - if (playerVelocityX < 0 && playerVelocityY < 0) // D and W - flashlightRotation = -45; - if (playerVelocityX < 0 && playerVelocityY > 0) // D and S - flashlightRotation = -135; - } - else if(playerVelocityX != 0) { // if player is moving on the x-axis - flashlightRotation = 0; // reset rotation - if (playerVelocityX > 0) - flashlightRotation = 90; - else if (playerVelocityX < 0) - flashlightRotation = -90; - } - else if(playerVelocityY != 0) { // if player is moving on the y-axis - flashlightRotation = 0; // reset rotation - if (playerVelocityY > 0) - flashlightRotation = -180; - else if (playerVelocityY < 0) - flashlightRotation = 0; + if(playerVelocityX != 0 || playerVelocityY != 0) { // if player is moving + darkness.rotation = (atan2(playerVelocityX, -playerVelocityY) + 360) % 360; // calculates the angle formed between two points } - darkness.rotation = flashlightRotation; } \ No newline at end of file From fc452a8a8eac1ec3d44c81f880cd28da500703d9 Mon Sep 17 00:00:00 2001 From: Cars-n Date: Fri, 22 Mar 2024 00:36:01 -0400 Subject: [PATCH 2/5] added smooth transitions --- src/js/Flashlight.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/js/Flashlight.js b/src/js/Flashlight.js index 8dc6995..39d1054 100644 --- a/src/js/Flashlight.js +++ b/src/js/Flashlight.js @@ -1,6 +1,7 @@ const DARKNESSLAYER = 2; -const ROTATION_SPEED = 60; -let darkness, targetRotation, clockwiseAmt, counterClockwiseAmt; +const ROTATION_SPEED = 0.1; +let darkness, clockwiseAmt, counterClockwiseAmt +let currentRotation = 0, targetRotation = 0; function darknessSetup() { @@ -15,6 +16,10 @@ function darknessDraw(playerX, playerY, playerVelocityX, playerVelocityY) { darkness.y = playerY; darkness.x = playerX; if(playerVelocityX != 0 || playerVelocityY != 0) { // if player is moving - darkness.rotation = (atan2(playerVelocityX, -playerVelocityY) + 360) % 360; // calculates the angle formed between two points + targetRotation = (atan2(playerVelocityX, -playerVelocityY) + 360) % 360; // calculates the angle formed between two points } + + currentRotation = lerp(currentRotation, targetRotation, ROTATION_SPEED); // currentRotation gets ROTATION_SPEED times closer to the target + + darkness.rotation = currentRotation; } \ No newline at end of file From e62d3efeecb07c571287ff2d9c9195e824f488fb Mon Sep 17 00:00:00 2001 From: Cars-n Date: Wed, 24 Apr 2024 18:13:08 -0400 Subject: [PATCH 3/5] smooth transitions between flashlight directions --- src/js/Flashlight.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/js/Flashlight.js b/src/js/Flashlight.js index 39d1054..bfe7997 100644 --- a/src/js/Flashlight.js +++ b/src/js/Flashlight.js @@ -15,11 +15,19 @@ function darknessSetup() { function darknessDraw(playerX, playerY, playerVelocityX, playerVelocityY) { darkness.y = playerY; darkness.x = playerX; - if(playerVelocityX != 0 || playerVelocityY != 0) { // if player is moving - targetRotation = (atan2(playerVelocityX, -playerVelocityY) + 360) % 360; // calculates the angle formed between two points + + if(playerVelocityX !== 0 || playerVelocityY !== 0) { // if player is moving + targetRotation = (Math.atan2(playerVelocityX, -playerVelocityY) * 180 / Math.PI + 360) % 360; // calculates the angle formed between two points, converts to degrees, range of 0-359 + + // calculate the shortest rotation direction + let diff = (targetRotation - currentRotation + 540) % 360 - 180; // finds difference between angles, add 540 to ensure positive before modulo, range of -180-179 + + // adjust targetRotation to rotate in the shortest direction + targetRotation = currentRotation + diff; } - + currentRotation = lerp(currentRotation, targetRotation, ROTATION_SPEED); // currentRotation gets ROTATION_SPEED times closer to the target - + darkness.rotation = currentRotation; -} \ No newline at end of file + } + \ No newline at end of file From 90535a352e2ac3f41edffe6053fc9942226eda6a Mon Sep 17 00:00:00 2001 From: Cars-n Date: Wed, 24 Apr 2024 18:16:02 -0400 Subject: [PATCH 4/5] removed unused variables --- src/js/Flashlight.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/js/Flashlight.js b/src/js/Flashlight.js index bfe7997..e148ccf 100644 --- a/src/js/Flashlight.js +++ b/src/js/Flashlight.js @@ -1,13 +1,11 @@ -const DARKNESSLAYER = 2; const ROTATION_SPEED = 0.1; -let darkness, clockwiseAmt, counterClockwiseAmt +let darkness let currentRotation = 0, targetRotation = 0; function darknessSetup() { darkness = new Sprite(width/2, height/2, 1920, 1080); // creates a sprite that is the size of the canvas and at the center of the canvas darkness.img = "assets/darkness.svg" - darkness.opacity = 0.4; darkness.collider = 'none'; darkness.layer = DARKNESSLAYER; // layer needs to be higher than player and enviroment sprites } From 50155c4da415974488cc404a46c64dd391dff381 Mon Sep 17 00:00:00 2001 From: Cars-n <104526149+Cars-n@users.noreply.github.com> Date: Wed, 24 Apr 2024 19:25:42 -0400 Subject: [PATCH 5/5] fixed darkness_layer constant variable name --- src/js/Flashlight.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/Flashlight.js b/src/js/Flashlight.js index f23fab1..2b80dac 100644 --- a/src/js/Flashlight.js +++ b/src/js/Flashlight.js @@ -7,7 +7,7 @@ function darknessSetup() { darkness = new Sprite(width/2, height/2, 1920, 1080); // creates a sprite that is the size of the canvas and at the center of the canvas darkness.img = "assets/darknessEyesight.svg" darkness.collider = 'none'; - darkness.layer = DARKNESSLAYER; // layer needs to be higher than player and enviroment sprites + darkness.layer = DARKNESS_LAYER; // layer needs to be higher than player and enviroment sprites } function darknessDraw(playerX, playerY, playerVelocityX, playerVelocityY, hasFlashlight) {