RotoTextwiki

Welcome to the RotoText wiki

The feature-by-feature encyclopedia of RotoText, generated from commit dbf2b8f. 7 articles.

About RotoText

RotoText is a web application that uses eye tracking and geometric projection to let players align their gaze to solve a Line of Sight puzzle game on their device screen. It detects the user's face and iris from a camera, estimates 3D eye position, and projects that position and game elements onto the screen to create the illusion of depth and motion parallax as the player moves their head. The application supports both desktop and mobile devices by switching between high and low resolution camera modes and adapting settings like device orientation and focal length.

(Full article...)

Eye tracking is the subsystem of RotoText that detects the user's face and estimates the 3D position of their eyes in camera space from video. It uses MediaPipe to detect face landmarks including iris points, then performs geometric calculations to triangulate eye position from the iris size and midpoint. The system supports both high-resolution (1280×720) desktop cameras and standard (640×480) mobile cameras, automatically selecting the appropriate resolution based on device type.

(Full article...)

Did you know...

  • ... that the iris is modeled as a circle with a known diameter (11.7 mm) that appears foreshortened on screen depending on head pose; by measuring both irises and picking the larger one, the system remains robust to head yaw? (Eye tracking)
  • ... that the game progresses through a sequence of 7 levels, each presenting a different shape that the player must align by moving their eye to a solution position, and ends after the last level is solved? (Game engine)
  • ... that computeCorrection() begins by calling projectedQuad() to find the transformed corners of an element, then solves a homography (a 3×3 matrix) that maps the element's original rectangle to those projected corners, and converts the result to a CSS matrix3d() string in column-major order? (Geometric projection)
  • ... that mouse-mode eye distance was locked to the solution distance in the game on 1 October 2026? (Interaction UI)
  • ... that the fetch-assets script, run before development and build, copies WebAssembly files from the MediaPipe npm package into public/mediapipe/wasm/ and downloads the face landmarker model from Google's storage if it does not already exist, storing it at public/mediapipe/face_landmarker.task? (Project infrastructure)

Recently updated

Feature map

flowchart LR
  n0["Device configuration"]
  n1["Eye tracking"]
  n2["Game engine"]
  n3["Geometric projection"]
  n4["Interaction UI"]
  n5["Project infrastructure"]
  n6["Scene rendering"]
  n0 --- n1
  n0 --- n3
  n0 --- n4
  n1 --- n3
  n1 --- n4
  n2 --- n3
  n2 --- n4
  n2 --- n6
  n3 --- n4
  n3 --- n6
  n4 --- n6
  click n0 "/wiki/rototext/wiki/device-configuration/"
  click n1 "/wiki/rototext/wiki/eye-tracking/"
  click n2 "/wiki/rototext/wiki/game-engine/"
  click n3 "/wiki/rototext/wiki/geometric-projection/"
  click n4 "/wiki/rototext/wiki/interaction-ui/"
  click n5 "/wiki/rototext/wiki/project-infrastructure/"
  click n6 "/wiki/rototext/wiki/scene-rendering/"
Each box is an article; a line joins two articles when code in one calls or imports code in the other.

All articles lists every article as text.