Movimientos Oscilatorios

Simulaciones de varios fenómenos oscilatorios.
Explorar la documentación »

Ver Aplicación · Reportar Error · Sugerir Funcionalidad

Tabla de Contenidos

• Acerca del Proyecto
• Construido Con
• Arrancando
  • Prerrequisitos
  • Instalación
• Estructura del Proyecto
  • Componentes
  • Constantes
  • Imagenes
  • Lib
  • Pages
  • Public
• Documentación
• Roadmap
• Contribuir
• Aprender Más

Acerca del Proyecto

Este proyecto intenta facilitar el aprendizaje de algunos temas de la física ondulatoria. Con el se espera que los estudiantes del curso tengan una herramienta útil para complementar sus estudios.

Construido Con

Este proyecto hace uso de numerosas librerias open source (codigo fuente libre/abierto), especializadas para entornos Web/JavaScript.

• NextJS Es un Framework encima de ReactJS que permite crear páginas y aplicacioens web de una manera ágil y estandarizada, y no requiere de mucha configuración.
• ReactJS Es la librería JavaScript más popular para constuir interfaces de usuarios. Fue creada por un equipo de desarrolladores en facebook y su código fue liberado en el 2013. Es la librería que usan gigantes de la tecnología como Facebook, Twitter, Instagram, Netflix, Whatsapp Web, Dropbox y Tesla para sus sitios web.
• JavaScript Es unos de los lenguajes de programación más popoulares de los últimos años, se emplea para crear aplicaciones y sitios web, servidores web como expressjs, bases de datos como mongodb y otras tecnolgoías.
• HTML Es un lenguaje markup que se usa para crear componentes básicos en la web. Como lo es un enlace: <a href='http://google.com/'>google</a>
• CSS Es un lenguaje que permite describir la presentación visual de documentos HTML. Agregar color, tipos, tamaños y estilos de fuentes y animaciones son cosas que se pueden cambiar con CSS.
• Canvas API Es un elemento de HTML5 que permite dibujar gráficos en un navegador web.
• Katex Es una libreria que permite mostrar texto con una composición tipográfica tipo texto matemático.
• TailwindCSS Es una libreria de utilidades CSS.
• Bulma Es una librería de componnentes CSS/HTML.

Arrancando

Primero, debemos obtener una copia del repositorio. Lo podemos clonar o descargar. Para ello, debemos hacer click en el botón verde que dice "Clone or download". La opción más fácil es "Download ZIP", pero muchos beneficios se obtinenen al clonar el repositorio usando GIT. Para mas información acerca de git y como clonar un repositorio ir al siguiente enlace.

Prerrequisitos

Dedebos descargar e instalar nodejs y npm en nuestro computador. Para ver un tutorial de como instalar estas dos herramientas ver este enlace. NodeJS es un un entorno de JavaScript que no necesita un navegador para ejecutarse. Es usado para crear servidors web y herramientas de desarrollo que hacen más fácil la creación de software usando JavaScript. Npm (Node Package Manager) por su parte es un administrador de librerias hechas en nodejs y se usa para instalar dependencias en proyectos de JavaScript.

Instalación

Una vez estén instalados nodejs y npm, se podrá continuar con la instalación de las dependencias del proyecto y posteriormente su ejecución localmente. Para esto podemos ir a la raíz del proyecto, donde se encuentre el archivo package.json, y estando en este directorio, en una terminal, ejecutar npm install. Este comando instalará las dependencias del proyecto. Una vez haya completado la instlación, podemos arrancar el proyecto:

npm run dev

Abrir http://localhost:3000 en el navegador para ver los resultados.

Se puede comenzar a editar los archivos del proyecto. La aplicación se actualizará con los cambios a medida que se editen los archivos.

Estructura Del Proyecto

componentes
   |-- ControlesSimulacion
   |   |-- index.jsx
   |-- FormulaMatematica
   |   |-- index.jsx
   |-- VelocidadAnimacion
   |   |-- index.jsx
   |-- Navbar
   |   |-- index.jsx
   |-- MovimientoArmonicoSimple
   |   |-- ControlesVariables.jsx
   |   |-- Formulas.jsx
   |   |-- TextoAyuda.jsx
   |   |-- ValoresCalculados.jsx
   |   |-- index.jsx
   |-- MovimientoAmortiguado
   |   |-- ControlesVariables.jsx
   |   |-- Formulas.jsx
   |   |-- ValoresCalculados.jsx
   |   |-- ValoresPredefinidos.jsx
   |   |-- index.jsx   
constantes
   |-- index.js
imagenes
   |-- clonardescargar.png
   |-- controlessimulacion.png
   |-- controlesvelocidad.png
   |-- proyecto.png
lib
   |-- gtag.js
pages
   |-- 404.jsx
   |-- _app.js
   |-- index.js
   |-- movimiento-armonico-simple
   |   |-- index.jsx
   |-- movimiento-sobre-amortiguado
   |   |-- index.jsx
   |-- styles.scss
