Cargando simulación...

### 🖱️ Navega

Zoom con la rueda, arrastra para moverte por el mapa

### ⚙️ Selección

Ctrl+Clic sobre calles o edificios para configurarlos rápidamente

### ⏸️ Controla

Pausa, ajusta la velocidad y observa las métricas en tiempo real

### ✏️ Edita

Activa el modo edición para mover y rotar calles o edificios

### 🌊 Personaliza

Crea curvas en calles, activa intersecciones y visualiza conexiones

### 🏗️ Construye

Diseña tus propios mapas y guárdalos para usarlos después

Inicializando recursos...

##### 📚 Guía del Simulador de Tráfico FLUVI

##### 🖱️ Controles Básicos

- Zoom: Rueda del mouse
- Mover vista: Arrastrar con el mouse
- Agregar/quitar vehículos: Clic en celdas
- Minimapa: Clic para teletransportarse

##### ⚙️ Panel de Control

- Selección rápida: Ctrl+Clic sobre calles o edificios en el canvas
- Menú desplegable: Selecciona objetos manualmente
- Probabilidades: Ajusta generación y cambio de carril
- Aplicar cambios: Botón azul al final

##### ✏️ Modo Edición

- 1. Selecciona una calle o edificio
- 2. Activa "Modo Edición"
- 3. Arrastra el handle azul para mover
- 4. Arrastra el handle verde para rotar
- 5. Guarda o cancela los cambios

##### 🌊 Calles Curvas

- 1. Selecciona una calle
- 2. Activa "Modo Edición"
- 3. Haz clic en "Editar Vértices"
- 4. Presiona `Z` para activar edición de vértices
- 5. Arrastra vértices para crear curvas
- 6. Presiona `Z` nuevamente para desactivar
- 7. Ángulo máximo: ±40° por celda
- 8. Usa "Resetear Vértices" para restaurar

##### ⏸️ Control de Simulación

- Pause/Resume: Detener/continuar simulación
- Paso a Paso: Avanzar frame por frame
- Velocidad: Ajustar frames por segundo
- Generación: % de aparición de vehículos

##### ⏰ Tiempo Virtual

- Cambiar Fecha y Hora: Establece día de la semana (Lun-Dom) y hora inicial (0-23)
- Tiempo avanza automáticamente: 2 segundos virtuales por paso de simulación
- Perfiles dinámicos: El tráfico varía según día y hora

##### 📊 Multiplicadores de Generación

- Configuración por día: Ajusta multiplicadores para cada día de la semana
- Configuración por hora: 24 valores (uno por cada hora del día)
- Rango: 0.0 (sin tráfico) a 3.0 (tráfico muy intenso)
- Presets: Día Laboral, Fin de Semana, Constante, Nocturno
- Cada hora es independiente: 08:00 controla de 08:00 a 08:59

##### 🔗 Conexiones

Tipos de conexiones entre calles:

- 🟢 Verde (Lineal): 1 a 1 entre carriles
- 🟠 Naranja (Incorporación): Varios a uno
- 🟣 Morado (Probabilística): Con probabilidad
- 🔴 Roja: Conexión bloqueada

##### 🏗️ Constructor de Mapas

- Ctrl+Clic: Selecciona calles y edificios directamente en el canvas
- Agregar objetos: Usa los botones para crear calles y edificios
- Modo edición: Arrastra y rota objetos visualmente
- Conexiones: Conecta calles para crear flujo de tráfico
- Guardar/Cargar: Exporta e importa simulaciones como JSON

##### 🅿️ Estacionamientos

- Configuración: Marca edificio como estacionamiento
- Capacidad: Define máximo de vehículos
- Conexiones: Pares de entrada/salida en calles
- Probabilidades: Ajusta entrada/salida por cada hora (0-100%)
- Perfiles: Normal, Oficina, Centro Comercial
- Validación: Previene configuraciones inválidas

##### 💾 Gestión de Escenarios

