Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hspencer/acto_del_momento_simultaneo

Visualización dinámica a partir de datos de Casiopea
https://github.com/hspencer/acto_del_momento_simultaneo

json mediawiki p5js

Last synced: about 1 month ago
JSON representation

Visualización dinámica a partir de datos de Casiopea

Awesome Lists containing this project

README 

        
# Acto del Momento Simultáneo

(acto poéticopandémico)



### Depencencias

El código del proyecto utiliza física simulada con la librería Matter.js y gráficos avanzados con p5.js. La idea central es la visualización de datos geográficos y notas asociadas, permitiendo al usuario interactuar con ellos mediante la simulación física.



### Variables Globales

- **sketch**: Objeto que representa el lienzo HTML donde se dibujan los gráficos.

- **data**: Objeto JSON que almacena datos cargados externamente.

- **notes**: Array de objetos visuales que representan las notas en el lienzo.

- **springs**: Arreglo destinado a almacenar resortes entre objetos para simular conexiones físicas.

- **w, h**: Variables para almacenar el ancho y alto del lienzo.

- **lastTime**: Utilizado para guardar un registro de tiempo para control de la simulación en 'World'.

- **Engine, World, Bodies, etc.**: Alias para componentes de Matter.js, facilitan el acceso y la escritura del código.



### Preparación y Carga de Datos

La función `preload()` se utiliza para cargar datos antes de que el resto del sketch de p5.js se inicialice. Esto incluye:

- Cálculo del ancho y alto del lienzo basado en un elemento HTML.

- Carga de datos JSON de una URL específica.

- Carga de fuentes tipográficas que se usarán para texto.



### Función `gotData()`

Esta función maneja la respuesta después de cargar los datos JSON. Calcula los límites geográficos (latitud y longitud) de los resultados para establecer un rango de acción.



### Creación de Objetos y Restricciones

- `createObjects()`: Crea objetos basados en los datos cargados. Cada objeto nota se crea con propiedades como latitud, longitud, autor, entre otros.

- `createConstraints()`: Establece restricciones y límites en el mundo de Matter.js, incluyendo un límite para el ratón, para interactuar con los objetos físicos.



### Funciones de Dibujo y Animación

- **setup()**: Configura el entorno inicial, crea el lienzo, inicializa la simulación física, y prepara los gráficos.

- **draw()**: Función que se ejecuta en un bucle para dibujar el lienzo. Actualiza la simulación física, maneja la interactividad de los objetos, y actualiza los gráficos basados en las interacciones.



### Interactividad

- **mouseClicked() y touchEnded()**: Gestiona eventos de clic y toque para interactuar con las notas. Activa resortes y modifica el estado de las notas.

- **saveFile()**: Permite al usuario guardar el estado actual del lienzo como una imagen PNG.



### Visualización de Texto

- `displayNoteTitle()` y `displayNoteContent()`: Funciones para mostrar el título y contenido de las notas en el lienzo. Utilizan las fuentes cargadas y manejan el formato del texto.



### Consideraciones de Rendimiento

- La gestión de gráficos y simulación física en un solo sketch puede ser demandante. La optimización puede ser crucial, especialmente en la gestión de eventos y redibujado de gráficos.

- Uso de `blendMode()` en `updateGraphics()` para efectos visuales podría ralentizar el rendimiento si no se maneja con cuidado.



Este código es un ejemplo avanzado (que puede ser utilizado como plantilla) de cómo combinar p5.js con Matter.js para crear experiencias interactivas y visualmente atractivas basadas en datos dinámicos. Muestra técnicas de carga de datos, visualización gráfica, y simulación física integradas de manera cohesiva para proporcionar interacción y visualización de datos en tiempo real.