- Descripción del Proyecto
- Inspiración
- Instrucciones del Nivel 1
- Ejemplo en Video
- Tecnologías Usadas
- Contribuciones
- Instalación y Uso
ThotGraph es una aplicación interactiva inspirada en el antiguo Egipto y en el libro "Los Elementos" de Euclides. Concebida como un cruce entre la estética cyberpunk y las raíces geométricas de la civilización egipcia, ThotGraph te permite recrear las proposiciones geométricas euclidianas mediante una interfaz interactiva y visualmente impactante.
Cada nivel corresponde a una proposición de Euclides, y las herramientas disponibles están basadas en los postulados y definiciones que se encuentran en los primeros libros de "Los Elementos". La idea es combinar el rigor matemático de la geometría clásica con una experiencia visual y una narrativa contemporánea.
Este proyecto está inspirado en:
- La geometría práctica egipcia: Recordando cómo los antiguos medían y delimitaban sus tierras, utilizando estacas y cuerdas para definir puntos, líneas y círculos.
- Geogebra: Aunque simplificado, ThotGraph busca proporcionar una plataforma de geometría dinámica, enfocada en la recreación de los principios elementales de Euclides.
- Estética cyberpunk: Los íconos y colores en neón en contraste con un fondo oscuro evocan un entorno moderno, mientras que los elementos clave (círculos, líneas y segmentos) se representan como cuerdas tensadas, haciendo un guiño a las herramientas antiguas.
- Iconografía en arena y neón: Un equilibrio entre lo antiguo y lo moderno.
- Herramientas basadas en los postulados euclidianos: Solo puedes agregar elementos geométricos siguiendo las reglas de Euclides.
- Interfaz dinámica: La "Toolbox" (caja de herramientas) está centrada en la parte inferior, con botones amarillos en forma de triángulo que evoca a las pirámides.
- Elements/Elements.js: Contiene las clases base de los elementos geométricos (puntos, líneas, círculos, segmentos).
- js/Board.js: Se encarga del tablero donde se visualizan las figuras.
- js/Toolbox.js: Controla las herramientas que el usuario puede seleccionar, tales como mover puntos, dibujar círculos, líneas y segmentos.
- levels/lvl1.js: El código que define las condiciones y reglas del primer nivel, basado en la primera proposición de Euclides.
- game.js: Configura el flujo del juego, inicializando el entorno y gestionando la interacción entre los elementos y el tablero.
- index.js: Archivo principal que conecta y ejecuta los scripts.
- phaser.min.js: El motor de juego Phaser se utiliza para gestionar las interacciones y animaciones.
- style.css: La hoja de estilos que define la estética de la aplicación, desde el fondo oscuro hasta los colores de los íconos y figuras geométricas.
En este nivel, aprenderás a construir un triángulo equilátero utilizando dos puntos dados en la interfaz.
-
Inicia el nivel:
- Al entrar, verás dos puntos iniciales colocados en el tablero.
-
Activar el movimiento de los puntos:
- Si deseas mover los puntos iniciales, haz clic en el botón de movimiento (icono con flechas). Esto te permitirá reposicionar los puntos a tu gusto.
-
Crear un círculo o línea:
- Para continuar, debes trazar un círculo, línea o segmento. Selecciona la herramienta en la barra de herramientas y haz clic en ambos puntos para generar la figura correspondiente.
- Ejemplo: Si seleccionas el botón de círculo, haz clic en un punto para fijar el centro, y en el otro para establecer el radio.
-
Dibuja el segundo círculo:
- Repite el mismo proceso anterior, pero esta vez usando el otro punto como centro. Ahora tendrás dos círculos que se cruzan en dos puntos.
-
Coloca el tercer punto:
- Haz clic en el botón de estaca (icono de punto) y selecciona una de las intersecciones de los círculos para colocar el tercer punto.
-
Completa el triángulo:
- Selecciona el botón de línea o segmento y une los tres puntos (los dos originales y el nuevo en la intersección). ¡Felicidades, has creado un triángulo equilátero!
- Este nivel sigue la Proposición 1 de Euclides, donde se traza un triángulo equilátero utilizando dos círculos con radios iguales. El tercer punto se coloca en una de las intersecciones de los círculos y luego se conectan para formar el triángulo.
Puedes probar el nivel en el siguiente enlace: ThotGraph - Nivel 1.
Si quieres ver un ejemplo de cómo dibujar un dodecaedro utilizando la plataforma ThotGraph, puedes ver el siguiente video en TikTok o YouTube:
- Phaser.js: Un motor de juegos en 2D utilizado para gestionar las interacciones dinámicas y las animaciones.
- JavaScript (ES6): El lenguaje principal que controla la lógica del juego y las interacciones geométricas.
- HTML5 y CSS3: Para el diseño visual y la estructura de la aplicación.
- GitHub Pages: Para la publicación y el despliegue del proyecto.
- SVG/Canvas: Para la representación gráfica de los elementos geométricos.
Si te interesa contribuir al desarrollo de ThotGraph, por favor abre un issue o realiza un pull request. ¡Toda aportación es bienvenida! Algunas áreas que necesitan mejora son:
- Nuevos niveles: Implementación de más proposiciones de Euclides.
- Mejoras visuales: Animaciones adicionales o refinamientos en la estética.
- Gamificación: Añadir elementos de retroalimentación o recompensas para mejorar la experiencia de usuario.
-
Clona el repositorio:
git clone https://github.com/tu_usuario/ThotGraph.git