updated readme

README.md

@@ -1,48 +1,73 @@
 # Nubzuki Jump
-- Name: Tomas Horsky
+- Name: Tomas Horsky  
-- ID: 20256426
+- ID: 20256426  
-- Email: tomashorsky@kaist.ac.kr
+- Email: tomashorsky@kaist.ac.kr  
-- Git Repository: https://git.prototyping.id/20256426/NubzukiJump
+- Git Repository: https://git.prototyping.id/20256426/NubzukiJump  
-- Demo Video:
+- Demo Video: https://www.youtube.com/watch?v=E3_a1b5RLrk
 
-## How to use
+## How to use and play
 ```bash
 npm install
 npm run dev
 ```
+Then play the game either by using the arrow keys (smoother), or enable camera controls and move by moving your head.
+
+
 ## Description of the game
 <img src="./public/assets/nubzuki.png" width="140" align="right" style="margin-left: 30px;" />
-Nubzuki Jump is a simple 2D platformer game where the player controls a character named Nubzuki. The goal is to jump on platforms and reach as high as possible without falling down. The game features four different types of platforms, which are introduced as the player progresses, the types of platforms are:
 
+Nubzuki Jump is a simple 2D platformer game where the player controls Nubzuki. The goal is to jump on platforms and reach as high as possible without falling down. The game features four different types of platforms, which are introduced as the player progresses:
 
 1. **Basic platform**  
-2. **Moving platform** – a platform that moves horizontally  
+2. **Moving platform** – moves horizontally  
 3. **Spring platform** – boosts the player's jump  
 4. **One-time platform** – disappears after one jump  
 
-The player can move only left and right, the jumping is done automatically whenever player lands on platform. Game is controlled either by using the **arrow keys**, or by enabling **camera control** and moving head left or right.
+The player can only move left and right; jumping happens automatically whenever the player lands on a platform. The game can be controlled either using the **arrow keys** or by enabling **camera control** and moving the head left or right.
+
 
 ## Code Organization
-The code is divided into two main parts, the Svelte app and the game logic inside of `src/game`. The Svelte app is responsible for layout of the page, displaying the leaderboard and handling the game state (start, end, restart). It also contains one component `CameraControl.svelte` which is responsible for enabling camera control and showing reading of head movement. 
+The code is divided into two main parts: the Svelte app (`App.svelte` and `CameraControl.svelte`) and the game logic inside `src/game`. `App.svelte` is responsible for the page layout, displaying the leaderboard, and handling the game state (start, playing, game over).  
-The game logic is divided into several files:
+The `CameraControl.svelte` component handles enabling camera control and visualizing the detected head movement.
-1. `game.js` - the main file which initializes the game and handles the game loop
+
-2. `player.js` - contains the logic related to the player character, such as movement and player state
+The game logic is split into several files:
-3. `platforms.js` - contains logic for creating and managing platforms
+1. `game.js` – initializes the game and handles the main game loop  
-4. `platformTypes.js` - handles the creation and behavior of of platforms by type
+2. `player.js` – contains logic related to the player character (movement, state)  
-5. `cameraControl.js` - contains the logic for enabling camera control and reading head movement
+3. `platforms.js` – handles creation and management of platforms  
-6. `constants.js` - contains constants for the game
+4. `platformTypes.js` – defines behavior and visuals of different platform types  
+5. `cameraControl.js` – handles camera input and head movement detection  
+6. `constants.js` – stores game constants and configuration  
+
+The way different parts of the application are connected and communicate can be seen in the following diagram:
 
-How that different parts of the code are conected and are communicating can be seen in the following diagram:
 <div style="text-align: left;">
   <img src="./public/assets/organization_diagram.png"
        alt="Organization diagram"
        width="500">
 </div>
 
-## Issues 
+
-The issue I was not able to solve is that when using camera control, the game becomes slower and a little bit laggy. I improved it by lowering the camera resolution and reducing the detection frequency, however its still not perfect but playeble. Other then that, the colisons between player and edges of platform are not always perfect, but nothing terrible.
+## Implementation
+<img src="./public/assets/p5play.webp" width="400" align="right" />
+
+I used **Svelte 5** with runes in combination with **p5** and **p5play**. At first, I thought I would use Svelte a lot, but since the game is basically just a p5 canvas, I used Svelte only for the layout outside of the game. I used **p5play** to help me with the physics, the player and platforms are **Sprites** (game objects from the **p5play** library) which simplifies collision handling and jumping. The world movement could also have been implemented p5play (utiliazing camera movement feature), but I decided to implement it on my own.
+
+I implemented the game basically on my own, without prompting AI to generate code for me, but I used Copilot to help me code faster. However, I used AI for the Svelte layout part and the camera control. Making the camera control work was quite a long process, because the head movement detection is quite performance-heavy and difficult to make smooth in real time. I tried a few different libraries and landed on MediaPipe FaceLandmarker, which, in combination with lowering the video quality and detection frequency, works quite well.
+
+The main functions of the game are:
+- `updateGame()` – handles the game loop by updating the player (`movePlayer()`), moving the world (`moveWorld()`), and checking if the player has fallen  
+- `movePlayer()` – processes player movement and triggers jumps when landing on platforms  
+- `moveWorld()` – gradually moves the world upward and generates new platforms when needed (`generateNewPlatforms()`) 
+- `generateNewPlatforms()` – fills empty space with platforms, types are chosen based on player elevation and randomness  
+- `updateCameraControl()` – processes camera input by detecting head (nose) position (left, center, right)
+
+
+## Issues
+The main issue I was not able to fully solve is that when using camera control, the game becomes slower and slightly laggy. I improved it by lowering the camera resolution and reducing the detection frequency, but it is still not perfect. Additionally, I encountered circular dependency issue from Svelte’s internal modules which I was not able to resolve, but it does not affect the game in anyway.
+
 
 ## Resources and Acknowledgements