- Guardar: Exporta configuración completa como JSON
- Cargar: Importa escenarios previamente guardados
- Incluye: Calles, edificios, estacionamientos
- Conexiones: Mantiene todas las conexiones entre calles
- Probabilidades: Preserva configuraciones horarias

##### 📊 Métricas del Simulador

###### 📈 Métricas Principales

- Densidad: % de ocupación de las calles (0-100%)
- Flujo Vehicular: Vehículos/segundo según Q=k×v
- Tasa de Cambio: Crecimiento neto de población (veh/s)
- Velocidad Promedio: % de vehículos en movimiento
- Entropía de Shannon: Diversidad de las 8 transiciones del AC (bits)

###### 📊 Interpretación Inteligente

- 🟢 Óptimo: Máxima eficiencia del sistema
- 🟡 Moderado: Condiciones aceptables
- 🟠 Congestionado: Alta densidad con lentitud
- 🔴 Colapso: Calles paralizadas
- 🔵 Sub-utilizado: Baja ocupación

###### 🛠️ Herramientas Disponibles

- 5 Gráficas en Tiempo Real: Visualiza todas las métricas con Chart.js
- Panel de Estado: Interpretación automática del tráfico con recomendaciones
- Exportar CSV: Descarga historial completo con estadísticas
- Exportar JSON: Formato estructurado con metadata
- Limpiar Métricas: Reinicia el historial de mediciones
- Mapa de Calor: Visualiza densidad por zona geográfica

💡 Tips: Las métricas se actualizan cada 5 frames para optimizar rendimiento. El historial de gráficas muestra últimos 50 puntos, pero el CSV exporta TODAS las mediciones desde el inicio.

##### 📊 Analizador de Métricas Avanzado

Genera visualizaciones profesionales a partir de tus métricas exportadas directamente en el navegador

###### 1 Análisis Temporal

- • Densidad vs Tiempo
- • Flujo vs Tiempo
- • Velocidad vs Tiempo
- • Estados de Tráfico clasificados

###### 2 Diagrama Fundamental

- • Entropía vs Densidad
- • Coloreado por Flujo
- • Mapa de Calor (Día/Hora)

###### 3 Distribuciones

- • Histogramas (Densidad/Flujo)
- • Boxplots comparativos
- • Estadísticas descriptivas

###### 🚀 Cómo Usar

1. Ejecuta una simulación en FLUVI
2. Exporta métricas: "Descargar CSV"
3. Clic en "Analizar Métricas"
4. Carga el archivo CSV exportado
5. Espera el procesamiento (~30-60 seg)
6. Navega entre las 3 pestañas
7. Descarga gráficas (individual o ZIP)

###### 📈 Métricas Calculadas

- • Clasificación de estados del sistema
- • Estadísticas por día de la semana
- • Capacidad crítica del sistema
- • Correlaciones entre variables
- • Detección de eventos anómalos
- • Análisis temporal con tendencias

###### 🔥 Mapa de Calor

Visualización que organiza la densidad promedio en una matriz de: Días de la semana (filas) Horas del día 0-23 (columnas)

Amarillo → Baja densidad de vehículos
Rojo → Alta densidad de vehículos

- • Horas pico: Columnas rojas intensas
- • Patrones semanales: Diferencias entre días
- • Comparativa: Laboral vs fin de semana
- • Valle: Madrugada (tonos claros)

⏱️ Tiempo de procesamiento: Primera carga ~60-90 segundos (inicialización de librerías), cargas posteriores ~5-12 segundos (datos en caché).

##### ➕ Agregar Nueva Calle

Nombre:
El nombre debe contener solo caracteres válidos (letras, números, espacios, guiones y puntos).
Tamaño (celdas):
El tamaño debe estar entre 1 y 2500 celdas.
Máximo: 2500 celdas
Tipo:
Número de Carriles:
El número de carriles debe estar entre 1 y 10.
Máximo: 10 carriles
Posición X:
Requerido.
Posición Y:
Requerido.
Ángulo (°):
Debe estar entre 0 y 360°.
Probabilidad de Generación (%)
La probabilidad debe estar entre 0 y 100.
Ejemplo: 50 = 50%, 100 = 100%. Solo disponible para calles de tipo GENERADOR.
Probabilidad de Cambio de Carril (%)
La probabilidad debe estar entre 0 y 100.
Ejemplo: 2 = 2%, 10 = 10%