public
   |-- favicon.ico
   |-- iconoresorte.png
package.json
README.md

Documentación

📁componentes

ControlesSimulacion

Contiene un componente reutilizable con aciones para inciar, pausar y parar la una simulación.

FormulaMatematica

Contiene un componente reutilizable que permite representar texto con notacion tipo LaTeX:

VelocidadAnimacion

Contiene un componente reutilizable que permite cambiar la velocidad de la animación.

Navbar

Contiene el componente que describe como se debe ver la barra de navegación. Por el momento solo contiene el logo de un resorte, peroa medida que el proyecto avancé se puede expandar.

MovimientoArmonicoSimple

├── MovimientoArmonicoSimple
    ├── ControlesVariables.jsx 
    ├── Formulas.jsx
    ├── TextoAyuda.jsx
    ├── ValoresCalculados.jsx
    └── index.jsx

ControlesVariables

Contiene los inputs de amplitud, masa, constante del resorte y fase incial.

Fórmulas

Contiene las formulas que aplican para el movimiento armónico simple.

TextoAyuda

Contiene texto sobre el uso de '.' en vez de ',' como separador decimal.

ValoresCalculados

Contiene los valores en tiempo real de tiempo, frecuencia, periodo, posición, velocidad, aceleración, fuerza, frecuencia angular y energía.

index.jxx

Este archivo contiene toda la lógica para mostrar los valores y actualizar la animiación. Es el corazón de la simulación.

MovimientoAmortiguado

├── MovimientoAmortiguado
    ├── ControlesVariables.jsx
    ├── Formulas.jsx
    ├── ValoresCalculados.jsx
    ├── ValoresPredefinidos.jsx
    └── index.jsx

ControlesVariables

Contiene los inputs de amplitud, masa, constante del resorte y constante de viscocidad.

Fórmulas

Contiene las formulas que aplican para el movimiento amortiguado.

ValoresCalculados

Contiene los valores en tiempo real de tiempo, frecuencia, periodo, posición, velocidad, fuerza, frecuencia angular y energía.

ValoresPredefinidos

Contiene valores predefinidos de amplitud, masa, constante del resorte y constante de viscocidad para cargar los diferentes tipos de amortiguaciones.

index.jxx

Este archivo contiene toda la lógica para mostrar los valores y actualizar la animiación.

📁constantes

Contiene las constantes que se usan a largo de la simulación.

constantes
 |-- index.js

Este archivo export la constante de PI y 2PI. En vez de referenciar a PI con Math.PI o a 2PI con Math.PI * 2, declaramos dos constantes:

const PI = Math.PI;
const PI2 = Math.PI * 2;

Y las exportamos. Este archivo puede ser más util a media que se agreguen más simuladores y sean necesarias mas constantes.

📁imagenes

Contiene imagenes usadas en la documentación del proyecto.

imagenes |-- clonardescargar.png |-- controlessimulacion.png |-- controlesvelocidad.png |-- proyecto.png

📁lib

Contiene el código para incorporar google analytics al proyecto y así tener una mejor idea del uso y las visitas que tiene el sitio web.

lib
 |-- gtag.js

📁pages

En este directorio se declaran las rutas que tiene la aplicación web. Si se crea un archivo o directorio con un nombre separado por -, los usuarios podrán navegar a esta ubicación añadiendo este texto a la url del sitio https://fisica.app/. También se guardan otros archivos de uso comun por todas las páginas del sitio. Dentro de este directorio tenemos varios elementos:

|-- 404.jsx
|-- _app.js
|-- index.js
|-- movimiento-armonico-simple
|   |-- index.jsx
|-- movimiento--amortiguado
|   |-- index.jsx
|-- styles.scss

404.jsx

Si el usuario navega a una ruta que no existe, se mostrará el contenido de este archivo por defecto.

_app.js

En este archivo se incorporan el modulo de google analitycs y archivos de estilos css.

index.js

Contiene la declaración de los components que permite que el usuario pueda visitar los diferentes simuladores.

movimiento-armonico-simple

Es la ruta declarada para el simulador de movimiento armónico simple. Con esto el usuario puede visitar https://fisica.app/movimiento-armonico-simple.

movimiento-amortiguado

Aplica lo mismo dicho arriba.

styles.scss

Contiene las librerias de CSS y declaraciones personalizadas que modifican la presentación de la aplicación, sin esto no se vería tan "bonita".

📁public

Contiene los archivos (imagenes y otros) que se quieren hacer públicos.

📁package.json

Contiena una lista de las librerias necesarias para ejecutar este proyecto.

📁README.md

Contiene este mismo texto que se está leyendo. Github Markdown Language

Roadmap

Ruta de posibles y futuras funcionalidades

Aprender Más

Para aprender más acerca de desarrollo web y las tecnologías usadas en este proyecto, visitar los siguientes enlaces: