updated readme

Co-authored-by: Copilot <copilot@github.com>

README.md

@@ -1,10 +1,73 @@
-# svelte-P5 Play
+# Nubzuki Jump
-
+- Name: Tomas Horsky  
-A simple template to get you started with p5 svelte and the [p5play](https://p5play.org/index.html) library.
+- ID: 20256426  
-
+- Email: tomashorsky@kaist.ac.kr  
-## How to use
+- Git Repository: https://git.prototyping.id/20256426/NubzukiJump  
+- Demo Video: https://www.youtube.com/watch?v=E3_a1b5RLrk
 
+## 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 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** – moves horizontally  
+3. **Spring platform** – boosts the player's jump  
+4. **One-time platform** – disappears after one jump  
+
+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 (`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 `CameraControl.svelte` component handles enabling camera control and visualizing the detected head movement.
+
+The game logic is split into several files:
+1. `game.js` – initializes the game and handles the main game loop  
+2. `player.js` – contains logic related to the player character (movement, state)  
+3. `platforms.js` – handles creation and management of platforms  
+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:
+
+<div style="text-align: left;">
+  <img src="./public/assets/organization_diagram.png"
+       alt="Organization diagram"
+       width="500">
+</div>
+
+
+## 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) – helped me learn and use the P5play library  
+- **GitHub Copilot** – helped me code faster  
+- **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"
   }
 }

public/index.html

@@ -7,7 +7,7 @@
 
 	<title>Svelte app</title>
 
-	<link rel='icon' type='image/png' href='/favicon.png'>
+	<link rel='icon' type='image/png' href='/assets/nubzuki.png'>
 	<link rel='stylesheet' href='/global.css'>
 	<link rel='stylesheet' href='/build/bundle.css'>
 

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

@@ -1,91 +1,100 @@
-import { FaceDetector, FilesetResolver } from '@mediapipe/tasks-vision';
+import { FaceLandmarker, FilesetResolver } from '@mediapipe/tasks-vision';
 
 export const cameraInput = {
   left: false,
   right: false,
   active: false,
-  zone: 'center',
+  zone: 'center'
-  x: 0.5 
 };
 
 let video;
-let faceDetector;
+let faceLandmarker;
+let lastTime = 0;
 
-// 🔥 NARROW CENTER ZONE:
+const DETECTION_INTERVAL = 80;
-// 0.48 and 0.52 means the center is only 4% of the screen width.
-// Adjust these if it's still too hard to trigger movement.
-const LEFT_THRESHOLD = 0.48;  
-const RIGHT_THRESHOLD = 0.52; 
 
 export async function initCameraControl() {
-  if (cameraInput.active) return video;
+  if (cameraInput.active) 
+    return video;
 
   video = document.createElement('video');
   video.autoplay = true;
   video.playsInline = true;
   video.muted = true;
 
+  // Set low resolution and frame rate for better performance
   const stream = await navigator.mediaDevices.getUserMedia({
-    video: { 
+    video: {
-      width: 160, 
+      width: { ideal: 160 },
-      height: 120, 
+      height: { ideal: 120 },
-      frameRate: { ideal: 20 } // Slightly higher for faster reaction
+      frameRate: { ideal: 30 }
     }
   });
 
   video.srcObject = stream;
 
+  //load models for face landmark detection
   const vision = await FilesetResolver.forVisionTasks(
     'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm'
   );
-
+  faceLandmarker = await FaceLandmarker.createFromOptions(vision, {
-  faceDetector = await FaceDetector.createFromOptions(vision, {
     baseOptions: {
-      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/face_detector/blaze_face_short_range/float16/1/blaze_face_short_range.task`,
+      modelAssetPath:
-      delegate: 'GPU'
+        'https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/latest/face_landmarker.task',
     },
-    runningMode: 'VIDEO'
+    runningMode: 'VIDEO',
-  });
+    numFaces: 1
-
-  video.addEventListener('loadeddata', () => {
-    cameraInput.active = true;
-    startDetectionLoop();
   });
 
+  cameraInput.active = true;
   return video;
 }
 
-function startDetectionLoop() {
+export function updateCameraControl() {
-  const detect = (now) => {
+  const now = performance.now();
-    const result = faceDetector.detectForVideo(video, now);
 
-    if (result.detections.length > 0) {
+  // Limit detection frequency to improve performance
-      const box = result.detections[0].boundingBox;
+  if (now - lastTime < DETECTION_INTERVAL) 
-      // Calculate raw center point (0 to 1)
+    return;
-      const rawX = (box.originX + box.width / 2) / 160;
+  lastTime = now;
-      
-      cameraInput.x = rawX;
 
-      // INSTANT LOGIC (No smoothing)
+  if (!faceLandmarker || !video || video.readyState < 2) 
-      if (rawX < LEFT_THRESHOLD) {
+    return;
-        updateZones(false, true, 'right'); // Mirrored: Face on left of cam = move right
-      } else if (rawX > RIGHT_THRESHOLD) {
-        updateZones(true, false, 'left');  // Mirrored: Face on right of cam = move left
-      } else {
-        updateZones(false, false, 'center');
-      }
-    } else {
-      updateZones(false, false, 'center');
-    }
 
-    video.requestVideoFrameCallback(detect);
+  const result = faceLandmarker.detectForVideo(video, now);
-  };
 
-  video.requestVideoFrameCallback(detect);
+  // If no face is detected, reset to center
+  if (!result.faceLandmarks.length) {
+    cameraInput.left = false;
+    cameraInput.right = false;
+    cameraInput.zone = 'center';
+    return;
+  }
+
+  // look at the nose and determine zone
+  const x = result.faceLandmarks[0][1].x;
+  if (x < 0.4) {
+    cameraInput.left = false;
+    cameraInput.right = true;
+    cameraInput.zone = 'right';
+  } else if (x > 0.6) {
+    cameraInput.left = true;
+    cameraInput.right = false;
+    cameraInput.zone = 'left';
+  } else {
+    cameraInput.left = false;
+    cameraInput.right = false;
+    cameraInput.zone = 'center';
+  }
 }
 
-function updateZones(l, r, z) {
+export function resetCameraInput() {
-  cameraInput.left = l;
+  cameraInput.left = false;
-  cameraInput.right = r;
+  cameraInput.right = false;
-  cameraInput.zone = z;
+  cameraInput.active = false;
+  cameraInput.zone = 'center';
+
+  video = null;
+  faceLandmarker = null;
+  lastTime = 0;
 }

src/game/constants.js

@@ -16,4 +16,4 @@ export const PLAT_TYPE = {
     MOVING: 'moving',
     SPRING: 'spring',
     ONE_TIME: 'one-time'
-};
+};

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

@@ -4,14 +4,14 @@ import { cameraInput } from './cameraControl.js';
 
 export function createPlayer() {
   const player = new Sprite();
-  player.scale = 0.20;
+  player.scale = 0.13;
   player.img = "assets/nubzuki.png";
   player.bounciness = 0;
   player.rotationLock = true;
 
-  player.w = 20;
+  player.w = 25;
   player.h = 20;
-  player.offset.y = 25;
+  player.offset.y = 30;
   player.elevation = 0;
   player.x = width / 2;
   player.y = height - 80;
@@ -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;