Merge pull request 'WIP 4.22' (#12) from 20254499/homework5:main into 20254499

Reviewed-on: #12

PROPOSAL_20240905.md

@@ -1,148 +0,0 @@
-# Untitled Maze Game - ID30011 Midterm Project Proposal
-
-- **Name:** Bumgyu Suh
-- **Student ID:** 20240905
-- **Repository URL:** https://git.prototyping.id/20240905/homework5
-
-## Table of Contents
-1. [Game Description and Mechanics](#game-description-and-mechanics)
-    - [Objective](#objective)
-    - [Core Mechanics](#core-mechanics)
-    - [Win / Lose Conditions](#win--lose-conditions)
-    - [Player Controls](#player-controls)
-2. [Visual Design and Implementation](#visual-design-and-implementation)
-    - [Visual Style](#visual-style)
-    - [Game Elements](#game-elements)
-    - [Implementation](#implementation)
-3. [Challenges and Features](#challenges-and-features)
-    - [Expected Challenges](#expected-challenges)
-    - [Features and Concepts Used](#features-and-concepts-used)
-
-# Game Description and Mechanics
-
-![Ingame Chest](./ingame_chest.png)
-
-**Untitled Maze Game** is planned to be a **3D first-person maze game** made using [Babylon.js](https://www.babylonjs.com/), where the player is attempting to escape from a dungeon. The game is structured in levels. In each level, a **procedurally generated maze** is created, and the player must find the key to the exit in one of the chests in  the level, and the exit to advance to the next level. The twist is, if the player opens a chest that the player has already opened before, the player dies and the game is over. The score is determined by how many levels the player wins, and how fast. The ultimate goal is to get the highest highscore.
-
-## Objective
-- Search through the chests of the level to find the exit key.
-- Avoid opening chests that has already been opened before.
-- Escape the maze by finding the exit with the exit key.
-- Progress through as many levels as possible, as quickly as possible.
-
-## Core Mechanics
-- Each level generates a new maze with increasing size or complexity.
-- The main challenge is **memory-based navigation** and **speed**:
-  - If the player opens a **chest that has already been opened before**, the player dies.
-  - This forces the player to remember previous paths and avoid repeating mistakes.
-  - The player also has an incentive to make decisions quick to complete the level in the shortest amount of time.
-
-## Win / Lose Conditions
-- **Win (per level):** Reach the exit of the maze with the key.
-- **Lose:** Re-open a previously opened chest.
-
-## Player Controls
-- `W/A/S/D` keys for movement
-- Mouse movement to control camera direction
-- Left click with mouse while facing a chest to "open" chest
-  1. When correct chest with key: gives key right away
-  2. When chest without key: shows that it is the wrong chest
-  3. When chest that has already been opened: game over
-- Automatic progression to next level when the "exit area" is reached
-
----
-
-# Visual Design and Implementation
-
-## Visual Style
-
-The game will have a simple 3D dungeon-like appearance, with each wall being as large as the walkable space, similar to a maze built in Minecraft:
-- Dark environment (dungeon setting)
-- Walls forming a maze
-- Minimal lighting to create atmosphere
-- The player is represented through a **first-person camera** (no visible body)
-
-## Game Elements
-
-| Element        | Description                              | Implementation |
-|----------------|------------------------------------------|----------------|
-| Player         | First-Person View (cannot see oneself)   | Camera object |
-| Maze           | Procedurally generated dungeon layout    | 2D array → 3D meshes |
-| Walls          | Maze boundaries                          | Box meshes |
-| Floor          | Ground surface                           | Plane mesh |
-| Exit           | Goal area (highlighted ground)           | Plane mesh highlighted in yellow |
-| Chests         | Special tracked cells                    | Box mesh |
-| UI             | Score (round count), instructions        | Text overlay |
-
----
-
-## Implementation
-
-![Maze Topview](./maze_topview.png)
-![Maze Topview Annotated](./maze_topview_annotated.png)
-
-### Maze Representation
-The maze will be stored as a 2D array that stores ID corresponding to this:
-- 0 = empty path
-- 1 = wall
-- 2 = not-yet opened chest without key
-- 3 = already opened before chest
-- 4 = chest with key
-- 5 = starting point
-- 6 = exit
-
-This grid will be converted into 3D.
-
----
-
-### Procedural Generation
-
-Each level:
-1. Generate a new maze with walls and empty paths (0s and 1s in the array)
-2. Identify dead-end cells, put chests in them
-3. Make one of the chests the chest with the key
-4. Make another "chest" (dead-end) the exit
-5. Randomly place player in empty path position
-
-These steps will be implemented as a sequence of functions using **functional programming**.
-
----
-
-### Maze Array Logic
-
-States that need to be stored are stored in the level array (whether chest has been opened, whether the chest is the chest with the key).
-
-- The game will store opened chests by turning the value in the array to 3.
-- When the player opens a chest marked with 3, the game over screen shows.
-- When the player reaches an "exit" space WITHOUT the key, the player is told to find the key first.
-- When the player reaches an "exit" space WITH the key, the player proceeds to the next level.
-
----
-
-# Challenges and Features
-
-## Expected Challenges
-
-### 1. Procedural Maze Generation
-Generating a valid and solvable maze for every level while keeping it balanced in difficulty.
-
-### 2. Difficulty Scaling
-Designing how the maze size increases over levels without making the game frustrating or too easy. Making the highscore meaningful to incentivize fast gameplay, which turns a boring memorization-based game into something more competitive in order to be fun.
-
-### 3. Player Navigation Experience
-Ensuring that the maze is readable enough for satisfying gameplay without visual confusion.
-
-### 4. Learning to use the Babylon.js
-Learning a completely new thing I have never used before effectively.
-
----
-
-## Features and Concepts Used
-
-The implementation will use the following concepts learned in class:
-
-- **JavaScript arrays** (maze array, chests' state)
-- **Functional programming** (steps involved in maze generation)
-- **Event handling** (keyboard and mouse input)
-- **Using javascript libraries** (using [Babylon.js](https://www.babylonjs.com/))
-- **Working with real-time** (stopwatch system for high score)

PROPOSAL_20240935.md

@@ -0,0 +1,82 @@
+# My proposal
+
+My name is Makhabbat, and I am a sophomore at KAIST doing my Bachelor's degree in Industrial Design (ID: 20240935). The URL to the forked repository: [git.prototyping.id](https://git.prototyping.id/20240935/homework5).
+
+<!-- I want to make atypical infinite runner game usually made for ADHD children. When I was in China, I had a chance to play ADHD-DTx game made for ADHD children and proven to improve their condition. You can't download or even find information about it outside the research paper, so I wanted to make one for myself, cause I drift a lot and would like to train my attention somehow. 
+This is an extreme multitasking game, requiring you to do various things at once and fast.
+The game has 5 lanes instead of typical 3, when game starts there will be text presented about which things you have to be collecting - various things will be falling along the game so you will have to hit only the ones you were instructed to at the beginning of the game,  also one in a while you will have to pass through 'gates' and you're supposed to pass through the one that is answer to the question given several seconds before, you also have to gather basic awards along the lanes and avoid basic obstacles.
+In the original game that we played, there is an EEG headset that goes along the tablet that records the level of attentiveness to track, however I am thinking it can be just a something that gets reduced when you make too many mistakes. 
+I want to make it using three.js, because my reason for taking this course is to eventually be able to use three.js. -->
+
+# NeuroRunner: A Multitasking Cognitive Training Game 
+
+NeuroRunner is an atypical, **cognitively demanding** _infinite runner_ inspired by digital therapeutics (DTx) designed for children with ADHD.
+In Zhejiang University Summer Program, I had the chance to play a clinically tested ADHD-focused game that significantly improved sustained attention, but the **game isn’t publicly available** and information about it exists only inside [research papers](https://pubmed.ncbi.nlm.nih.gov/41490776/).
+
+<img src="./IMG_9134.jpg" width="45%">
+<img src="./IMG_9135.jpg" width="45%">
+
+This project is my attempt to recreate that idea for myself — as someone who often drifts and wants a way to actively train attention through gameplay.
+The result is an extreme multitasking runner built with three.js, designed to overload and strengthen attentional control, working memory, and task-switching.
+
+# Core Concept
+
+NeuroRunner is not a typical runner with 3 lanes — it uses 5 lanes, faster pacing, and continuous task switching.
+Players must constantly track multiple rule sets at the same time, rewarding precision and penalizing mind-wandering.
+
+The goal is to maintain cognitive engagement.
+
+# Gameplay Description
+
+1. Five-Lane Movement
+
+    - move between 5 horizontal lanes instead of the standard 3.
+    - forces higher spatial attention.
+
+2. Instruction Phase
+
+    At the start of each run:
+
+    - The player is shown a **type of target item they must collect**.
+    - Throughout the game, objects fall randomly on the screen.
+    - Players must collect only the instructed items and avoid irrelevant ones using the **hit putton** on the right.
+
+    This trains selective attention and working memory
+
+3. Cognitive Gate Questions
+
+    Every now and then:
+
+    1. A question appears (simple math or logic).
+    2. Several seconds later, gates along all 5 lanes appears ahead.
+    3. The player must pass through the gate corresponding to the correct answer.
+
+    This trains delayed **recall, task switching, and decision-making under pressure**
+
+4. Rewards & Obstacles
+
+    - Basic pickups that increase score
+    - Standard obstacles that must be avoided
+
+5. Attentiveness Meter
+
+The original DTx game used an EEG headset to track attentiveness in real time.
+
+For this project, I replace that hardware with a mistake-based attentiveness meter.
+The meter decreases when:
+    - You collect wrong items
+    - You miss target items
+    - You pass through the wrong gate
+    - You hit obstacles
+When the meter reaches zero → game over.
+
+This approximates attentional lapse tracking without requiring EEG hardware.
+
+# Library Used
+
+I've been wanting to learn three.js since previous semester, so I want to try learning it, using this project.
+
+# Challenges
+
+Since this is a multitasking game, there will be a lot of things going on at once, I can't even imagien how I am gonna do that. 
+

PROPOSAL_20254499.md

@@ -0,0 +1,120 @@
+# Topic 
+Finding the Best Seat: Cafe - Study Survival Game
+
+**Name:** Jieun Lee  
+**Student ID:** 20254499 
+**My Fork URL:** https://git.prototyping.id/20254499/homework5.git
+
+## 1. Game Overview
+This project is a top-view mini video game set in a cafe.  
+The player controls a student character who wants to stay focused and complete their study session.  
+The goal is to maintain concentration until the study progress reaches 100%, while dealing with moving NPCs, noise, and changing seat conditions.
+
+=============================================================================
+
+## 2. Game Mechanics
+# 2.1 what does the user have to accomplish?
+The player has to help the character complete their work within a limited time while maintaining a positive focus level.
+
+- Each seat has different conditions such as noise level, proximity to moving NPCs, and overall distractions.
+- NPCs move around the cafe and dynamically affect the player’s focus.
+- The player must continuously decide whether to stay, move to another seat, or take actions to recover focus.
+
+
+# 2.2 How do you win or lose? 
+**Winning condition:**  
+The study progress reaches 100% (visualized as a progress bar).
+
+**Losing condition:**  
+The focus level reaches 0, and the character gives up and leaves the cafe.
+
+
+
+# 2.3 What type of interactions are possible?
+- Move to another seat with arrow keys
+- Buy a drink or snack for a temporary focus boost
+- Avoid noisy or crowded zones
+- Respond to environmental changes caused by NPC movement
+
+=============================================================================
+
+## 3. Visual Style and Game Elements
+A top-view cafe layout with tables, seats, counter, entrance, and moving NPCs.
+
+# 3.1 Main elements
+Player
+NPC customers
+Seats
+Focus meter
+Timer
+Drink counter / item zone
+UI text for score, level, and status
+
+# 3.2 Visual tone
+Simple 2D shapes and icons
+Readable colors to distinguish quiet seats, noisy areas, and interactable places
+Cute but minimal design for clarity
+
+# 3.3 reference images
+<img src="./ref1.png" width="45%">
+<img src="./ref2.png" width="45%">
+<img src="./ref3.jpg" width="45%">
+
+=============================================================================
+
+## 4. Implementation Plan
+# 4.1 Conditions
+if (gameState === "start") : Shows the start screen
+if (gameState === "play") :	Runs the main gameplay
+if (focus <= 0)	: Triggers game over when focus reaches 0
+if (workProgress === 100 && focus > 0) : Winning condition
+
+# 4.2 Variables (not finalized yet!)
+- 'focus'
+- 'Distraction'
+- 'timer'
+- 'gameState'
+- 'currentSeatIndex'
+- etc..
+
+# 4.3 Loops
+I will use loops to:
+- update all NPCs,
+- draw all seats,
+- and check nearby distractions.
+
+# 4.4 Arrays and Objects
+I will store:
+- NPCs in an array,
+- seats in an array of objects.
+    -> Each seat object will include information such as position, distraction level 
+
+# 4.5 Classes
+- 'Player' class
+- 'NPC' class
+
+=============================================================================
+
+## 5. Features Learned in Class
+This project will clearly use several programming elements learned in class:
+- basic p5.js drawing setup (e.g., rect(), ellipse())
+- conditionals
+- variables
+- loops
+- functions
+- arrays
+- objects
+- classes
+
+=============================================================================
+
+## 6. Main Challenges
+- Implementing the overall system itself will be a challenge as a beginner. Since it requires combining multiple elements such as movement, NPC behavior, and focus management into a cohesive game.
+- Balancing the game difficulty
+NPC movement and focus decrease should feel challenging but not unfair.
+- Making the cafe environment readable
+The player should understand which seats are better or worse without too much confusion.
+- Creating simple but believable NPC movement
+NPCs should make the cafe feel alive while still being manageable in code.
+- Designing a focus system that is easy to understand
+The focus meter should clearly reflect the effect of noise, movement, and drink items.