Merge pull request 'main' (#13) from 20265367/homework5:main into main

Reviewed-on: #13

PROPOSAL_20265367.md

@@ -0,0 +1,175 @@
+ # Game Proposal | Graphic Puzzle Game
+
+- **Name**: Suhyun Lim
+- **Student ID**: 20265367  
+- **Repository URL**: https://git.prototyping.id/20265367/homework5.git
+
+## 1. Game Overview
+
+This project proposes an educational puzzle game designed to improve the perceptual sensitivity of beginner designers.  
+The game focuses on enhancing the player's ability to recognize subtle visual differences in composition, alignment, typography, and graphic details.
+
+The game is structured into two rounds, each targeting a different aspect of visual literacy.
+
+-  **Round 1: Tile Sliding Composition Puzzle**  
+  The player rearranges fragmented image tiles to reconstruct the original reference design.
+
+-  **Round 2: Typeface Matching Challenge**  
+  The player identifies and connects four matching pairs of alphabet letters that belong to the same font family.
+
+The broader purpose of the game is not only entertainment, but also the cultivation of observational skills essential to graphic design practice. Through repeated play, users are expected to improve their ability to detect formal inconsistencies and typographic nuances.
+
+The player wins by clearing both rounds within the time limit or target score. The player loses if time expires or too many mistakes are made.
+
+
+<p align="center">
+  <img src="IMG_5367_1.png" width="800">
+</p>
+
+---
+
+## 2. Game Mechanics
+
+The player interacts through **mouse clicks** and **dragging gestures**.
+
+| Action | Description |
+| :--- | :--- |
+| **Slide Tile** | Click or drag adjacent tiles to reconstruct the target image. |
+| **Compare Reference** | Observe the reference design and identify misplaced visual fragments. |
+| **Select Letter** | Click two letters to attempt a font match. |
+| **Connect Pair** | Successfully identify four correct font pairs. |
+| **Hint Use** | Optional hint reveals one correct move with score penalty. |
+
+
+### Round 1: Tile Sliding Puzzle
+
+The player is shown a target composition (poster, layout, or logo-based image) and a shuffled tile board.
+
+The objective is to restore the original arrangement by sliding tiles into the empty space.  
+This round trains:
+
+- spatial organization awareness  
+- balance and hierarchy recognition  
+- sensitivity to alignment and negative space
+
+
+### Round 2: Typeface Pair Matching
+
+The player is shown multiple alphabet characters rendered in different fonts.
+
+The objective is to identify four pairs of letters that share the same typeface characteristics.
+
+Examples of recognition cues include:
+
+- serif vs sans-serif  
+- stroke contrast  
+- terminal shape  
+- x-height proportion  
+- geometric vs humanist construction
+
+This round trains typographic discrimination and detail recognition.
+
+---
+
+## 3. Core Systems
+
+### 3.1 Puzzle Board System (Array-based Grid Logic)
+
+The tile puzzle board will be implemented as a two-dimensional array.
+
+Each tile object stores:
+
+- currentRow  
+- currentCol  
+- targetRow  
+- targetCol  
+- imageFragment  
+- movable
+Where 0 represents the empty slot.
+
+The system checks whether adjacent tiles may move into the empty space and continuously verifies puzzle completion.
+
+
+### 3.2 Typography Matching System (Object Comparison Logic)
+Each letter card is stored as an object in an array.
+
+Main properties:
+
+- character
+- fontFamily
+- selected
+- matched
+- position
+
+[
+ letter: "R",
+ fontFamily: "Helvetica",
+ selected: false,
+ matched: false
+]
+When two cards are selected, the system compares their fontFamily values.
+
+If identical:
+- pair remains visible
+- score increases
+
+If different:
+- cards reset after delay
+- mistake counter increases
+
+
+### 3.3 Scoring and Progression System
+The game rewards speed and accuracy.
+**Score Sources**
+- Puzzle completion bonus
+- Fast matching bonus
+- Consecutive correct streak bonus
+- Remaining time bonus
+**Penalties**
+- Wrong font matches
+- Hint usage
+- Excessive move count
+**Win Condition**
+- Clear Round 1 and Round 2 successfully
+**ose Condition**
+- Timer reaches zero
+- Mistake limit exceeded
+
+### 3.4 Adaptive Difficulty Scaling
+To maintain challenge and learning effectiveness, the game gradually increases difficulty.
+
+**Round 1 Scaling**
+- Grid size expands: 3×3 → 4×4
+- More visually similar fragments used
+- Consecutive correct streak bonus
+- Less reference preview time
+
+**Round 2 Scaling**
+- Fonts become more visually similar
+- More distractor letters appear
+- Matching time shortens
+
+This system encourages progressive perceptual training.
+
+---
+
+## 4. Educational Value
+This game explores how interactive systems can support design literacy through play.
+Rather than teaching design through lectures alone, it applies procedural learning: users repeatedly engage with perceptual tasks and improve through immediate feedback.
+The project therefore combines entertainment, pedagogy, and visual cognition training in a game format.
+
+---
+
+## 5. References
+- sliding-puzzle.com: https://sliding-puzzle.com/impossible
+
+<p align="center">
+  <img src="IMG_5367_2.png" width="800">
+</p>
+
+
+- Kern Type: https://type.method.ac/
+
+<p align="center">
+  <img src="IMG_5367_3.png" width="800">
+</p>

PROPOSAL_20266142.md

@@ -1,97 +0,0 @@
-# Midterm Project Proposal
-
-**Name:** Samantha Lopez
-
-**Student ID:** 20266142
-
-**Repository:** [https://git.prototyping.id/20266142/homework5.git](https://git.prototyping.id/20266142/homework5.git)
-
-## Inspirations
-
-- [Fireboy and Watergirl:](https://www.coolmathgames.com/0-fireboy-and-water-girl-in-the-forest-temple)  I want similar mechanics to this game minus the multiplayer aspect. More specifically I like how the characters have to manouve around obstacles in order to collect items that then allow the player to move on to the next level.
-- [Gris:](https://www.youtube.com/watch?v=j7tVbyKyggU) I really like the art direction of this game. I want to incoporate a similar theme in my game that regards bringing back color to a gray world. 
-- Art installations: I have visited interactive art installations where individuals are able to interact with visuals via different ways. I would like to somehow translate that feeling to a game. For instance the avatar/charater gives light to the scene as the player moves, similarly to how a LED touch reactive wall would. 
-## Game Mechanics
-
-The player spawns as a glowing little orb in a gray world with its goal being to return color to the world. The goal of each level will be to collect color fragments and each level would progressively give color to the scenes. The color fragments will have to be collected by moving, jumping, falling, etc. it will most likely function as a platformer game. 
-
-### controls 
-
-| Action | Key | 
-|--------|-----|
-| Walk left/right | `← →` or `A D` |
-| Jump| `Space` or ` ↑`|
-|collect fragment | walk into it
-
-### color fragments
-
-there should be like 3-5 color fragments per level. Each collection will add that color to the avatars glow and leave a splash of color around the collection site. The level will automatically clear upon the collection of all fragments by slowly giving the scene color and then transitioning to the next level. 
-
-### Game Obstacles 
-
-A player will have 3 lives. Once all 3 are lost the level restarts, I don't want it to be a rage game so I will not make players lose progress beyond their current level. There will be little spiky gray blocks (entities) that will move around and if they come in contact with the avatar they take away a life. Additionally there could be little tar puddles that are also damaging to the charater. 
-
-### Win and lose logistics
-
-**winning a level** means collecting all fragments in that level. An animation of some sort will play adding the color collected back into the game
-
-**losing a life** will occur when touching an entity or tar puddle. You will restart at spawn but keep collected fragments. 
-
-**Losing all lives** means loosing all 3 lives during a level. This will restart your progress for the current level. 
-
-**Winning the game** will consists of compleating all levels. A full in color world will appear. 
-
-
-## Visuals
-
-The interface would be similar to that of the  afromentioned game, fireboy and watergirl. In terms of the actual game aesthetic, I drew up a quick sketch of what I would want the character, fragments, and entities to look like (This is a very rough and quick sketch of course so it is likely to be further developed). I want the game to feel very indie the more handrawn/handmade and aesthetically pleasing I can make it look the better. I also want to incoporate some kind of storytelling element to the game so little to no text just visuals. 
-
-[Acess my sketches here](https://www.notion.so/Proposal-Sketches-348f941b5e5180be9781e4b7f9e22a51?source=copy_link)
-
-### color language
-
-In the beginning the game will be Monochrome with a lot of cool gray tones. Near color fragments the color of the fragment will glow into the surroudings (this will be implemented based on coding capabilities). After a fragment is collected the avatar will begin to glow that color as each level will be centered around a sigular color. Once a level is complete the color collected will be added to the entire interface. If the player loses all 3 lives during the game the cool grey tones will return. 
-
-### Tentative themes for levels
-
-| color | possible themes|
-|-------|----------------|
-| Red | volcanoes, roses|
-|orange | sunset, oranges|
-|Yellow | sunflowers (debating weather to include yellow...)|
-|Green| Forest, field|
-|Blue | underwater|
-|Purple | night, constellations|
-
-## Ideating the code
-
-- We would need an object that includes the player information and its related actions like moving, jumping and collecting. so something like this maybe?
-  ``` 
-  player{
-    move()
-    jump()
-    collect()
-  }
-  ```
-
-- Objects would also need to be created for platforms, fragments, and levels in a similar manner
-- I anticipate that a lot can be done via P5 and related libraries. 
-  
-## Anticipated Challenges
-
-1. Collisions: a lot of my game would rely in the objects and their positions relative to one another. For instance, once the player touches the fragment it needs to be collected and if the player land on top of a platform it must be able to stand on it otherwise fall. From what I have heard this might need me to implement some sort of gravity and platform collisons which I am unfamiliar with and can be the biggest problem for me. 
-2. Color changing: a large part of my idea contains colors changing and being added to scenes, ideally via animations or transitions. This is an area which I do not have much expereince in and could be tricky to figure out. 
-3. Level design: since I am choosing to create my own game I will have to design all the assets for the game and each level myself which might be difficult but more so time consuming. 
-   
-## Features taught in class I expect to use
-
-- I anticipate that I will most likely utilize p5.js in my project
-- Classes and objects will likely be necessary for interactivity 
-- Arrays for stuff like collecting fragments 
-- Functions for a lot of interactions 
-- Event listeners and keyboard input for controls and gameplay 
-
-
-## Summary
-
-I want to create a platformer game centered around the goal of collecting color fragments to return color to the fictitious world.