Proyecto de Programacion II

Simulador de Dinamica y Cinetica en 3D

Una herramienta interactiva para la visualizacion y comprension de los principios fundamentales de la mecanica clasica mediante simulacion computacional en tiempo real.

0 Dimensiones
0 FPS
∞ Posibilidades
Ver Documentacion Ver Galeria
Resumen Ejecutivo

Proposito del Proyecto

Una herramienta educativa que transforma conceptos abstractos de fisica en experiencias visuales interactivas.

🎯

Objetivo

Desarrollar una aplicacion web interactiva que permita visualizar y manipular variables fisicas en un entorno tridimensional, facilitando la comprension de conceptos abstractos de la dinamica.

💡

Innovacion

Integracion de graficos 3D en tiempo real con calculos fisicos precisos, ofreciendo una experiencia inmersiva que conecta la teoria matematica con la visualizacion espacial.

🎓

Impacto Educativo

Herramienta disenada para estudiantes de fisica y programacion, permitiendo experimentar con leyes de Newton, conservacion de energia y momentum de forma interactiva.

Metodologia

Proceso de Desarrollo

Cinco fases de desarrollo que llevaron la idea a una simulacion funcional.

01
Fase Inicial

Analisis de Requerimientos

Definicion de los parametros fisicos a simular: fuerza, velocidad, aceleracion, masa, friccion y gravedad. Establecimiento de requisitos tecnicos para renderizado 3D en navegador.

  • Modelado de ecuaciones de movimiento
  • Determinacion de variables manipulables
  • Especificacion de visualizaciones vectoriales
02
Fase de Diseno

Diseno de Arquitectura

Estructuracion del sistema en tres capas: presentacion (HTML/CSS), logica de fisica (JavaScript) y renderizado 3D (Three.js). Implementacion del patron de bucle de animacion para calculos en tiempo real.

UI Layer HTML / CSS
Physics Engine JavaScript
Render Engine Three.js
03
Fase de Desarrollo

Implementacion del Motor Fisico

Codificacion de las ecuaciones diferenciales del movimiento utilizando integracion de Euler. Desarrollo de sistema de colisiones con el plano y restitucion de energia en impactos.

javascript
// Segunda Ley de Newton - Integracion Euler
function updatePhysics(dt) {
  const acc = netForce.divide(mass);
  velocity.add(acc.multiply(dt));
  position.add(velocity.multiply(dt));
}
04
Fase de Integracion

Visualizacion 3D y UI

Creacion de representaciones visuales para vectores de fuerza, velocidad y aceleracion mediante ArrowHelpers. Implementacion de trayectoria dinamica y panel de control con diseno glassmorphism.

Fuerza
Velocidad
Aceleracion
05
Fase Final

Optimizacion y Testing

Validacion de calculos fisicos contra casos teoricos conocidos. Optimizacion de rendimiento para mantener 60 FPS. Pruebas de usabilidad y ajustes de interfaz.

60 FPS Estables
<16ms Frame Time
100% Tests Pass
Stack Tecnologico

Herramientas Utilizadas

Tecnologias modernas de desarrollo web para una experiencia fluida e interactiva.

HTML5

Estructura semantica del simulador y paneles de control. Uso de elementos canvas para renderizado WebGL.

Semantic UI Canvas API

CSS3

Diseno responsive con glassmorphism, animaciones CSS y variables CSS para theming dinamico.

Flexbox/Grid Animations
Core

JavaScript ES6+

Logica de fisica computacional, gestion de estado y manipulacion de graficos 3D en tiempo real.

Modules Classes Vector Math

Three.js

Renderizado 3D basado en WebGL. Gestion de escenas, camaras, iluminacion y geometrias complejas.

WebGL Shaders

Integraciones Adicionales

OrbitControls Navegacion interactiva en espacio 3D
ArrowHelper Visualizacion de vectores fisicos
BufferGeometry Optimizacion de trayectorias dinamicas
Fundamentacion Teorica

Principios Fisicos Implementados

Ecuaciones fundamentales de la mecanica clasicas codificadas en el motor de simulacion.

I
F = ma Segunda Ley de Newton

La aceleracion de un objeto es directamente proporcional a la fuerza neta aplicada e inversamente proporcional a su masa. Implementada mediante integracion numerica de Euler.

Implementacion: a = ΣF / m
II
Ek = ½mv² Energia Cinetica

Calculada en tiempo real basandose en la magnitud del vector velocidad. Representa la capacidad del objeto de realizar trabajo debido a su movimiento.

Implementacion: KE = 0.5 · m · v²
III
p = mv Momento Lineal

Magnitud vectorial que describe la cantidad de movimiento. Fundamental para analizar colisiones y conservacion en sistemas cerrados.

Implementacion: p = m · v
IV
Ffriccion = -μv Modelo de Friccion Viscosa

Simulacion de resistencia del medio proporcional a la velocidad. Permite observar la disipacion gradual de energia y el estado de equilibrio terminal.

μ (mu) Coeficiente de friccion ajustable [0-1]

Diagrama de Fuerzas

m
Faplicada
Fgravedad
Ffriccion
Fuerza Aplicada
Fuerza Gravitatoria
Fuerza de Friccion
Creditos

Equipo de Desarrollo

Conoce a los desarrolladores detras de este proyecto academico.

FG

Francisco Garcia

Desarrollador Principal & Fisica C.I. 30.626.299

Responsable de la implementacion del motor fisico, calculos de dinamica y cinetica, asi como la integracion de visualizaciones vectoriales en Three.js.

Fisica Computacional Three.js Algoritmos
FH

Franklin Herrera

UI/UX Designer & Frontend C.I. 31.585.389

Encargado del diseno de interfaz, experiencia de usuario, implementacion CSS avanzada y optimizacion del rendimiento del renderizado.

UI/UX Design CSS3 Arquitectura
Asignatura Programacion II
Institucion UNERG
Semestre 2026-5
Docente Prof. Manuel Leon