-- [P5play tutorial](https://p5play.org/learn/sprite) and [P5play documentation](https://p5play.org/docs)  - to help me with p5play
+- [P5play tutorial](https://p5play.org/learn/sprite) and [P5play documentation](https://p5play.org/docs) – helped me learn and use the P5play library  
-- **Github copilot** - to help me write code faster
+- **GitHub Copilot** – helped me code faster  
-- **ChatGPT** - mainly for camera controls and for finding bugs in my code
+- **ChatGPT** – helped me with implementing camera controls, svelte layout and with debugging
+   

package-lock.json

@@ -9,9 +9,6 @@
       "version": "1.0.0",
       "dependencies": {
         "@mediapipe/tasks-vision": "^0.10.35",
-        "p5": "1.11.4",
-        "p5-svelte": "^3.1.2",
-        "p5play": "^3.8.14",
         "sirv-cli": "^2.0.0"
       },
       "devDependencies": {
@@ -602,13 +599,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/p5": {
-      "version": "1.7.7",
-      "resolved": "https://registry.npmjs.org/@types/p5/-/p5-1.7.7.tgz",
-      "integrity": "sha512-WFuP7jqc5CkkMtCK/NphgvMnJz1Qi9CMuK7t6xLu/tuXkRdGQA4q4AD0dUYcChC0Oibe8PE8gbKSFPNF0BqVNw==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/@types/resolve": {
       "version": "1.20.2",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -1099,45 +1089,6 @@
       "dev": true,
       "license": "BSD-2-Clause"
     },
-    "node_modules/p5": {
-      "version": "1.11.4",
-      "resolved": "https://registry.npmjs.org/p5/-/p5-1.11.4.tgz",
-      "integrity": "sha512-N7tM2XYSmuNX8S295RvgHoJS7kpYLYxLjVFeySkwkbxwVrGnrwY8yAwciTxlonBjP422W7WW9pihpUVP8bAVgg==",
-      "license": "LGPL-2.1"
-    },
-    "node_modules/p5-svelte": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/p5-svelte/-/p5-svelte-3.1.2.tgz",
-      "integrity": "sha512-lcfWh+cJ1/wRdIXHnjpYmDgj2h3TCy1QJVQnf/cBcFWS8CSkvyAN5F8u8H2U8qBUtZ4XaD3nd+1NoYUMHaMExQ==",
-      "license": "MIT",
-      "dependencies": {
-        "p5": "^1.4.1"
-      },
-      "peerDependencies": {
-        "@types/p5": "^1.4.2",
-        "p5": "^1.4.0"
-      }
-    },
-    "node_modules/p5play": {
-      "version": "3.35.4",
-      "resolved": "https://registry.npmjs.org/p5play/-/p5play-3.35.4.tgz",
-      "integrity": "sha512-5C0QobV0a36JhFacV0rrMvgeJNFWYtIpS1EcvHYptmzGXFRt6x9/mvEegiWPqNq5LqRf30XeD3g1JJLfoHYzwQ==",
-      "funding": [
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/q5play"
-        },
-        {
-          "type": "ko-fi",
-          "url": "https://ko-fi.com/q5play"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/quinton-ashley"
-        }
-      ],
-      "license": "p5play Personal License"
-    },
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",

package.json

@@ -20,9 +20,6 @@
   },
   "dependencies": {
     "@mediapipe/tasks-vision": "^0.10.35",
-    "p5": "1.11.4",
-    "p5-svelte": "^3.1.2",
-    "p5play": "^3.8.14",
     "sirv-cli": "^2.0.0"
   }
 }

src/CameraControl.svelte

@@ -3,6 +3,7 @@
         initCameraControl,
         updateCameraControl,
         cameraInput,
+        resetCameraInput
     } from "./game/cameraControl.js";
 
     let videoContainer;
@@ -34,6 +35,20 @@
         }
     }
 
