ISD 60504 - FLY ME To THE MOON
A masterclass in interactive computer vision and digital physics.
1. Project Context
A real-time interactive 2-player experience developed for the ISD 60504 curriculum at Taylor's University. The project explores the intersection of computer vision (CV), digital physics, and immersive game design, pushing the boundaries of web-based spatial interaction.
| Role | Creative Developer & UI/UX Designer |
|---|---|
| Stack | JavaScript, p5.js, ml5.js, WebGL |
| Timeline | 4 Weeks |
Core Mechanics
- Player 1 (Expedition): Leverages low-latency hand-tracking via Mediapipe/ML5 to navigate a rocket towards Lunar orbit.
- Player 2 (Intervention): Utilizes vertical hand-tracking gestures to control a defensive UFO, employing logic-based interference.
- Win Condition: Player 1 must maintain 100% capacity to successfully complete the mission.
Technical Architecture
1. Gesture-to-Coordinate Mapping
To ensure low-latency responsiveness, raw webcam input is transformed into a normalized game-space, accommodating mirror-view spatial ergonomics for intuitive control.
// Maps webcam coordinates to mirrored game canvas function getMappedPoint(keypoint) { // Invert X axis for mirror effect let mx = map(keypoint.x, 0, video.width, width, 0); let my = map(keypoint.y, 0, video.height, 0, height); return createVector(mx, my); }
2. Dynamic Kinematics Simulation
The propulsion system follows classical kinetic models, where maximum velocity is dynamically calculated as a function of the vessel's structural integrity (HP).
// Dynamically throttle max speed based on HP MAX_SPEED = 2 * max(0.5, p1Health / 100); // Physics integration loop vel.add(accel); vel.limit(MAX_SPEED); vel.mult(FRICTION); // Decay multiplier: 0.95 pos.add(vel);
3. State-Driven Scene Transitions
Transitions between phases (Lunar Approach vs. Earth Return) are managed via a robust state machine, handling seamless orbit animations and perspective shifts.