Esta página es una traducción automática. La versión en inglés es la de referencia. Ver en inglés →

◆ 2026 / Obra interactiva basada en gestos · Navegador, MediaPipe Hands

Sophie's Night Sky Adventure

Un juego de constelaciones para exposiciones, adaptado del libro ilustrado infantil de Jonathan Poppele. Los jugadores señalan con un dedo y lo mantienen quieto para conectar estrellas, y las constelaciones que dibujaron visitantes anteriores permanecen en el cielo.

Aviso sobre IA: esta obra puede incluir contenido generado por IA.

Mantén el dedo quieto sobre una estrella para seleccionarla.

La mecánica principal es señalar una estrella y mantenerse quieto.

  • Adapté el libro ilustrado como un juego de constelaciones que se juega con el cuerpo
  • Construido en el navegador con MediaPipe Hands, Canvas y JavaScript puro
  • Diseñé el cielo compartido, donde permanecen las constelaciones de cada visitante

Mi rol

Artista y programador

Cuándo

2026

Basado en

Jonathan Poppele

Construido con

MediaPipe Hands, Canvas, JavaScript puro

Hecho en

USC

Siguiente

Adaptación para visor de RV

La obra

Jugar con gestos.

La adaptación conserva la experiencia central del libro, reconocer un patrón en el cielo nocturno, y la construye en torno al gesto en lugar de la historia del libro. Los jugadores levantan el dedo índice como puntero, lo mantienen sobre una estrella hasta que un anillo se llena y conectan las estrellas en líneas de constelación.

Señalar las estrellas es un gesto familiar, así que lo usé directamente como mecánica. Pedir una pista usa un único gesto más, la palma abierta.

Seis constelaciones están seleccionadas como secuencia: Osa Mayor, Osa Menor, Casiopea, Draco, Cefeo y Andrómeda.

Una ronda

Cada constelación es una ronda contrarreloj, con más tiempo para las más grandes: 55 segundos para Casiopea, 95 para Draco. El jugador selecciona una estrella y luego la estrella con la que se conecta. Una línea correcta se queda en el cielo. Una incorrecta parpadea y quita cinco segundos al reloj.

Tras tres conexiones incorrectas, la palma abierta muestra el contorno de la constelación y un consejo, como empezar por Dubhe y Merak, las dos estrellas guía de la Osa Mayor.

El seguimiento de manos se ejecuta en tu navegador usando la cámara; no se graba ni se transmite nada. Incluye una alternativa con ratón.

La pantalla de título: líneas pálidas de constelaciones trazadas entre estrellas brillantes sobre un cielo casi negro
La pantalla de título, el único lugar donde las constelaciones vienen ya dibujadas. Después, las conectan los jugadores. El juego puede incluir contenido generado por IA.
Gesto

De una mano a un cursor.

El juego se juega con una mano levantada frente a una cámara. Cada fotograma de la cámara pasa a un modelo de seguimiento de manos, MediaPipe Hands, que se ejecuta en el navegador. Detecta hasta dos manos y devuelve 21 puntos por cada una.

SeñalarLa punta del dedo índice, el punto 8, se convierte en el cursor.

Palma abiertaCuatro o más puntas de los dedos por encima de sus nudillos piden una pista.

Los 21 puntos que el modelo de seguimiento de manos devuelve por cada mano: la muñeca y cuatro a lo largo de cada dedo.

El juego lee solo unos pocos de esos puntos. La punta del dedo índice se convierte en el cursor, invertido de izquierda a derecha para que se mueva como espera una persona frente a la pantalla. Para distinguir una palma abierta de una mano que señala, el juego comprueba si cada punta de dedo está por encima de su nudillo.

De un fotograma a una estrella

Fotograma de la cámaraLeído en el navegador, nunca enviado a ningún sitio
Puntos de la mano21 por cada mano, de MediaPipe Hands
Punta del dedoEl punto 8, invertido como en un espejo
Cursor suavizadoAvanza el 15% del recorrido en cada fotograma
Permanencia0.9 segundos al alcance de una estrella la seleccionan
De un fotograma de la cámara a una estrella seleccionada.

La punta del dedo sin procesar tiembla un poco de un fotograma a otro, incluso cuando la mano se mantiene quieta. El cursor sigue una copia suavizada, que avanza el 15 por ciento de la distancia restante en cada fotograma, de modo que se queda quieto cuando la mano lo hace. Con muy poco suavizado nadie puede mantenerse quieto sobre una estrella; con demasiado, el cursor deja de sentirse unido a la mano.

No hay clic. Al alcance de una estrella, un anillo se llena en 0.9 segundos y la estrella se selecciona cuando se cierra. Alejarse reinicia el anillo, y una estrella no se puede seleccionar de nuevo hasta que el cursor la haya abandonado. La duración de la permanencia fue el ajuste más sensible del proyecto: demasiado corta y el juego selecciona estrellas que el jugador solo miró de paso; demasiado larga y mantenerse quieto se apodera de la experiencia.

Pruébalo con un ratón

Una versión simplificada para esta página. El ratón hace de punta del dedo, con el temblor que le añade el seguimiento; el punto pequeño es el punto sin procesar y el círculo es el cursor. Conecta la W de Casiopea, estrella por estrella. Con el suavizado desactivado, el cursor tiembla y el anillo a menudo tiene que empezar de nuevo.
Autoría

Un cielo compartido.

Tras terminar la secuencia seleccionada, el jugador puede dibujar su propia constelación con las mismas estrellas, ponerle nombre y dejarla en el juego.

Los dibujos se guardan en una galería compartida que crece a lo largo de las sesiones y los visitantes, de modo que el cielo muestra las formas dibujadas por todos los que jugaron antes.

Siguiente

Adaptación a RV.

La versión actual usa una pantalla y una cámara. El siguiente paso es una adaptación para un visor de RV.

Apéndice técnico: seguimiento de manos, permanencia y el cielo compartido

El seguimiento de manos en detalle

MediaPipe Hands devuelve coordenadas normalizadas de puntos de referencia; el juego usa el punto 8, invierte su eje x y lo proyecta en la pantalla, y luego lo suaviza con un filtro exponencial. El radio de acierto de una estrella es de 42 píxeles durante el juego y de 60 al dibujar una constelación propia. La palma abierta se detecta cuando al menos cuatro puntas de los dedos están más altas que sus nudillos; mientras está abierta, el cursor se atenúa y la permanencia se pausa.

Constelaciones

Seis están seleccionadas como secuencia: Osa Mayor, Osa Menor, Casiopea, Draco, Cefeo y Andrómeda. Cada una es una lista de posiciones de estrellas y las aristas entre ellas. Las líneas se dibujan solo entre las estrellas que el jugador ha conectado de verdad, en orden, de modo que una constelación a medias se ve a medias y no sirve de pista.

La galería compartida

El dibujo libre escribe una lista de puntos normalizada, un nombre y una marca de tiempo en almacenamiento persistente, con claves que permiten añadir entradas nuevas sin sobrescribir las antiguas. Al cargar, la galería vuelve a leer cada entrada anterior, así que los visitantes posteriores ven más formas que los anteriores. No se guarda nada sobre una persona salvo la forma que dibujó.

Alternativas

Si la cámara falla, se rechaza o no está disponible, una alternativa con ratón toma el relevo con la misma lógica de permanencia, de modo que la pieza sigue funcionando, más despacio, en lugar de mostrar un error.