Back to projects
Experience from webcam calibration to gaze-controlled arcade gameplay

Operated · Demo public

AJOU ARCADE

Four gaze-controlled arcade games built in three weeks to catch attention at an outdoor university fair.

Built four webcam eye-tracking arcade games to attract visitors at a university club fair. The flow connected gameplay to applications, and I updated the service in response to on-site feedback.

Period
2026.02
Ownership
Gaze input · four games · deployment · field fixes
Team
Solo
Repository
Public repository

Links

DemoGitHub

An experience that earned attention before explanation

At a university fair full of competing booths, a flyer could not explain the club's new direction quickly enough. We needed an experience that would make passersby stop, try it for themselves, and then consider applying.

I chose a visual hook that was clear from a distance: playing with your eyes in the browser, with nothing to install.

From gaze to play

From a visitor looking at the screen to finishing a game and opening the application form

  1. 01

    Webcam

    MediaPipe reads face and eye position

  2. 02

    Stabilize movement

    Calibration and smoothing

  3. 03

    Gaze and blink

    Dwell and blink controls

  4. 04

    Four games

    React game loop

  5. 05

    Result to application

    Opens the application form

The frame drops caused by updating state every frame

The first implementation updated React state for every face-landmark result, causing UI renders to compete with Canvas game drawing and drop frames.

MediaPipe coordinates arrive frequently, while UI state such as score, game over, and selection does not need to change every frame. Outdoor light and face position also added small fluctuations.

I stored the latest coordinates in refs and drew the Canvas inside requestAnimationFrame. Only events that changed screen structure—such as score or a confirmed selection—entered React state.

  • Mapped gaze to screen coordinates through nine-point calibration.
  • Filtered small movement with smoothing, deadzones, and dwell.
  • Implemented EAR-based blink input and an operator reset.

This input path ran four web games at the outdoor booth, including a same-day redeploy for lighting conditions. The same games remain available in the public demo.

High-frequency sensor data and UI state that changes screen structure need different update cycles.

AJOU ARCADE game result screen

Redesigning the game screen under direct sunlight

The retro dark interface was readable indoors, but strong sunlight and glare made instructions and game content difficult to see outside. Each visitor changeover also required returning the game to a clean starting state.

The fair was already running, so there was no time to replace the camera model or rebuild the games. I also needed to separate gaze-recognition accuracy from the simpler problem that people could not read the screen.

Instead of changing recognition parameters without evidence, I added a bright theme, shorter guidance, idle reset, and operator reset, then redeployed the site that day.

  • Made light and dark themes switchable.
  • Shortened the start guide and reset flow for the next visitor.
  • Applied field feedback and redeployed through Vercel.

The booth continued operating with the revised version and served all four games through the event. I did not quantify before-and-after readability or queue time.

I learned to validate lighting, queue flow, and operator controls—not only the algorithm—in the real deployment environment.

Visitors trying the gaze-controlled arcade at the live outdoor booth
The outdoor university club fair while visitors moved between booths

All four games remain available in the public demo. Compared with the same recruitment stage in the previous semester, applications increased from 9 to roughly 150, with about 50 people ultimately joining.

I now design for venue lighting, queue flow, and operator resets alongside algorithmic correctness.

The applicant increase also reflects audience, staffing, prizes, and promotion changes; it is not a game-only effect.

  • Test browser and camera compatibility
  • Add gaze-logic unit tests and game regression tests