🧩 README.md

🎱 Graphics Programming Coursework 1 — 2D Pool Game Simulation

This project is a physics-based billiards simulation built using p5.js and Matter.js.
It demonstrates collision physics, real-time motion, and interactive gameplay mechanics through object-based rendering and force application on a cue ball.

🧠 Overview

The goal of this coursework was to simulate a simplified version of a pool game using a physics engine.
The application incorporates rigid-body dynamics, collision handling, friction, and restitution — all managed via the Matter.js physics engine.

Users can apply force to the cue ball using mouse input, interact with game elements, and score points by potting red balls into designated pockets.

---

Video Demonstration

https://youtu.be/AGVNoUzuT2w

🕹️ Key Features

Feature	Description
Physics Engine	Built with Matter.js for accurate ball collisions and motion.
Cue Ball Mechanics	Apply directional force with mouse input to strike the cue ball.
Scoring System	Detects when balls enter holes and updates the score dynamically.
Collision Detection	Uses Matter.SAT.collides() to determine pocket-ball interactions.
Game Reset	A “Reset” button reinitializes the entire table and game state.
Custom Table Design	Includes walls, holes, and table textures simulated with rectangles and circles.
Real-Time Rendering	Smooth animation and frame updates using Engine.update() and p5.js draw loop.

---

⚙️ Technologies Used

Component	Technology
Language	JavaScript
Graphics Library	p5.js
Physics Engine	Matter.js
Environment	Browser-based interactive canvas

---

🧮 Core Logic

🎯 Ball Generation

• Red balls and a white cue ball are created using Bodies.circle() from Matter.js.
• Each ball includes properties such as restitution (bounciness) and friction.

⚡ Cue Ball Force Application

• Mouse input calculates direction and applies a force vector to the cue ball using:

  Body.applyForce(cueBall, {x: cueBall.position.x, y: cueBall.position.y}, appliedForce);

💥 Collision Detection

• Detects ball-pocket collisions via:

  Matter.SAT.collides(balls[i], holes[j])

• When a collision occurs, the ball is removed, and the score increments.

🧱 Wall & Table Setup

• Static boundary walls are generated using Bodies.rectangle() to contain the motion.
• Holes are simulated using circular bodies at each corner and side midpoint.

---

🧩 Controls

Control	Function
Mouse Click	Apply directional force to cue ball.
Reset Button	Reloads the table and regenerates all balls.

---

🏗️ Setup & Run Instructions

1. Clone this repository:

   git clone https://github.com/BryanLoooo/Graphics-Programming-Pool-game-web-application.git
   cd Graphics-Programming-Coursework1

2. Open the project folder in VS Code or your preferred editor.

3. Launch a local server (e.g., using Python or VSCode Live Server):

   python -m http.server

4. Open your browser and navigate to:

   http://localhost:8000
   

---

🧾 Learning Outcomes

• Understanding of physics-based animation in 2D graphics.
• Implementation of rigid body dynamics and force vectors.
• Experience integrating p5.js with Matter.js for interactive graphics.
• Developed knowledge in collision detection, restitution, and friction handling.

---