Gráficos y Renderizado
Sounio actualmente tiene dos familias de gráficos reales en esta instantánea del repositorio:
los displayes científicos basados en terminal nativo ubicados en examples/graphics/ y la salida de imágenes rasterizada por software ubicada en examples/render/.
Las vistas previas rasterizadas a continuación se generan del mismo stdout de la versión revisada del artefacto JIT, luego se cometen como recursos SVG para el sitio web.
Esta página ahora envía cinco vistas previas rasterizadas en lugar de dos muestras aisladas.
Salida Raster Real
Este ejemplo es un rasterizador barycentríco real. La imagen de la página pública se genera a partir de la salida del compilador, no de un dibujo a mano.
Source: examples/render/triangle_basic.sio
bin/souc run examples/render/triangle_basic.sio > triangle_basic.ppm
Este ejemplo proyecta un cubo rotado, sombra los bordes por la profundidad y emite un marco portable PPM directamente desde el código Sounio.
Source: examples/render/cube_wireframe.sio
bin/souc run examples/render/cube_wireframe.sio > cube_wireframe.ppm
Este preview convierte la incertidumbre orientada por tipo en un verdadero campo epistémico: el valor se extiende por x, epsilon se extiende por y, y el brillo disminuye a medida que aumenta la incertidumbre.
Source: examples/render/uncertainty_field.sio
bin/souc run examples/render/uncertainty_field.sio > uncertainty_field.ppm
Este renderiza codifica directamente en píxeles un diagrama estilo front-door, incluyendo el estilo de coloración de intervención do(X) y un latente explícito mediador.
Source: examples/render/causal_dag.sio
bin/souc run examples/render/causal_dag.sio > causal_dag.ppm
Esta escena rota una tetrahedron con matemáticas de quaterniones, proyecta ambas poses en el espacio de pantalla y superpone líneas de correspondencia entre los vértices originales y rotados.
Source: examples/render/quaternion_rotation.sio
bin/souc run examples/render/quaternion_rotation.sio > quaternion_rotation.ppmPor Qué Esta Pila Gráfica?
- Salida del compilador real: La sección de raster superior se genera a partir de la salida verificada de
souc run, no de capturas de pantalla - Formatos de salida portátiles: Las demostraciones de terminal utilizan Unicode/ANSI; las demostraciones de raster emiten solo PPM
- Sin dependencia de ventanas: No se requiere X11, OpenGL o un motor de interfaz gráfica para los ejemplos actuales
- Amigable con SSH: La renderización por terminal y por archivos funcionan en sistemas remotos también
Galería de Terminales
Tabla de Multiplicación de Octoniones
La joya de la corona: una visualización completamente colorizada de la álgebra 8D donde la estructura del plan Fano se ve de inmediato a través de patrones de colores.
╔══════════════════════════════════════════════════════════════════════════╗ ║ TABLA DE MULTIPLICACIÓN DE OCTONIÓNES - Edición en Colores ║ ╚══════════════════════════════════════════════════════════════════════════╝ × │ 1 i j k l il jl kl ────┼──────────────────────────────────────────────── 1 │ 1 i j k l il jl kl i │ i -1 k -j il -l -kl jl j │ j -k -1 i jl kl -l -il k │ k j -i -1 kl -jl il -l l │ l -il -jl -kl -1 i j k il │ il l -kl jl -i -1 -k j jl │ jl kl l -il -j k -1 -i kl │ kl -jl il l -k -j i -1 Légenda: 1=real ijk=cuaternión liljlkl=octonio dim=negativo
Mapa de Activación Cerebral por RMf
Visualización de un trozo de cerebro de 32×32 con intensidad de grádiente utilizando caracteres Unicode de bloques.
╔═══════════════════════════════════════════════════╗ ║ ACTIVACIÓN CEREBRAL POR FMRI - Corta z=32 ║ ╚═══════════════════════════════════════════════════╝ Anterior ░░░░░░░░░░░░░░░░░░░ ░░░░░░▒▒▒▒▒▒▒▒░░░░░░░░ ░░░░▒▒████████▒▒░░░░ ░░░▒▒██████████████▒▒░░░ ░░░▒▒███████████████████▒▒░░░ L ░░▒▒███████░░░░███████▒▒░░ R ░░▒▒███████░░░░░░███████▒▒░░ ░░▒▒████████░░████████▒▒░░ ░░░▒▒███████████████▒▒░░░ ░░░░▒▒▒███████▒▒▒░░░░ ░░░░░░▒▒▒▒▒▒▒▒░░░░░░░░ ░░░░░░░░░░░░░░░░░░░ Posterior (continuado desde la sección anterior) Intensidad: ░=0.0 ▒=0.3 █=0.6 █=1.0 Regiones: Visual Motores Frontal
Cubo de cuadro en 3D
Rotación de un cubo con proyección isométrica y indicadores de ejes.
╔═══════════════════════════════════════════════════╗ ║ CUBO DE LÍNEAS 3D - Cuadro 42 ║ ╚═══════════════════════════════════════════════════╝ Y │ ┌───────────┐ ╱│ ╱│ ╱ │ ╱ │ ╱ │ ╱ │ ┌───────────┐ │ │ │ │ │ │ └───────│───┘ │ ╱ │ ╱ │ ╱ │ ╱ │╱ │╱ └───────────┘──────X ╱ Z Proyección: Isómetrica (30°) Ejes: X=rojo Y=verde Z=azul
Animación del Sistema de Partículas
Fuente de partículas basada en la física con fuerzas de gravedad y arrastre.
╔═══════════════════════════════════════════════════╗ ║ FUENTE DE PARTÍculas - Cuadro 120 ║ ╚═══════════════════════════════════════════════════╝ (continuado desde la sección anterior) ★ ★ ★ · · · ★ ★ · · · ○ · · ○ · · ○ ○ ○ ○ · │ · · │ · · │ · ════════════════════█════════════════════ Partículas: 847 activas Física: gravedad=0.1, resistencia=0.99, viento=0.02 Vida Útil: ★=nuevo ·=medio ·=viejo
Dinámica de Fluidos (Navier-Stokes)
Simulación de humo basada en el algoritmo “Fluidos Estables” de Jos Stam.
╔═══════════════════════════════════════════════════╗ ║ DINÁMICA DE FLUIDOS - Humo Alzando ║ ╚═══════════════════════════════════════════════════╝ ░░░░░░ ░░░░▒▒░░░░ ░░▒▒▓▓▒▒░░░░ ░░░▒▒██▓▓▒▒░░░░ ░░░░▒▒▓▓██▓▓▒▒░░░░░ ░░▒▒▓▓████▓▓▒▒░░ ░░▒▒████▒▒░░ ▒▒████▒▒ ▓▓██▓▓ ████ ████ ▓▓▓▓ ░██░ ▀▀ ═══════════════════════════════════════════ Algoritmo: Fluidos Estables (Stam 1999) Grid: 64×64, viscosidad=0.0001
Diagrama de Bifurcación
Mapa logístico mostrando el cascada de duplicación de períodos hacia el caos.
╔═══════════════════════════════════════════════════╗ ║ BIFURCACIÓN DE MAPA LOGÍSTICO - Doble de Período ║ ╚═══════════════════════════════════════════════════╝ x↑ 1│ ░░░░░░░░░░░░ │ ░░▒▒▒▒▒▒▒▒░░ │ ░░▒▒████████▒▒ │ ▒▒▒▒████████▒▒░ │ ▒▒▒▒ ████████ │ ▒▒▒▒ ████████ │ ▒▒▒▒ █ █ │ ░░░ █ █ │ ░░░░ │ ░░░░ │ ░░░░ 0│░░░░░ └──────────────────────────────────────────────→r 2.5 3.0 3.5 4.0 x_{n+1} = r × x_n × (1 - x_n) Muestra: punto fijo → período 2 → período 4 → caos
/>
Visualización de Redes Sociales con Algoritmo de Force-Directed
Visualización de redes sociales con el algoritmo de Fruchterman-Reingold.
╔═══════════════════════════════════════════════════╗ ║ GRAFO ORIENTADO POR Fuerza - Red Social ║ ╚═══════════════════════════════════════════════════╝ (Bob)─────────(Eve) │╲ ╱│ │ ╲ ╱ │ │ ╲ ╱ │ │ ╲ ╱ │ │ ╲ ╱ │ │ ╲ ╱ │ │ ╲ ╱ │ (Alice)───(Carol) │ ╱ ╲ │ │ ╱ ╲ │ │ ╱ ╲ │ │ ╱ ╲ │ │ ╱ ╲ │ │ ╱ ╲ │ │╱ ╲│ (Dave)─────────(Frank) Nodos: 6 Arestas: 12 Algoritmo: Fruchterman-Reingold Temperatura: 0.05 (convergido)
Incertidumbre del Filtro de Kalman
Actualizaciones crecientemente bayesianas secuenciales con niveles de confianza codificados en color.
╔═══════════════════════════════════════════════════╗ ║ FILTRO DE KALMÁN - Fusión de Sensors ║ ╚═══════════════════════════════════════════════════╝ Reducción de Incertidumbre Mediante Fusión de Sensors: Anterior (σ=10,0m): █████████████████████████████████████ ALTO Después de GPS (σ=4,5m): ████████████████ MEDIANIO Después de IMU (σ=0,5m): ██ BAJO Después de Lidar (σ=0,1m): ▏ MUYBAJO Crecimiento de Precisión (1/σ²): Anterior: ▏ +GPS: █ +IMU: ████████ +Lidar: ████████████████████████████████ Reducción total de incertidumbre: 99% Ganancia de precisión: 10.405×
╔═══════════════════════════════════════════════════╗ ║ PROJECTIONS CLIMÁTICAS CMIP6 - SSP2-4.5 ║ ╚═══════════════════════════════════════════════════╝ Cambio de Temperatura Global Media (2100 vs 1850-1900): GFDL-ESM4: █████████████████│ 1.8°C ± 0.2 HadGEM3: █████████████████████│ 2.1°C ± 0.3 MIROC6: ███████████████████│ 1.9°C ± 0.25 IPSL-CM6A: ███████████████████████│ 2.3°C ± 0.4 MPI-ESM: ████████████████████│ 2.0°C ± 0.1 ├─────────────────────────────────┤ 0 1.5°C 3.0°C Media de Ensemble: ████████████████████│ 2.02°C ± 0.18 ⚠ Obetivo de 1.5°C de París: 12% de probabilidad de permanecer por debajo ⚠ Obetivo de 2.0°C de París: 47% de probabilidad de permanecer por debajo
Ejecutando los Ejemplos
SOUC_BIN=bin/souc
Raster render (PPM en la salida estándar)
“$SOUC_BIN” run examples/render/triangle_basic.sio > triangle_basic.ppm “$SOUC_BIN” run examples/render/cube_wireframe.sio > cube_wireframe.ppm
Visualizaciones científicas
“$SOUC_BIN” run examples/visual/06_octonion_color_table.sio “$SOUC_BIN” run examples/visual/10_kalman_filter_color.sio “$SOUC_BIN” run examples/visual/12_animated_diffusion.sio
Demostraciones de la biblioteca gráfica
“$SOUC_BIN” ejecuta ejemplos/gráficos/demos/phase3_showcase.sio # 3D “$SOUC_BIN” ejecuta ejemplos/gráficos/demos/phase5_showcase.sio # Animación “$SOUC_BIN” ejecuta ejemplos/gráficos/demos/phase7_showcase.sio # Redes
Actualiza las vistas en raster del sitio web a partir de la salida exacta del compilador
npm —prefix website ejecuta genera:render-assets
Estructura de la Librería
| Fase | Módulos | Capacidades |
|---|---|---|
| Fase 1 | canvas, colores, dibujar, texto | Primitivos básicos, colores ANSI, formas |
| Fase 2 | ejes, scatter, grafico_lineal, grafico_barras, histograma, mapa_calor | Gráficos bidimensionales |
| Fase 3 | proyección, wireframe, scatter3d | Visualización en 3D |
| Fase 4 | entrada, grafico_interativo | Ajuste de zoom, pán, mouse/tarjeta de teclado |
| Fase 5 | animación, sistema_de_partículas, simulación_fluida | Animación, física |
| Fase 6 | diagrama_de_fases, bifurcación, poincare, líneas_de_flujo | Gráficos científicos |
| Fase 7 | gráfico, directed, layout_tree, render_grafico | Visualización de redes |
Comenzar con nosotros
Ejecuta uno de los presentaciones de fase
bin/souc ejecuta ejemplos/graphics/demos/phase1_showcase.sio