Puzzle hexagonal de video e imagen

Aplicación web estática que divide un vídeo o una imagen en piezas hexagonales. Cada pieza muestra un fragmento del medio alineado para formar el mosaico completo. El objetivo es hacer clic en cada hexágono para rotarlo de 60° en 60° hasta que todas las piezas queden con la orientación correcta (múltiplos de 360°). Al completarlo, se muestra el medio completo, confeti y un mensaje de felicitación.

No requiere Node ni build: solo HTML, CSS y JavaScript en el navegador.

Requisitos

• Navegador moderno con soporte para clip-path, <canvas>, vídeo HTML5 y fetch.
• Conexión a Internet si usas Generar IA o fuentes remotas (el CSS importa una fuente de Google Fonts).

Cómo ejecutarla

1. Abre index.html en el navegador (doble clic o arrastrar al navegador).

2. Para cargar vídeos por URL o evitar limitaciones de algunos navegadores con archivos locales, conviene servir la carpeta por HTTP, por ejemplo:

   npx --yes serve .
   

   Luego entra en la URL que indique la herramienta (suele ser http://localhost:3000).

Archivos principales

Otros:

• puzle_inicial.html: ejemplo de puzzle empaquetado en un solo HTML (enfoque más simple, orientado a vídeo).
• Ejemplos/collage1.html … collage4.html: páginas de galería con varios puzzles en rejilla (referencia visual de la función “galería” de la app principal).

Uso rápido

1. Medio de partida (al abrir la app, intenta generar una imagen por IA; si falla, puede usar un vídeo local modelo.mp4 si lo añades en la misma carpeta que index.html).
2. Escribe un prompt y pulsa Generar IA, pega una URL de vídeo o imagen y Cargar URL, o Subir archivo (vídeo o imagen).
3. Elige el tamaño del tablero: 7, 19, 37 o 61 piezas (de 1 a 4 anillos hexagonales).
4. Clic en cada hexágono para rotarlo hasta alinear el contenido.
5. Rueda del ratón sobre el tablero para ampliar o reducir (escala aproximada entre 0.5 y 2).
6. Reiniciar puzzle baraja de nuevo las rotaciones manteniendo el mismo medio.

Funciones extra

• Guardar: acumula en memoria una “instantánea” exportable del puzzle actual (mismo tamaño y medio).
• Descargar puzzle: genera un archivo HTML único con el medio incrustado en Base64 para jugar sin esta carpeta.
• Generar y descargar galería: crea un HTML con rejilla tipo cómic, iframes por puzzle guardado, zoom y control play/pausa en vídeos (donde el navegador lo permita en iframes).

Generación por IA

El botón Generar IA llama por POST al endpoint público:

https://node.proyectodescartes.org/api/ia/image

con modelo zimage y tamaño 1024×1024. Si ese servicio no está disponible o bloquea la petición (CORS, red, etc.), la app mostrará un error o usará el respaldo con vídeo local modelo.mp4 cuando corresponda según el código de script.js.

Detalles técnicos (resumen)

• Vídeo: un elemento <video> oculto alimenta varios <canvas> (un canvas por pieza) en un bucle requestAnimationFrame para dibujar la región correcta del fotograma en cada hexágono.
• Imagen: cada pieza usa un <img> con desplazamiento y object-fit: cover para el mismo efecto de “ventana” sobre la imagen completa.
• Forma hexagonal: clip-path: polygon(...) en .puzzle-piece.
• Victoria: cuando todas las rotaciones son congruentes con 0° módulo 360°.

Créditos

Interfaz y lógica atribuidas en el pie de página a Juan Guillermo Rivera Berrío, con apoyo de asistencia de IA (Gemini) en el mensaje del footer de index.html.

Licencia

No se ha incluido archivo de licencia en el repositorio; añade la que corresponda si publicas el proyecto.