◆ 2026  /  Gesture-based interactive work · Browser, MediaPipe Hands

Sophie's Night Sky Adventure

A constellation game for exhibitions, adapted from Jonathan Poppele's children's picture book. Players point with a finger and hold still to connect stars, and the constellations earlier visitors drew stay in the sky.

AI disclaimer: this work may include AI-generated content.

Hold still over a star to select it.

The main mechanic is pointing at a star and holding still.

  • Adapted the picture book as an embodied constellation game
  • Built in the browser with MediaPipe Hands, Canvas and vanilla JS
  • Designed the shared sky, where every visitor's constellations stay

My role

Artist and programmer

When

2026

After

Jonathan Poppele

Built with

MediaPipe Hands, Canvas, vanilla JS

Made at

USC

Next

Adaptation for VR headset

The work

Playing with gesture.

The adaptation keeps the book's central experience, recognising a pattern in the night sky, and builds it around gesture instead of the book's story. Players raise an index finger as a pointer, hold it over a star until a ring fills, and connect the stars into constellation lines.

Pointing at stars is a familiar gesture, so I used it directly as the mechanic. Asking for a hint uses one other gesture, an open palm.

Six constellations are curated as a sequence: Ursa Major, Ursa Minor, Cassiopeia, Draco, Cepheus and Andromeda.

A round

Each constellation is a round against the clock, with more time for the larger ones: 55 seconds for Cassiopeia, 95 for Draco. The player selects a star, then the star it connects to. A correct line stays in the sky. A wrong one flashes and takes five seconds off the clock.

After three wrong connections, an open palm brings up the outline of the constellation and a tip, such as starting from Dubhe and Merak, the two pointer stars of Ursa Major.

Hand tracking runs in your browser using the camera; nothing is recorded or transmitted. A mouse fallback is built in.

The title screen: pale constellation lines drawn between glowing stars across a near-black sky
The title screen, the only place where the constellations are pre-drawn. After this, players connect them. The game may include AI-generated content.
Gesture

From a hand to a cursor.

The game is played with a hand held up to a camera. Each frame from the camera goes to a hand-tracking model, MediaPipe Hands, which runs in the browser. It finds up to two hands and returns 21 points for each.

PointingThe tip of the index finger, point 8, becomes the cursor.

Open palmFour or more fingertips held above their knuckles ask for a hint.

The 21 points the hand-tracking model returns for each hand: the wrist, and four along each finger.

The game reads only a few of those points. The tip of the index finger becomes the cursor, flipped left to right so that it moves the way a person expects when facing the screen. To tell an open palm from a pointing hand, the game checks whether each fingertip sits above its knuckle.

From a frame to a star

Camera frameRead in the browser, never sent anywhere
Hand points21 for each hand, from MediaPipe Hands
FingertipPoint 8, flipped like a mirror
Smoothed cursorMoves 15% of the way each frame
Dwell0.9 seconds within reach of a star selects it
From a camera frame to a selected star.

The raw fingertip shakes a little from frame to frame, even when the hand is held still. The cursor follows a smoothed copy, moving 15 per cent of the remaining distance each frame, so it stays put when the hand does. With too little smoothing nobody can hold still on a star; with too much the cursor no longer feels attached to the hand.

There is no click. Within reach of a star, a ring fills over 0.9 seconds and the star is selected when it closes. Moving away resets the ring, and a star cannot be selected again until the cursor has left it. The length of the dwell was the most sensitive setting in the project: too short and the game selects stars the player only glanced at, too long and holding still takes over the experience.

Try it with a mouse

A simplified version for this page. The mouse stands in for the fingertip, shaken the way tracking shakes it; the small dot is the raw point and the circle is the cursor. Connect the W of Cassiopeia, star by star. With smoothing off, the cursor shakes and the ring often has to start again.
Authorship

A shared sky.

After finishing the curated sequence, a player can draw their own constellation with the same stars, name it and leave it in the game.

The drawings are saved to a shared gallery that builds up across sessions and visitors, so the sky shows the shapes drawn by everyone who played before.

Next

VR adaptation.

The current version uses a screen and a camera. The next step is an adaptation for a VR headset.

Technical appendix: hand tracking, dwell, and the shared sky

Hand tracking in detail

MediaPipe Hands returns normalised landmark coordinates; the game uses landmark 8, mirrors its x axis and maps it to the screen, then smooths it with an exponential filter. The star hit radius is 42 pixels in play and 60 when drawing a constellation of your own. An open palm is detected when at least four fingertips are higher than their knuckles; while it is open the cursor dims and dwell is paused.

Constellations

Six are curated as a sequence: Ursa Major, Ursa Minor, Cassiopeia, Draco, Cepheus and Andromeda. Each is a list of star positions and the edges between them. Lines are drawn only between stars the player has actually connected, in order, so a half-finished constellation looks half-finished and does not act as a hint.

The shared gallery

Free drawing writes a normalised point list, a name and a timestamp to persistent storage, keyed so that new entries are added without overwriting old ones. On load the gallery reads back every earlier entry, so later visitors see more shapes than earlier ones. Nothing about a person is stored except the shape they drew.

Fallbacks

If the camera fails, is refused or is unavailable, a mouse fallback takes over with the same dwell logic, so the piece still works, more slowly, instead of showing an error.