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

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.

engine/input_mapper.js
// 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).

engine/physics_controller.js
// 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.