+    function disableCamera() {
+        if (videoContainer) {
+            const video = videoContainer.querySelector("video");
+            if (video && video.srcObject) {
+                const tracks = video.srcObject.getTracks();
+                tracks.forEach((track) => track.stop());
+            }
+            videoContainer.innerHTML = "";
+        }
+
+        enabled = false;
+        resetCameraInput();
+    }
+
     async function updateLoop() {
         if (!enabled) return;
 
@@ -65,6 +80,11 @@
             <div class:active={zone === "right"}>GO RIGHT</div>
         </div>
     </div>
+    {#if enabled}
+        <button class="disable-btn" onclick={disableCamera}>
+            Disable camera control
+        </button>
+    {/if}
 
     {#if error}
         <p class="error">{error}</p>
@@ -83,7 +103,7 @@
         padding: 16px;
         color: white;
         width: 320px;
-        height: 340px;
+        height: 380px;
     }
 
     .camera-view {
@@ -108,7 +128,7 @@
         transform: scaleX(-1);
     }
 
-    button {
+    .camera-view button {
         position: absolute;
         inset: 50% auto auto 50%;
         transform: translate(-50%, -50%);
@@ -144,4 +164,13 @@
         color: #ffb3b3;
         font-size: 13px;
     }
+
+    .disable-btn {
+        margin-top: 15px;
+        padding: 8px 14px;
+        border: none;
+        border-radius: 999px;
+        cursor: pointer;
+        font-weight: bold;
+    }
 </style>

src/game/cameraControl.js

@@ -11,7 +11,7 @@ let video;
 let faceLandmarker;
 let lastTime = 0;
 
-const DETECTION_INTERVAL = 60;
+const DETECTION_INTERVAL = 80;
 
 export async function initCameraControl() {
   if (cameraInput.active) 
@@ -86,4 +86,15 @@ export function updateCameraControl() {
     cameraInput.right = false;
     cameraInput.zone = 'center';
   }
+}
+
+export function resetCameraInput() {
+  cameraInput.left = false;
+  cameraInput.right = false;
+  cameraInput.active = false;
+  cameraInput.zone = 'center';
+
+  video = null;
+  faceLandmarker = null;
+  lastTime = 0;
 }

src/game/game.js

@@ -1,4 +1,4 @@
-import { updatePlayerPosition, createPlayer } from './player.js';
+import { createPlayer, movePlayer } from './player.js';
 import { initPlatforms, moveWorld } from './platforms.js';
 import { GAME_COLORS, PLATFORMS_GAP } from './constants.js';
 
@@ -8,12 +8,9 @@ let platforms;
 let pendingWorldMove = 0;
 let gameOver = false;
 
-export function getScore() {
+export function initializeGame() {
-  return (player?.elevation ?? 0) / PLATFORMS_GAP * 10;
+  world.gravity.y = 10;
-}
+  resetGame();
-
-export function isGameOver() {
-  return gameOver;
 }
 
 export function resetGame() {
@@ -24,11 +21,6 @@ export function resetGame() {
   player = createPlayer();
 }
 
-export function initializeGame() {
-  world.gravity.y = 10;
-  resetGame();
-}
-
 export function updateGame() {
   clear();
   background(GAME_COLORS.background);
@@ -37,9 +29,10 @@ export function updateGame() {
     return;
   }
 
-  pendingWorldMove += updatePlayerPosition(player, platforms);
+  pendingWorldMove += movePlayer(player, platforms);
   player.rotation = player.vel.x * 1.5;
 
+  // move 
   if (pendingWorldMove > PLATFORMS_GAP) {
     const move = Math.min(pendingWorldMove, 5);
     pendingWorldMove -= move;
@@ -57,3 +50,12 @@ export function updateGame() {
   textAlign(RIGHT);
   text(getScore(), width - 20, 50);
 }
+
+
+export function getScore() {
+  return (player?.elevation ?? 0) / PLATFORMS_GAP * 10;
+}
+
+export function isGameOver() {
+  return gameOver;
+}

src/game/platformTypes.js

@@ -14,7 +14,6 @@ function drawSpringPlatform() {
     noStroke();
     textAlign(CENTER, CENTER);
     textSize(15);
-    //textStyle(BOLD);
     text('⮝ ⮝ ⮝', 0, 2);
     textStyle(NORMAL);
 }
@@ -51,8 +50,6 @@ function addMovingBehavior(platform) {
     };
 }
 
-
-
 export function addTypeSpecifics(platform, type) {
     switch (platform.type) {
         case PLAT_TYPE.MOVING:

src/game/player.js

@@ -20,7 +20,6 @@ export function createPlayer() {
 
 
 function handleJump(player, platform) {
-
   let elevationGain = 0;
   if (player.elevation < platform.elevation) {
     elevationGain = platform.elevation - player.elevation;
@@ -42,7 +41,7 @@ function handleJump(player, platform) {
   return elevationGain;
 }
 
-export function updatePlayerPosition(player, platforms) {
+export function movePlayer(player, platforms) {
 
   // Controls
   player.vel.x = 0;
@@ -50,11 +49,8 @@ export function updatePlayerPosition(player, platforms) {
     player.vel.x = -5;
   } else if (keyIsDown(RIGHT_ARROW) || cameraInput.right) {
     player.vel.x = 5;
-  } else {
-    player.vel.x *= 0.5;
   }
 
-
   // Wrap horizontally
   if (player.x > width) {
     player.x = 0;