##### 🏢 Agregar Nuevo Edificio

###### 📋 Información Básica

Nombre:
Posición X:
Posición Y:
Ancho:
Alto:
Ángulo (°):

###### 🅿️ Configuración de Estacionamiento

Funciona como estacionamiento
Capacidad máxima de vehículos:
Conexiones (Entradas/Salidas):
⚠️ Importante: Las conexiones deben venir en pares (1 entrada → 1 salida). Máximo 10 pares.
La entrada y salida NO pueden estar en la misma celda del mismo carril.
Probabilidades de Entrada/Salida por Hora:
⏰ Configuración: Ajusta las probabilidades para cada hora del día (0-23). Los valores van de 0% a 100%.
🟢 Entrada (%)
🔵 Salida (%)

##### 🔗 Agregar Nueva Conexión

Calle Origen:
Calle Destino:
Tipo de Conexión:
💡 Conexión de Incorporación: Une una calle origen a un carril específico de la calle destino en una posición inicial.
Carril Destino:
Carril al que se incorporarán los vehículos
Posición Inicial (celda): Posición en la calle destino donde comienza la incorporación
💡 Conexión Probabilística: Define un carril origen y configura la probabilidad y posiciones para cada carril destino disponible.
Carril Origen:
Carril desde el cual saldrán los vehículos

Selecciona una calle destino para configurar las salidas

##### ✏️ Editar Conexión

Conexión:
Tipo de Conexión:
Carril Destino:
Carril al que se incorporarán los vehículos
Posición Inicial (celda): Posición en la calle destino donde comienza la incorporación
💡 Conexión Probabilística: Define las salidas con sus probabilidades y posiciones.
Carril Origen:
Carril desde el cual saldrán los vehículos

Cargando configuración...

##### ℹ️ Acerca de FLUVI

#### FLUVI

Simulador de Sistema de Gestión del Flujo Vehicular en Vialidades Cercanas a Áreas Académicas de IPN - ESCOM

##### 1 Introducción

FLUVI es un simulador de tráfico vehicular basado en autómatas celulares diseñado específicamente para analizar y optimizar el flujo de vehículos en vialidades cercanas a áreas académicas del Instituto Politécnico Nacional, con enfoque en la Escuela Superior de Cómputo (ESCOM).

El sistema permite modelar escenarios complejos de tráfico urbano, incluyendo:

- Múltiples carriles y calles interconectadas
- Generación dinámica de vehículos
- Cambios de carril con probabilidades configurables
- Detección y resolución de intersecciones
- Visualización en tiempo real de métricas de tráfico
- Calles con curvaturas personalizables

Este proyecto surge de la necesidad de comprender y mejorar la circulación vehicular en zonas académicas, permitiendo a investigadores y planificadores urbanos simular diferentes escenarios antes de implementar cambios en la infraestructura real.

##### 2 Algoritmos

###### Regla 184 de Autómatas Celulares

FLUVI implementa una versión modificada de la Regla 184, un autómata celular unidimensional que simula el flujo de tráfico de manera eficiente.

###### 📚 ¿Qué es la Regla 184?

La Regla 184 es un autómata celular que modela el tráfico vehicular donde cada celda puede estar vacía (0) o ocupada por un vehículo (1). Los vehículos se mueven hacia adelante si la celda siguiente está vacía, creando un flujo natural de tráfico.

###### Funcionamiento Básico de la Regla 184

