Ocean Sweep

A Ubiquitous Computing Project by Jevon Lipsey, Zahara Love, and Brooktie Frogge

Ocean Sweep is a 3D web-based game designed to raise awareness about the ocean pollution crisis. Players control a boat to clean up trash from the sea, but must be careful to avoid harming the local wildlife. The project's goal is to highlight the scale of the pollution problem in an engaging way and inspire players to take real-world action.

Gameplay

• [Objective: Steer your boat through the ocean to collect floating trash items like plastic bags, bottles, and canisters.
• Avoid Wildlife: The ocean is full of animals (turtles, seals, etc.). Colliding with an animal will count as a strike.
• Game Over: You have three lives (strikes). Losing all three will end the game.
• Education: As you play, educational facts about ocean pollution pop up. The game over screen shows your impact, contrasting the pieces you collected with the estimated trillions still in the ocean to emphasize the scale of the problem.

Features

• Real-time 3D Environment: Built with Three.js, featuring a dynamic ocean (using Water.js), skybox, and 3D models for the boat, trash, and animals.
• Boat Physics: Realistic boat movement with acceleration, turning, friction, and bobbing wave physics.
• Dynamic Spawning: Trash and animals dynamically spawn and despawn around the player.
• Educational Content: Includes a "What You Can Do" screen with actionable advice and links to organizations like The Ocean Cleanup and Oceana.

Controls (Ubiquitous Computing)

This game is designed to be played with a combination of physical hardware and AI-powered gestures.

Action	Primary Control	Keyboard Fallback
Steer Boat	Micro:bit Steering Wheel: Tilt the custom-built wheel. The micro:bit's accelerometer data is used for steering.	A / D or ← / →
Move Forward	Micro:bit Button B: Press and hold Button B on the wheel.	W or ↑
Brake/Reverse	(No physical button)	S or ↓
Collect Trash	AI Gesture Control: Make a "Grab" gesture at your webcam, detected by Google MediaPipe Hands.	Spacebar
Change Camera	Micro:bit Button A: Press Button A to toggle between 1st and 3rd person views.	C

Technology Stack

• 3D Graphics & Game Logic: Three.js
• Gesture Recognition: Google MediaPipe Hands
• Hardware Interface: BBC micro:bit connected via the Web Serial API.
• Web Server: Flask (Python)
• Frontend: HTML5, CSS, JavaScript

How to Run

1. Clone the Repository:

   git clone [https://github.com/jevonlipsey/ocean_sweep.git](https://github.com/jevonlipsey/ocean_sweep.git)
   cd ocean_sweep

2. Install Dependencies:
   • Ensure you have Python 3 installed.
   • Install Flask:

     pip install Flask

3. Run the Server:

   python app.py

4. Play the Game:
   • Open your browser (Chromium recommended for Web Serial and Camera support) and go to http://127.0.0.1:5000/.
   • For Micro:bit: Connect your micro:bit via USB and click the "Connect Microbit" button on the screen.
   • For Gestures: Allow the browser to access your webcam when prompted.