Este repositorio contiene una implementación avanzada de un reloj de arena funcional desarrollado en JavaScript puro (Vanilla JS) y HTML5 Canvas API. El proyecto sirve como un caso de estudio práctico para la materia de Graficación, resolviendo problemas de geometría analítica, conservación de masa y renderizado procedural de materiales granulares.
Graficación TecNM Sistemas Computacionales HTML5 Canvas Física de Partículas Curvas de Bézier Ángulo de Reposo Simulación de Fluidos Matemáticas para Gráficos IA Generativa Prompt Engineering
El simulador integra varios conceptos clave del temario oficial de Ingeniería en Sistemas:
- Modelado Geométrico (Unidad 1 y 2): Construcción de primitivas complejas mediante el trazo de vértices dinámicos.
- Curvas y Splines (Unidad 2.3): Implementación de curvas de Bézier Cúbicas para simular la acumulación orgánica de la arena (Campana de Gauss).
- Relleno y Sombreado (Unidad 4.1): Algoritmos de relleno para polígonos convexos y cóncavos en constante transformación.
- Animación Controlada (Unidad 5.4): Motor de animación basado en
requestAnimationFramecon sincronización de tiempo real.
A diferencia de representaciones gráficas simples, este proyecto utiliza un modelo de física granular basado en:
El motor calcula matemáticamente que el área desalojada en el contenedor superior sea idéntica a la acumulada en el inferior. Para esto, utiliza una Búsqueda Binaria que determina el nivel del lecho de arena basándose en el volumen actual.
Se implementó un modelo donde la "picudez" del montículo varía según el tiempo:
-
Fase de Inicio: El montículo es afilado (
$k = 0.40$ ). - Fase de Transición: Interpolación lineal (LERP) de la viscosidad conforme el volumen aumenta.
-
Límite Físico: Estabilización en un ángulo de reposo natural de
$k = 0.15$ .
Las partículas realizan un chequeo de intersección con la superficie matemática de Bézier generada en tiempo real, desapareciendo e integrándose al modelo sólido en el punto exacto de impacto.
- Descarga el archivo
index.html. - Ejecútalo en cualquier navegador moderno.
- Utiliza el Modo Debug (checkbox en el panel) para visualizar las líneas de control y los vectores de colisión.
Este proyecto es un ejercicio de co-creación humana e inteligencia artificial.
- Dirección y Prompt Engineering: Conceptualizado y dirigido por un entusiasta de la ingeniería de sistemas interesado en la divulgación de algoritmos gráficos.
- Desarrollo Lógico: El código y la resolución de las ecuaciones matemáticas fueron generados y refinados por Google Gemini, bajo la supervisión técnica del autor para asegurar el cumplimiento de los principios físicos de graficación.
Este proyecto tiene una licencia MIT. Se invita a estudiantes de ingeniería a analizar las funciones de colisión y la implementación de las curvas de Bézier para sus propios proyectos de fin de curso.