Izquierda | Centro | Derecha | → | Nuevo Estado (Centro)
--- | --- | --- | --- | ---
1 | 1 | 1 | → | 1
1 | 1 | 0 | → | 0
1 | 0 | 1 | → | 1
1 | 0 | 0 | → | 0
0 | 1 | 1 | → | 1
0 | 1 | 0 | → | 1
0 | 0 | 1 | → | 0
0 | 0 | 0 | → | 0

###### 🔧 Modificaciones Implementadas en FLUVI

Hemos adaptado y extendido la Regla 184 clásica para soportar escenarios de tráfico más complejos y realistas:

###### 1️⃣ Multi-carril

Expandimos la regla unidimensional a un sistema de múltiples carriles, permitiendo que los vehículos cambien de carril basándose en probabilidades configurables.

###### 2️⃣ Celdas de Espera

Introducimos el concepto de celdas en espera para manejar bloqueos temporales (como intersecciones o conexiones congestionadas), previniendo colisiones.

###### 3️⃣ Conexiones entre Calles

Implementamos tres tipos de conexiones: lineales (1-a-1), incorporación (N-a-1) y probabilísticas (1-a-N con distribución).

###### 4️⃣ Resolución de Intersecciones

Agregamos un sistema de prioridad alternante para resolver conflictos en intersecciones, simulando semáforos o reglas de paso.

###### 5️⃣ Prevención de Cruces en X

Implementamos lógica para prevenir cambios de carril cruzados (patrón X) donde dos vehículos adyacentes intentan intercambiar carriles simultáneamente.

###### 6️⃣ Calles Curvas

Extendimos el modelo a geometrías no lineales mediante sistema de vértices con interpolación angular para calles con curvaturas.

###### ✅ Resultado

Estas modificaciones permiten simular escenarios de tráfico urbano complejos manteniendo la eficiencia computacional de los autómatas celulares, con actualizaciones en tiempo real y soporte para miles de vehículos simultáneos.

##### 3 Formato de Archivos

FLUVI utiliza formato JSON para guardar y cargar simulaciones completas.

###### Estructura del archivo JSON:

    {
      "version": "1.0",
      "nombre": "Nombre de la Simulación",
      "fecha": "2024-01-01T12:00:00.000Z",
      "calles": [
        {
          "nombre": "Calle Principal",
          "tamano": 100,
          "tipo": "CONEXION",
          "carriles": 3,
          "x": 500,
          "y": 300,
          "angulo": 0,
          "probabilidadGeneracion": 0.5,
          "probabilidadSaltoDeCarril": 0.02,
          "esCurva": false,
          "vertices": []
        }
      ],
      "conexiones": [
        {
          "tipo": "LINEAL",
          "origen": "Calle1",
          "destino": "Calle2",
          "carrilOrigen": 0,
          "carrilDestino": 0
        }
      ],
      "edificios": [
        {
          "label": "ESCOM",
          "x": 1000,
          "y": 500,
          "width": 200,
          "height": 150
        }
      ]
    }

💡 Consejo: Puedes exportar tu simulación actual usando el botón "Guardar Simulación" en el Constructor de Mapas.

##### 4 Advertencias

Algunos problemas conocidos y limitaciones actuales del sistema:

- Rendimiento en simulaciones muy grandes: Simulaciones con más de 50 calles largas pueden experimentar caídas de FPS.
- Colisiones en curvas muy cerradas: Curvaturas extremas (±40°) pueden generar ocasionalmente solapamientos visuales.
- Compatibilidad con navegadores antiguos: Requiere soporte de ES6+ y Canvas API.

⚠️ Nota: Estamos trabajando continuamente en mejoras y correcciones. Si encuentras algún problema, por favor repórtalo al equipo de desarrollo.

##### 5 Créditos

###### 👥 Equipo de Desarrollo

👨‍💻

###### Connor Urbano Mendoza

soyconnor@outlook.com

Desarrollador

👨‍💻

###### Luis Gael Molina Figueroa

luisgaelmf@gmail.com

Desarrollador

👩‍💻

###### Denisse Marques Morales

denissemarquez2704@gmail.com

Desarrolladora

###### Directores del Proyecto

- Juárez Martínez Genaro
- Maldonado Castillo Idalia

###### 🏛️ Institución

Instituto Politécnico Nacional (IPN)

Escuela Superior de Cómputo (ESCOM)

Artificial Life Robotics (ALIROB)

##### 📅 Configurar Fecha y Hora

Selecciona el día de la semana y la hora de inicio para la simulación. Esto afecta los patrones de tráfico según el perfil horario.

📆 Día de la Semana
🕐 Hora 0-23 horas
⏱️ Minutos 0-59 minutos
🔍 Vista previa:
Lunes 07:00
💡 Nota: Diferentes días y horas tienen distintos multiplicadores de tráfico. Por ejemplo, las horas pico (7-9 AM, 6-8 PM) en días laborales tienen más tráfico.

##### 📊 Configurar Multiplicadores de Generación por Hora

Ajusta los multiplicadores de generación de vehículos para cada hora del día (0-23). Cada slider controla exclusivamente su rango de hora (ej: 08:00 controla de 08:00 a 08:59). Estos valores se aplican cuando "Perfiles" está activado.

📅 Día de la Semana:
Los cambios se aplicarán solo al día seleccionado
💡 Rango de valores:

- 0.0 - 0.5: Tráfico muy bajo (madrugada)
- 0.5 - 1.0: Tráfico bajo a normal
- 1.0 - 1.5: Tráfico normal a alto
- 1.5 - 2.5: Hora pico (mañana/tarde)
- 2.5 - 3.0: Tráfico muy intenso

###### 🌙 Madrugada y Mañana (00:00 - 11:00)

###### ☀️ Tarde y Noche (12:00 - 23:00)

###### ⚡ Presets Rápidos:

🌡️

##### Mapa de Calor - Análisis de Tráfico

Snapshot en tiempo real
🚗
Vehículos Activos
--
🛣️
Calles Renderizadas
--
⏱️
Tiempo de Generación
--
🕐
Hora Simulada
--

###### 📊 Interpretación del Mapa

Verde Tráfico fluido - Alta velocidad
Amarillo Tráfico moderado - Velocidad media
Rojo Congestionamiento - Velocidad baja
Gris Sin vehículos - Celdas vacías
Generando mapa de calor...

Generando mapa de calor...

Analizando densidad de tráfico en tiempo real
Generación: 0 | Vehículos: 0 | Hora: --/--/---- --:--:-- | Tiempo/Frame: 0.00s | Mult. de Gen. de Vehíc. por hora: 1.0×
Velocidad: 10
Generación: 10
Perfiles

##### 📋 Configurar Calles en Métricas

Selecciona qué calles deseas incluir en el cálculo de métricas (densidad, flujo, velocidad, entropía). Por defecto, todas las calles están incluidas.

Indicadores visuales en el mapa:
Verde = Incluida
Rojo = Excluida
-- de -- calles incluidas

##### 💾 Guardar Escenario

Nombre del Escenario:
El nombre es obligatorio (máximo 50 caracteres).
Descripción (opcional): Máximo 200 caracteres
ℹ️ Se guardará:

- Todos los obstáculos (baches, construcciones, árboles)
- Todas las áreas inundadas
- Todos los bloqueos de carril
- Configuración de cada calle afectada

##### 📂 Cargar Escenario

Selecciona un escenario guardado para cargarlo. Nota: Se eliminarán todos los obstáculos actuales antes de cargar.

📤 Subir Archivo JSON Carga un escenario desde un archivo .json previamente descargado

###### Escenarios en el navegador:

⚠️ No hay escenarios guardados
Guarda un escenario primero usando el botón "Guardar" o sube un archivo JSON

##### 📊 Analizador de Métricas

Carga un archivo CSV de métricas exportado previamente para generar visualizaciones avanzadas usando Python.

📤 Cargar archivo CSV o JSON Ningún archivo seleccionado (CSV o JSON de métricas)
Cargando...
Inicializando Python (Pyodide)...

###### 📈 Resultados del Análisis